ionic app 優化三件套，讓其更貼近原生app

這裏推薦一個ionic大神的簡書，裏面有好多關於好多ionic的技術分享！

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

 

搗鼓了很久的ionic，終於在優化過程終於有所進展了，再此，分享一篇博客，記錄下；

 

1、禁用ionic 自帶的滾動效果

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

$ionicConfigProvider.scrolling.jsScrolling(false); 這樣一來，app頁面就不會有ionic自帶的滾動效果了，我的以爲有點難以控制，滾動慣性較大；而禁用掉以後，滾動效果就是手機的滾動效果了；

固然，若是不想所有禁用，那你能夠經過分別在須要禁用的頁面標籤<ion-content>,加上overflow-scroll="true",這樣也能夠達到禁用的效果； 

 

2、引入 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的版本就好；（這點沒去研究）

 

3、引入插件 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 這一個點，看官網文檔照着作，就是實現不了，可是最後在國外論壇上找到了錯誤信息才作出來；但願對有須要的小夥伴有所幫助！