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

时间 2019-11-17 标签 ionic app 优化三件 3件套更贴近原生 app

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

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

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

1、禁用ionic 自带的滚动效果git

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

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

固然，若是不想所有禁用，那你能够经过分别在须要禁用的页面标签<ion-content>,加上overflow-scroll="true",这样也能够达到禁用的效果； app

2、引入 Crosswalk WebViewionic

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

安装插件：性能

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 这一个点，看官网文档照着作，就是实现不了，可是最后在国外论坛上找到了错误信息才作出来；但愿对有须要的小伙伴有所帮助！