ionic V3.10 开发踩坑集锦(二)

GitHub地址：https://github.com/JerryMissTom ，欢迎关注

这是ionic 开发踩坑的第二篇文章，第一篇参见：ionic V3.10 开发踩坑集锦（一） ，开发环境与上文保持一致。

内容以下：

1. 经过 ionic cordova run android 安装在手机上的APP，执行 window.open(url) 这段代码时不会跳转到本机自带的浏览器执行。可是经过 ionic cordova build android -prod 打包出来的APP执行此段代码，会跳转至本机自带的浏览器

2. 在css文件和html文件引入assets中图片的路径设置以下：

xx.scss
 .header {
        background: url("../assets/images/xxx.png") 
    }
复制代码

xxx.html
 <img  src="assets/images/xxx.png">
复制代码

这是由于最后打包出来的assets文件夹和index.html在一级，与包含main.css的build在一级

3. TimePicker 弹出来的日期选择器时间显示有问题，在app.scss中添加以下代码便可：

.picker-ios .picker-opt{
  height: 45px; //大小本身调试
}
复制代码

4. ionic page 的生命周期中经常使用的两个是 ionViewDidLoad 和 ionViewDidEnter ，他们之间有区别的。ionViewDidLoad 只在页面建立的时候被触发一次，当页面建立后经过 NavController.push() 跳转至其余页面，而后再经过 NavController.pop() 跳转回来，此方法不会被触发，建议只在 此方法中执行页面初始化的操做。而 ionViewDidEnter 每次都会在页面显示的时候被触发，无论这个界面是否被cache。当业务要求每次进入某页面都执行一样操做时，须要在 ionViewDidEnter 写逻辑操做。

5. 实现页面头部保持不动的方法，适配 Android 和 iOS。 页面示意图以下，main中的list向上滑动时，header的位置保持不动，固定在头部。：

html代码以下：

<ion-header>
    <ion-navbar>
        <ion-title>
            title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content>

    <div [class.ios-list-header]="version==='ios'" [class.android-list-header]="version==='android'">
    header
    </div>
        
    <div [class.android-list-content-top]="version==='android'">
     main/list  
    </div>

</ion-content>
复制代码

ts文件获取平台的代码以下：

import { Platform } from 'ionic-angular';

private version：string；
constructor(private platform: Platform) {
    if (this.platform.is('android')) {
            this.version = 'android';
        }
    else if (this.platform.is('ios')) {
            this.version= 'ios';
        }
}
复制代码

scss文件以下：

.ios-list-header {
  width: 100%;
  height: 80px;
  position: sticky;
  z-index: 1;
  top: 0;
}

.android-list-header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 1;
  top: 54px;
}

.android-list-content-top {
  margin-top: 80px !important;
}
复制代码

ion-header 标签不管在哪一个平台都是固定在最上面的。可是在 ion-content中固定头部内容， iOS 直接使用 sticky就能够了，因为 Chrome 不支持这个属性，因此咱们使用 fixed 来代替，同时还要设置 main 至头部的距离，以避免被 header 遮挡住。

推荐

最后推荐下我写的ionic的小项目，具体能够参见 适合ionic初学者的小项目