Ionic optimization (Android) method, ionic android

Ionic optimization (Android) method, ionic android

Currently, ionic1 is used in the project. There are two optimization methods:

1. Install the cordova-plugin-crosswalk-webview plug-in to speed up the mobile phone

2. If you just install crosswalk and run it on the android server, it will be totally invisible, especially when the route jump animation gets stuck very badly and the experience is poor. You can install

The transfer animation plug-in com. telerik. plugins. nativepagetransitions has the following githup addresses:

After using this plug-in, the animation for Route jump is implemented in the native mode. In addition to installing this plug-in, you also need to downloadIonic-native-transitions.jsThis JS file is introduced in index.html on the first page, and then needs to be introduced in the main module appModule.Ionic-native-transitions. In the. config method of app. js, configure as follows:

    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);

However, if you first install crosswalk and then install this plug-in, you will find problems. The routing animation of the packaged app may be disordered, because crosswalk interferes with this plug-in, therefore, the project file config. add the following configuration to the xml file:

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

At this time, the route animation can run, but the problem occurs in the direction of the route by pressing the return key. All the animation directions are from right to left. When you press the return key, the route direction should be from left.

To correct this problem, you only need$Modify ionicHistory. goBack () to $ rootScope. $ ionicGoBack ().

Is this all done? It looks like yes. After packaging it into an app, the route jumps to enjoy a smooth link without any lag. However, if you click the input on the page and the keyboard goes out

This will shake the page now. You can try it. When you set the value of CrosswalkAnimatable to false, the shaking will disappear, but if you want to use this

The plug-in must be set to true. To solve this shaking problem, perform the following operations:

1. Set ionic. Platform. isFullScreen = true in app. js. For example

 .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. Edit the first value of the platforms/android/AndroidManifest file

3. Remove cordova. plugins. Keyboard. disableScroll (true) from app. js );

If you do not want to switch to the tab page, you can configure routes as follows:

$ StateProvider. state ('tababs ', {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' }}) // information page. state ('tabs. information ', {url: "/information", nativeTransitions: null, views: {'info-tab': {templateUrl: 'html/information.html ', controller: 'ionionctrl '}}}). state ('intro', {// boot page url: "/intro", templateUrl: "html/intro.html", controller: 'initctrl '});

If nativeTransition: null is added to the route entry on the subpage under the tab, the switchover between tabs is not animated. however, nested routes are set in some parts of the project. When redirecting from a nested routing page, you only need to make the transition animation for the view part of the Child route, however, the ionic routing has been completed. therefore, we can use the following methods to dynamically control the use of ionic routing animation or plug-in routing animation.

$ IonicNativeTransitions. enable (True); // Use a plug-in animation to disable ionic animation.

$ IonicNativeTransitions. enable (False); // Use ionic animation to disable the plug-in animation.

At this point, the android machine with 600 yuan on the market is still running smoothly, and it is no longer intolerable.