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初學者的小項目