ionic最佳化(安卓機)方法，ionic安卓機

ionic最佳化(安卓機)方法，ionic安卓機

目前項目用的ionic1,採用的最佳化方法有以下兩個:

1. 安裝cordova-plugin-crosswalk-webview外掛程式,能提升手機的運行速度

2. 如果僅僅只是裝crosswalk在安卓機跑起來完全不能看,尤其在路由跳轉的動畫中卡頓非常嚴重,體驗感極差.此時可以安裝一個

轉場動畫外掛程式com.telerik.plugins.nativepagetransitions,它的githup地址為:

用了這個外掛程式之後路由跳轉的動畫便採用了原生的方式來實現了.除了安裝這個外掛程式之外,你另外還需要下載ionic-native-transitions.js這個js檔案,並在首頁index.html中引入.緊接著需要在主模組appModule引入ionic-native-transitions這個模組。在app.js的.config方法中按如下配置:

    var transOption = {      duration: 250,      slowdownfactor: 10,      androiddelay: -1,      fixedPixelsTop: 0,      fixedPixelsBottom: 0,      backInOppositeDirection: false    };    var defaultTrans = {      type: 'slide',      direction: 'left'    };    var backTrans = {      type: 'slide',      direction: 'right'    };    function setAndroidTrans(){      $ionicNativeTransitionsProvider.setDefaultOptions(transOption);      $ionicNativeTransitionsProvider.setDefaultTransition(defaultTrans);      $ionicNativeTransitionsProvider.setDefaultBackTransition(backTrans);      $ionicNativeTransitionsProvider.enable(true); // Enable plugin and disable ionic transitions    }    ionic.Platform.isAndroid()  setAndroidTrans() : $ionicNativeTransitionsProvider.enable(false);

但是如果你先安裝了crosswalk,再安裝這個外掛程式便會發現出現問題,打包出來的app的路由動畫會出現紊亂,這是因為crosswalk幹擾了這個外掛程式,所以需要在專案檔config.xml檔案中加上一行配置:

<preference name="CrosswalkAnimatable" value="true" />

此時路由動畫確實能跑起來,但是按返回鍵路由的方向出現問題,所有的動畫方向全部從右往左,按返回鍵時路由方嚮應該從左

往右才對.要修正這個問題只需要將$ionicHistory.goBack()全部修改成$rootScope.$ionicGoBack()。

這樣就大功告成了嗎,看上去是的，打包成app之後,路由跳轉起來縱享絲滑,毫無卡頓,但是如果點擊頁面上的input,軟鍵盤出

現時會使頁面晃動，你可以嘗試一下,當把CrosswalkAnimatable的值設定為false時這個晃動就消失了,但是如果你想使用這個

外掛程式就必須要求把它設定為true，要解決這個晃動問題可按照下面方法操作:

1.在app.js中設定ionic.Platform.isFullScreen=true，例如如

 .config(['$stateProvider','$urlRouterProvider','$ionicConfigProvider','$provide','$httpProvider','$ionicNativeTransitionsProvider',function($stateProvider, $urlRouterProvider,$ionicConfigProvider,$provide,$httpProvider,$ionicNativeTransitionsProvider) {    $httpProvider.defaults.timeout = 8000;    $httpProvider.interceptors.push('UserInterceptor');    $ionicConfigProvider.platform.ios.tabs.style('standard');    $ionicConfigProvider.platform.ios.tabs.position('bottom');    $ionicConfigProvider.platform.android.tabs.style('standard');    $ionicConfigProvider.platform.android.tabs.position('standard');    $ionicConfigProvider.platform.ios.navBar.alignTitle('center');    $ionicConfigProvider.platform.android.navBar.alignTitle('center');    /*$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');     $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');*/    $ionicConfigProvider.platform.ios.views.transition('ios');    $ionicConfigProvider.platform.android.views.transition('android');    $ionicConfigProvider.backButton.text('').icon('ion-chevron-left');    $ionicConfigProvider.backButton.previousTitleText(false);    $ionicConfigProvider.views.forwardCache(true);    $ionicConfigProvider.scrolling.jsScrolling(true);    ionic.Platform.isFullScreen = true;    var transOption = {      duration: 250,      slowdownfactor: 10,      androiddelay: -1,      fixedPixelsTop: 0,      fixedPixelsBottom: 0,      backInOppositeDirection: false    };    var defaultTrans = {      type: 'slide',      direction: 'left'    };    var backTrans = {      type: 'slide',      direction: 'right'    };    function setAndroidTrans(){      $ionicNativeTransitionsProvider.setDefaultOptions(transOption);      $ionicNativeTransitionsProvider.setDefaultTransition(defaultTrans);      $ionicNativeTransitionsProvider.setDefaultBackTransition(backTrans);      $ionicNativeTransitionsProvider.enable(true); // Enable plugin and disable ionic transitions    }    ionic.Platform.isAndroid()  setAndroidTrans() : $ionicNativeTransitionsProvider.enable(false);  }])

2.編輯platforms/android/AndroidManifest檔案第一處值修改為

3.在app.js中移除cordova.plugins.Keyboard.disableScroll(true);

如果你不想在tab頁面切換也有動畫,路由可這樣配置:

 $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "html/tabs.html" }) .state('tabs.product', { url: "/product", nativeTransitions: null, views: { 'product-tab': { templateUrl: "html/productAndBrand.html", controller: 'productAndBrandCtrl', } } }) .state('tabs.homepage', { url: "/homepage", nativeTransitions: null, views: { 'aftersale-tab': { templateUrl: 'html/homepage.html', controller: 'homepageCtrl' } } }) //資訊頁面 .state('tabs.information', { url: "/information", nativeTransitions: null, views: { 'info-tab': { templateUrl: 'html/information.html', controller: 'informationCtrl' } } }) .state('intro', {//引導頁 url: "/intro", templateUrl: "html/intro.html", controller: 'introCtrl' });

tab下子頁面的路由也要添加上nativeTransition:null,那麼tabs之間的切換便無動畫.但是項目有些地方會設定嵌套路由,嵌套路由頁面跳轉時希望不要整個頁面做動畫滑動,而僅僅只需要子路由的視圖部分做轉場動畫就行了,但這個效果ionic的路由已經做好了.所以我們可以採用以下方法動態控制採用ionic路由動畫還是外掛程式的路由動畫.

$ionicNativeTransitions.enable(true);//採用外掛程式動畫,關閉ionic動畫

$ionicNativeTransitions.enable(false);//採用ionic動畫,關閉外掛程式動畫

至此大功告成,在市面上600塊錢的安卓機上跑起來也很流暢,再也沒有以前無法忍受的感覺了.