关于ionic开发中遇到的坑与总结
这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程。我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧。
1.关于ionic效率的问题,这个是我最关心的问题,毕竟用户体验才是第一位啊。
a)Native transitions
这个是一个cordova插件,主要是让页面间的切换更贴近原生,可以通过命令行安装。
cnpm install ionic-native-transitions --save cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.4.2
至于不会的童鞋可以下载这个js文件,引入之后就可以了。不要忘了将ionic-native-transitions作为依赖添加进去。
之后可以使用$ionicNativeTransitionsProvider.setDefaultOptions对这个插件进行基础配置,具体配置项和使用方法可以去看看这个
https://github.com/shprink/ionic-native-transitions
b)Native Scrolling
ionic默认使用javascript滚动方式,在真机上会有点不好控制,尤其在安卓机多图页面中问题最多。通常在配置中就全局禁用。
$ionicConfigProvider.scrolling.jsScrolling(false);
当然也可以在单独控制,在<ion-content>标签中添加overflow-scroll="true"就可以了
c)Caching
关于缓存网上大多推荐angular-cache,我没有用过,其实和localStorage原理是相同的,都是进入页面后判断一次,如果存在缓存中就直接取出来就行。有兴趣的童鞋可以去试试
d)crosswalk
这个插件通过替换安卓原生WebView为Crosswalk WebView,极大的提高了安卓app的性能,记住是极大的,不是一点点。唯一的坏处就是让app大了20m左右,不过和提高的性能比起来不值一提啊。下面是关于安装crosswalk的方法
cordova plugin add cordova-plugin-crosswalk-webview
还需要在config.xml添加下面两句话
<preference name="CrosswalkAnimatable" value="true" /> <gap:plugin name="org.crosswalk.engine" version="1.3.0" />
之后打包就会发现多了几个包,一个armv7,一个是x86,根据安卓机类型不同安装不同的apk就行。
2.关于ionic后退
ionic如果不是顶层视图的话,会在<ion-nav-back-button>位置上自动生成一个返回按钮,当这个标签中没有内容的时候默认是back字样的无边框按钮,如果是只有图标也会显示back字样。
我是在配置中全局配置中解决的
$ionicConfigProvider.backButton.text('').previousTitleText(false);
可以使用hide-back-button="true"来自定义隐藏返回按钮。当然后退也可以使用$ionicHistory.goback()方法来控制返回前几个页面,前提是那个页面存在,不然会返回到第一个页面。
3.关于ion-content标签
第一次用ionic开发的时候,<ion-nav-bar>就挡住了我的<ion-view>里面的内容,当时又没有静下心看看文档,结果搞了好久,结果是因为没有加<ion-content>标签。如果发现还没有好,加上'
这个标签是最常用的内容容器,能根据设备跳整内容区域尺寸,能和头部底部协同合作,能管理滚动,总体来说很牛逼,一般来说都需要这个标签。除了某些特殊情况,比如说在其中添加<ion-tabs>标签,它俩在一起会造成一些已知的css样式错误。has-header
','has-subheader
'两个类再试试?
4.上拉加载更多
这个其实很简单,主要注意两个地方,一是要加上ng-if判断,在数据加载完成后一定要隐藏掉。二是加上immediate-check="false"这个属性,因为无限滚动的机制限制,初始化的时候就会有两次载入方法(控制器触发一次,滚动组件触发一下),因此需要在初始化的时候禁用该组件。其次就是要在$http服务的finally方法块中通过广播告诉加载完成,不然动画会一直播放。
5.重写头部的方法
大家都应该有这个需求吧,复用的ion-nav-bar或者ion-header-bar并不能满足需求。之前想过通过各种参数,判断页面然后改变$rootScope之类的。其实想太多。。只要用hide-nav-bar或者hide-header-bar隐藏之前的复用头部,重新写一个就是了。
6.ionic侧边栏
侧边栏其实是一个比较简单的结构,不过我遇到的这个项目需要在不同的页面有不同的侧边栏内容,所以我把需要的内容存在$rootScope中,在页面跳转的时候给需要的$rootScope赋值。在点击的时候调用的是$ionicSideMenuDelegate.toggleRight()方法,从右侧打开侧边菜单。在回到首页时用$ionicSideMenuDelegate.toggleRight(false)关闭侧边栏。
7.上拉菜单在安卓上样式改变
这个就只有自己重写样式了,下面的代码也是我从网上找到的,贴出来给大家看看。
.platform-android .action-sheet-backdrop {
-webkit-transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out;
position: fixed;
top:;
left:;
z-index:;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
} .platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.4);
} .platform-android .action-sheet-wrapper {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
position: absolute;
bottom:;
left:;
right:;
width: 100%;
max-width: 500px;
margin: auto;
} .platform-android .action-sheet-up {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .platform-android .action-sheet {
margin-left: 8px;
margin-right: 8px;
width: auto;
z-index:;
overflow: hidden;
} .platform-android .action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius:;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
} .platform-android .action-sheet .button:hover {
color: #007aff;
} .platform-android .action-sheet .button.destructive {
color: #ff3b30;
} .platform-android .action-sheet .button.destructive:hover {
color: #ff3b30;
} .platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
box-shadow: none;
border-color: #d1d3d6;
color: #007aff;
background: #e4e5e7;
} .platform-android .action-sheet-has-icons .icon {
position: absolute;
left: 16px;
} .platform-android .action-sheet-title {
padding: 16px;
color: #8f8f8f;
text-align: center;
font-size: 13px;
} .platform-android .action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
} .platform-android .action-sheet-group .button {
border-width: 1px 0px 0px 0px;
} .platform-android .action-sheet-group .button:first-child:last-child {
border-width:;
} .platform-android .action-sheet-options {
background: #f1f2f3;
} .platform-android .action-sheet-cancel .button {
font-weight:;
} .platform-android .action-sheet-open {
pointer-events: none;
} .platform-android .action-sheet-open.modal-open .modal {
pointer-events: none;
} .platform-android .action-sheet-open .action-sheet-backdrop {
pointer-events: auto;
} .platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: center;
} .platform-android .action-sheet-cancel {
display: block;
}
8.关于隐式声明controller时遇到的问题
这个问题不应该算是ionic的问题,而是angular的问题,不过在这个项目里遇到的就写在这里吧。
问题就在于我声明路由的时候把controller也定义了,但是遇到那种ng-repeat,ng-if嵌套多的页面,最深层的一些事件就无法被控制,原理没搞明白,但是解决方法很简单,在<ion-content>标签里面,注意一定是里面,如果写在外面没有效果,写在标签上事件倒是控制到了,但是页面就不能滑动了。原因大概是ng-repeat和ng-if这种指令本身会创立一个作用域,多层嵌套后就会失效,但是自己怎么也想不明白,只要把controller写在里面,无论多少层都能控制的到,这个就搞不懂了。问题先放在这里,到时候来补缺。
---------------2016/11/21 更新--------------------
今天review同事写的代码,他的本意是在单独页面引入单独的css文件,虽然css样式没有问题,但是导致了后退按钮失效,必须放在index.html引入或者使用requireJS
关于ionic开发中遇到的坑与总结的更多相关文章
- ionic开发中的各种坑
提前说明:这些坑是ionic1的. 一.关于缓存:<ion-view>中设置cache-view="false"表示禁用缓存,默认为true; 二.列表进入详情页面后返 ...
- ionic开发中,输入法键盘弹出遮挡住div元素
采用ionic 开发中,遇到键盘弹出遮挡元素的问题. 以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮. 最终采用自定义指令解决了问题: .directive('popupKeyBoardSho ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- celery开发中踩的坑
celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...
- 【EasyUI总结】EasyUI开发中遇到的坑
普遍: 1.easyui在书写键值对的时候要注意是否要加引号,在需要加引号的地方不加则无法渲染: datagrid数据网格: 1.datagrid默认请求方式是post,如果要使用分页功能pagina ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
- Ionic开发中常见问题和解决方案记录
1npm按装包失败 更换源:npm config set registry https://registry.npm.taobao.org 或者使用cnpm sudo npm install -g c ...
- TFS扩展开发中遇到的坑
本码农最近开发一个VS扩展,其中有些功能涉及到文件的签出.我们公司用的是TFS,遇到了一些奇特的现象,将解决过程记录如下. 一.明明在线的连接却Offline属性等于True public stati ...
- 那些在django开发中遇到的坑
1. 关于csrf错误 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或 ...
随机推荐
- 小计一次linux下渗透方法
本文转自91ri 踩点 目标域名是XX.com 我们的目标是大站,所以主站一般都挺安全的,所以直接寻找二级目录,运气好时能找到一些开源的cms,运气更好点找到个dede啥的,那就…. 我们直接枚举他域 ...
- python-mysql-replication
python处理mysql binlog增量日志 http://python-mysql-replication.readthedocs.io/en/latest/examples.html 同样的项 ...
- 【转】WEB开发三层架构概述
关于 三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).区分层次的目的即为了“高内聚,低耦合” ...
- 标准库Queue的实现
跟上篇实现stack的思路一致,我增加了一些成员函数模板,支持不同类型的Queue之间的复制和赋值. 同时提供一个异常类. 代码如下: #ifndef QUEUE_HPP #define QUEUE_ ...
- poj 1390 Blocks (经典区间dp 方块消除)
Blocks Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4250 Accepted: 1704 Descriptio ...
- odoo12新特性: 会计改进
改进分析会计 分析会计层级结构 分析分配 分析分录增加了表格视图 ============== SPECIFICATIONS ============== a. Hierarchy - Cr ...
- 強大的Selector框架
代码地址如下:http://www.demodashi.com/demo/12648.html 前言 在开发的过程中,我们经常会遇到给view设置背景,什么圆形背景啊,圆角背景啊,点击变色背景啊之类的 ...
- presentModalViewController方法,present一个透明的viewController,带动画效果
//假设需要被present的控制器实例为controller,controller的背景色设置为clearColor UIViewController * rootcontroller = self ...
- Docker: devicemapper fix for “device or resource busy” (EBUSY) Cannot start container
受众:本文适用于熟悉码头工作的人员,并希望解决使用devicemapper存储/图形驱动程序时遇到的特定问题. 概述:虽然这不是专门用于设计师的问题,但是目前参与此驱动程序的技术人员会受到此影响. 使 ...
- 用VS2010创建三层架构开发模式及三层架构的研究
三层架构的研究 三层体系结构的概念 用户界面表示层(USL) 业务逻辑层(BLL) 数据访问层(DAL) BLL将USL与DAL隔开了,并且加入了业务规则 各层的作用 1:数据数据访问层:主要是对 ...