ionic app 优化三件套，让其更贴近原生app

这里推荐一个ionic大神的简书，里面有好多关于好多ionic的技术分享！

http://www.jianshu.com/u/c2e637a941ef

 

捣鼓了好久的ionic，终于在优化过程终于有所进展了，再此，分享一篇博客，记录下；

 

一、禁用ionic 自带的滚动效果

在app.js文件里面，全局配置:

$ionicConfigProvider.scrolling.jsScrolling(false); 这样一来，app页面就不会有ionic自带的滚动效果了，个人觉得有点难以控制，滚动惯性较大；而禁用掉之后，滚动效果就是手机的滚动效果了；

当然，如果不想全部禁用，那你可以通过分别在需要禁用的页面标签<ion-content>,加上overflow-scroll="true",这样也可以达到禁用的效果； 

 

二、引入 Crosswalk WebView

在低版本android中，Crosswalk WebView提供了比原生WebView更好的性能；但是相应的会使app体积大20m左右，这就是其唯一的缺点，但是为了性能，这点问题当然不是问题啦；

安装插件：

cordova plugin add cordova-plugin-crosswalk-webview

如果使用版本 Crosswalk >1.3 时还需要在config.xml中做如下设置：

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

OK，到此，你可以cordova build 的时候，就是生产armv7和x86的2个apk，安装在手机上用armv7的版本就好；（这点没去研究）

 

三、引入插件 ionic-native-transitions

这是我个人觉得对app体验最最重要的一步。这能使app的页面切换效果 “纵享丝滑”，告别ionic自带的页面切换卡顿效果！

插件安装：

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions

接着，到github上下载并在项目 index.html 引入ionic-native-transitions.js ；

下载地址： https://github.com/shprink/ionic-native-transitions

 

 

 下载后解压，然后引入

 

配置：

在app.js 添加依赖，如下：

angular.module('yourApp', [
    'ionic-native-transitions'
]);

同时，在app.js 下全局配置页面切换效果的默认值

.config(function($ionicNativeTransitionsProvider){
    $ionicNativeTransitionsProvider.setDefaultOptions({
        duration: 400, // in milliseconds (ms), default 400,
        slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4
        iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1
        androiddelay: -1, // same as above but for Android, default -1
        winphonedelay: -1, // same as above but for Windows Phone, default -1,
        fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
        fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
        triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option
        backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back
    });
});

这样就顺利完成了，再次build你的app,即可达到“纵享丝滑”的页面切换效果了，当然，这里还有更多的切换效果和更多的配置，详细请访问 https://github.com/shprink/ionic-native-transitions；

 

总结：

这篇博客是本人从0到1优化ionicApp遇到各种坑所总结出来的，在此记录下，特别是最后 ionic-native-transitions 这一个点，看官网文档照着做，就是实现不了，但是最后在国外论坛上找到了错误信息才做出来；希望对有需要的小伙伴有所帮助！