这里推荐一个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 这一个点,看官网文档照着做,就是实现不了,但是最后在国外论坛上找到了错误信息才做出来;希望对有需要的小伙伴有所帮助!

												

ionic app 优化三件套,让其更贴近原生app的更多相关文章

  1. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  2. app测试自动化之混合APP(之前的三篇为原生APP的操作)

    混合开发的App中,经常会有内嵌的H5页面:定位方法与原生APP不同,需要上下文切换 #获取所有上下文contexts=dr.contextsprint(contexts)#打印当前上下文(有点问题应 ...

  3. h5做的app和原生app的区别

    之所以说h5做的app和原生app的区别,是因为一位博友的问题: 随着 h5 的普及,是不是不再需要开发 app ? 我的回答是要分业务需求,分场合而定. 比如现在的微信小程序这么流行,甚至也取代了不 ...

  4. h5做app和原生app有什么区别?

    h5做app和原生app有什么区别? 一.总结 一句话总结: 二.h5做app和原生app有什么区别? 普通的HTML5技术与原生技术相比,有跨平台.动态.开放.直达二级内容页面等特点,但却在性能.工 ...

  5. H5和原生APP之间的区别

    最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两 ...

  6. h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  7. 客户端相关知识学习(二)之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  8. Gradle更小、更快构建APP的奇淫技巧

    本文已获得原作者授权同意,翻译以及转载原文链接:Build your Android app Faster and Smaller than ever作者:Jirawatee译文链接:Gradle更小 ...

  9. 这5个实用技巧,教你设计出更好的App

    三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有 ...

随机推荐

  1. codewars[7]-python Friend or Foe?

    list中保留四字母的,然后return. 解 def friend(x): i = len(x) ii = [] a = 0 while a < i: if len(x[a]) == 4: i ...

  2. [leetcode] 905. Sort Array By Parity [easy]

    原题链接 很水的一道题,就是数组内部交换. 水题就想着减少复杂度嘛,于是学到一种交换写法. class Solution { public: vector<int> sortArrayBy ...

  3. NetworkStream.Read

    Reads data from the NetworkStream. 参数 buffer 类型:System.Byte[]类型 Byte 的数组,它是内存中用于存储从 NetworkStream 读取 ...

  4. php框架内的数据库操作(微擎,tp,yii2)

    微擎数据库操作 关键字 查询 pdo_get pdo_getcolumn pdo_getall pdo_getslice pdo_fetchcolumn pdo_fetchall 示例: array ...

  5. HTML --- <a href=”#”>与 <a href=”javascript:void(0)” 的区别

    <a href=”#”>中的“#”其实是锚点的意思,默认为#top,所以当页面比较长的时候,使用这种方式会让页面刷新到页首(页面的最上部) javascript:void(0)其实是一个死 ...

  6. 林大妈的JavaScript基础知识(一):JavaScript简史

    前言:做一名Web设计师是一件令人兴奋的事.在Web技术中,JavaScript是一个经历从被人误解到万众瞩目的巨大转变,在历史的冲击中被留存下来的个体.因为JavaScript的引导,Web开发也从 ...

  7. Djangou中使用cookie和session

    一.会话跟踪 我们先需要了解是什么是会话!可以把会话理解为客户端与服务器之间的一次会话,在一次会话中可能会包含多次请求和响应,例如你给10086打个电话,你就是客户端,而10086服务人员就是服务器, ...

  8. iOS Xcode6 新建OC Category文件

    首先:File -> New File 接下来界面如下,选择Objective-C File,然后Next 在这里选择 Category 即可

  9. Spring Boot中自定义注解+AOP实现主备库切换

    摘要: 本篇文章的场景是做调度中心和监控中心时的需求,后端使用TDDL实现分表分库,需求:实现关键业务的查询监控,当用Mybatis查询数据时需要从主库切换到备库或者直接连到备库上查询,从而减小主库的 ...

  10. 从windows平台转战ubuntu

    说到ubuntu,可能很多人会有些陌生,但对于有些人很熟悉.ubuntu是linux里面最为流行的一版,以下来自百度百科.       Ubuntu(乌班图)是基于Debian GNU/Linux,支 ...