ionic2常見問題及解決方案

ionic2常見問題及解決方案

一、app啓動白屏的問題

​ app啓動後大概有幾秒的白屏，纔會顯示首頁。解決方法有前輩放了，這邊貼個鏈接解決方法。

二、gradle下載失敗導致執行打包命令時報錯

​ ionic build android 是通過gradle編譯，而且會在線下載gradle，牆內基本是下不了的，這就需要手動下載項目需要的gradle版本。 查看android platform下的build.gradle文件，看當前版本需要的gradle version。 下載成功後，放在myApp\platforms\android\gradle文件夾下， 命令行輸入set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-2.14.1-all.zip(參考自簡書作者：charles0427鏈接：http://www.jianshu.com/p/408254d76e74)

三、ionic2中擴展自定義圖標

​ ionic2開發app的實際使用中，ionic2官方的圖標是不夠用的，流行常用的圖標都可以在阿里巴巴矢量圖標中找到。需要擴展圖標<ion-icon name="my-icon"></ion-icon>來使用，這裏有詳細的解決辦法，親身實踐後可以完美的使用(詳情請點擊)。

四、ionic2自定義處理返回按鈕

​ APP開發過程中，有時需要自定義處理返回按鈕的行爲。一種方法是使用hideBackButton="true"隱藏app頁面上自帶返回按鈕，然後自寫返回按鈕控制點擊事件。

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-buttons left (click)="selfGoBack()" >
      <button ion-button icon-only class="selfBack">
        <ion-icon name="selfBack"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

​ 但是，上述方法並不能控制安卓手機實體返回按鍵。這時，就需要下列方法來處理頁面的返回了：

//註冊返回按鍵事件
      this.platform.registerBackButtonAction((): any => {
        let activeVC = this.nav.getActive();
        let page = activeVC.instance;

        if (activeVC.component.name == 'HomeComponent') {
          this.platform.exitApp();
        }
      }, 101);

​ 上述方法中，需要在app.component.ts文件中註冊返回按鍵事件。在我的實際使用中，我整個項目中有一個HomeComponent組件，也是我的首頁。我需要在當前激活頁面時，點擊返回就退出app。判斷條件我是根據取到activeVc上面的組件名，使用使用中根據自己的需要可以使用更多的參數或值。參數中的值101定義的是返回鍵行爲的優先級，詳情可點擊此處瞭解。

五、開發安卓版app時，搜索成功頁面未刷新

​ 實際應用場景是我做了一個可實時搜索的列表頁面，用於選擇模態框。HTML代碼如下：

<ion-header>
  <ion-navbar>
    <ion-title>選擇{{title}}</ion-title>
    <ion-buttons left (click)="closeModal()">
      <button ion-button icon-only clear>
        <ion-icon name="md-arrow-back"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- <ion-refresher *ngIf="hasMore" (ionRefresh)="getData($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher> -->

  <ion-list>
    <ion-item-group>
      <ion-item-divider color="light">
        <ion-searchbar
          placeholder="搜索名稱"
          [(ngModel)]="keyword"
          (ionInput)="onInput($event)">
        </ion-searchbar>
      </ion-item-divider>
      <ion-item>
        <ion-row>
          <ion-col width-33>編號</ion-col>
          <ion-col width-67>{{title}}名稱</ion-col>
        </ion-row>
      </ion-item>
      <ion-item *ngFor="let item of ableSelected" (click)="chooseItem(item)">
        <ion-row>
          <ion-col width-33>{{item.id}}</ion-col>
          <ion-col width-67>{{item.name}}</ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="getData($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles"
      loadingText="加載中 ..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

​ 該頁面用於選擇數據，當前頁面有實時搜索數據和上拉刷新加載更多數據的功能，都是通過getData調用請求異步獲取。問題點在於執行ionic serve在瀏覽器測試的時候，搜索功能很完美，但是在真機上測試時，輸入文字進行名稱篩選數據，請求成功展示數據更新，頁面展示的列表緩存住，並未刷新頁面。困擾了很久，最後找到方法。

import {ChangeDetectorRef} from '@angular/core';

export class SelectModalComponent(){
  constructor(public changeDetectorRef: ChangeDetectorRef) {
    
  }
  
  getData(){
    // 在數據更新後調用，更新頁面防止頁面緩存
    this.changeDetectorRef.detectChanges();
  }
}

​ 在異步請求獲取數據成功後，調用ChangeDetectorRef的detectChanges方法，可以解決頁面緩存的問題。

六、iOS端開發使用wkwebview替換uiwebview優化app性能

​ 適用ionic2開發ios端app的實際過程中，由於uiwebview瀏覽器技術極大的佔用內存，會存在很多導致應用崩潰的情況。例如拍照保存在本地，寫了一個查看已拍照圖片的頁面，圖片一多進去頁面就導致應用崩潰閃退。還有就是數據量大的列表，滑動瀏覽非常不流暢卡頓。通過使用wkwebview插件替換uiwebview的使用，親測在app使用中性能提高不是一點半點，崩潰率也大大降低。詳細請點擊此處查看

​ 但是，上述方案有一個遺留問題，就是wkwebview技術實際是使用谷歌webkit的內核，在ios上會有取不到本地沙盒文件的bug。如果在app中使用img標籤的方式，展示設備本地圖片的話無法展示。我們在項目中的解決方案是寫了一個調用原生設備展示圖片的插件，，，真是大寫的尷尬~~~