目前已参与了3个（大概吧？）基于ionic的hybird app项目，记录下碰到的问题

ion-backdrop的使用

ion-backdrop是ionic2提供的模态层，最近使用到的业务场景是，在聊天界面上下滑动的时候要keyboard关闭

  • ion-backdrop需要加载ion-content外面，不然不能覆盖整个content，因为content里有scroll-content这个滑动层，放在里面的话会只覆盖一个屏幕版面，下拉的信息不会被模态层覆盖
  • ngStyle手动设置，由于第一点，所以要手动调整z-index，top和bottom（bottom可以不设置，把ion-footer的z-index提高到比模态层高）
  • 这边触发的键盘消失event，可能会导致scroll-content的margin-bottom渲染错误，需要手动赋值一下
  • 上下滑通过（panstart）事件触发

滑动

由于content中有一层srcoll-content的滑动层，所以在不需要滑动的页面，可以将srcoll-content的overflow-y设置为hidden，就可以避免这个行为和其导致的一些bug（如ios有时上下滑会数据闪烁重复）

在别的dom中也是一样的，控制好height、max-height，然后设置overflow，可以使得滑动区域控制在一个范围内（如项目中地区选择的滑动区域）

ion-content的上下外边距

在视图改变的时候，有的情况下会诡异的导致content的上下边距丢失，就被header和footer遮挡了

解决方法是resize一下content

ios8

ios8及其以下的ios系统，样式会偏的很厉害。主要是flex的不兼容等问题，要注意兼容写法（-webkit）

ios8的启动页bug，在config.xml中不能用通配的splash（新版的ionic有一个适配的配置，只要一张启动页图，就会自动适配裁剪，这个在ios8上不行）

打包相关

1
@cross-env APP_ENV=ci ionic cordova build ios --prod --device;

比如上面的ios的打包，—prod命令就会将包压缩，是打成生产的包，会减去很多dev下的东西，开机启动会比较快（比如log调试等都会省略），但是打包的速度会降低。

—device是打成ipa的包，便于安装

tab

1
2
3
4
5
<ion-tabs #fileTabs selectedIndex="0">
    <ion-tab [root]="FileOwnListPage" tabTitle="我的文件" tabIcon="myFile"></ion-tab>
    <ion-tab [root]="FileMySharePage" tabTitle="我的共享" tabIcon="myShare"></ion-tab>
    <ion-tab [root]="FileShareListPage" tabTitle="共享区" tabIcon="shareArea"></ion-tab>
</ion-tabs>

使用ion-tabs的时候，发现会有第一个tab不显示的问题，解决方法是:

1
2
3
4
5
6
7
.tabs {
    .tabbar {
      a:first-child {
        display: flex !important;
      }
    }
  }

子page里的tab导航，返回的时候要注意外面父级的显示，采用事件通知的方式来修改nav。这边有点问题，在第一次进入app的时候tabRef还没获取到，所以使用了这样一个hack的方式来解决这个问题。

1
2
3
4
5
6
7
8
9
10
events.subscribe('dispatchBackMore', () => {
            try {
                this.selectTab = 'MorePage';
                this.tabRef.select(5);
            }
            catch (ex) {
                this.selectTab = 'MorePage';
                App.getActiveNav().parent.select(5);
            }
        });

安卓打包各种错误

  1. Jack is required to support java 8 language features. Either enable Jack or remove sourceCompatibility JavaVersion.VERSION_1_8.
    当前Android版本6.3.0 导致打出来的gradle版本太低 需要gradle3以上
    解决方式:升一下安卓版本到6.4.0

  2. gradle版本不统一报错

    使用：cordova-android-support-gradle-release