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 這一個點，看官網文檔照着做，就是實現不了，但是最后在國外論壇上找到了錯誤信息才做出來；希望對有需要的小伙伴有所幫助！