zoukankan      html  css  js  c++  java
  • 关于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

  • 相关阅读:
    【转】HTML CANVAS
    【转】JY 博客
    【转发】如何使用NPM?CNPM又是什么?
    【转廖大神】package.json 包安装
    【转】Socket接收字节缓冲区
    C# 串口操作系列(5)--通讯库雏形
    C# 串口操作系列(3) -- 协议篇,二进制协议数据解析
    C# 串口操作系列(4) -- 协议篇,文本协议数据解析
    .netCore微服务使用Nginx集中式管理实现
    nginx代理访问及上传文件异常413 Request Entity Too Large
  • 原文地址:https://www.cnblogs.com/zmc-change/p/6069817.html
Copyright © 2011-2022 走看看