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块钱的安卓机上跑起来也很流畅,再也没有以前无法忍受的感觉了.
推荐阅读
-
uc浏览器不能上网怎么办?iphone/安卓uc浏览器无法上网/上不了网解决方法
-
内存修改器安卓(Android内存优化工具)
-
tcp工具怎么用(安卓tcp客户端工具使用方法)
-
md5工具使用方法(安卓md5校验工具apk)
-
Android 5.0上如何开启Google now?安卓5.0 Google now启用方法
-
Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解
-
win0如何运行安卓apk程序?win0运行安卓apk程序的方法
-
二进制编辑器怎么用(安卓手机html5编辑器使用方法)
-
安卓系统怎么刷机?教你最简单的刷机技巧,一学就会
-
安卓虚拟机有哪些(ios上的安卓虚拟机步骤)