关于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>标签。若是发现尚未好，加上'has-header','has-subheader'两个类再试试？这个标签是最经常使用的内容容器，能根据设备跳整内容区域尺寸，能和头部底部协同合做，能管理滚动，整体来讲很牛逼，通常来讲都须要这个标签。除了某些特殊状况，好比说在其中添加<ion-tabs>标签，它俩在一块儿会形成一些已知的css样式错误。

 

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: 0;
    left: 0;
    z-index: 11;
    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: 0;
    left: 0;
    right: 0;
    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: 11;
    overflow: hidden;
}

.platform-android .action-sheet .button {
    display: block;
    padding: 1px;
    width: 100%;
    border-radius: 0;
    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: 0;
}

.platform-android .action-sheet-options {
    background: #f1f2f3;
}

.platform-android .action-sheet-cancel .button {
    font-weight: 500;
}

.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