关于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:;
    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