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 4iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1androiddelay: -1, // same as above but for Android, default -1winphonedelay: -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 optionbackInOppositeDirection: 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 这一个点，看官网文档照着做，就是实现不了，但是最后在国外论坛上找到了错误信息才做出来；希望对有需要的小伙伴有所帮助！

转载于:https://www.cnblogs.com/luleixia/p/6782022.html

ionic app 优化三件套，让其更贴近原生app相关推荐

mui switch 实现方案让你的html 设计更贴近原生
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 switch的 ...
mPaaS：全新移动开发平台，只为打造性能更优越的App
简介: 基于移动开发现状与技术演进预判,提供移动开发强力解决方案,洞察 mPaaS 如何帮助企业有效降低技术门槛,减少研发成本,搭建更稳定.更流畅的移动 App. mPaaS 是源自于支付宝的移动开发 ...
移动原生App开发和HTML 5开发，你更看好哪个？
小程序的发布,让我们不得不思考,移动原生App开发和HTML 5开发,哪个更有优势? 在技术的发展上,HTML 5会取代App应用吗? 你更看好哪个? 经常会有人问"APP开发究竟是用原生的 ...
App优化（六）网络优化
引言 App优化(一)App启动速度优化 App优化(二)布局优化 App优化(三)ANR优化 App优化(四)内存优化 App优化(五)电量优化 App优化(六)网络优化互联网时代, App作为于 ...
h5做app和原生app有什么区别？
H5开发的web APP和原生APP的区别有以下几个方面: 一.开发方面原生App ⊙ 每一种移动操作系统都需要独立的开发项目 ⊙ 每种平台都需要独立的开发语言.Java(Android), Obj ...
HTML5定稿了为什么原生App世界将被颠覆
原文:http://www.admin10000.com/document/5415.html 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. ...
HTML5定稿了，为什么原生App世界将被颠覆
摘要:2014年10月底,HTML5规范正式定稿,结束了长达8年的长跑.数字天堂董事长,DCloud CEO王安梳理了HTML5诞生至今的演变过程,并从开发者和用户两个角度分析了HTML对两个人群的优 ...
h5做的app和原生app的区别
之所以说h5做的app和原生app的区别,是因为一位博友的问题: 随着 h5 的普及,是不是不再需要开发 app ? 我的回答是要分业务需求,分场合而定. 比如现在的微信小程序这么流行,甚至也取代了不 ...
H5开发的web APP和原生APP的区别
H5开发的web APP和原生APP的区别有以下几个方面:一.开发方面原生App ⊙ 每一种移动操作系统都需要独立的开发项目⊙ 每种平台都需要独立的开发语言.Java(Android), Objec ...

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

ionic app 优化三件套，让其更贴近原生app相关推荐

最新文章

热门文章