关于ionic开发中遇到的坑与总结

我不是女神ヾ 2022-05-22 02:17 237阅读 0赞

这次是第二次使用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添加下面两句话

之后打包就会发现多了几个包，一个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.上拉菜单在安卓上样式改变

这个就只有自己重写样式了，下面的代码也是我从网上找到的，贴出来给大家看看。

![复制代码][copycode.gif]

.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写在里面，无论多少层都能控制的到，这个就搞不懂了。问题先放在这里，到时候来补缺。

今天review同事写的代码，他的本意是在单独页面引入单独的css文件，虽然css样式没有问题，但是导致了后退按钮失效，必须放在index.html引入或者使用requireJS

[copycode.gif]: /images/20220522/6904f5cb4ae64f5187a45f1993b7d339.png