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.lxweimin.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標簽的方式,展示設備本地圖片的話無法展示。我們在項目中的解決方案是寫了一個調用原生設備展示圖片的插件,,,真是大寫的尷尬~~~

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,593評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,259評論 4 61
  • 文芾 廣場上 我盯著一個陌生人 看了大半個上午。 她橙色的大褂子 手 和臉頰 都十分秋天—— 粗糙 冷 而且艱苦。...
    青年文芾閱讀 263評論 0 2
  • 說這個話題,是因為昨天發燒沒有完成一天1000字,今天還是不舒服,卻還是拿起PAD開始敲,之前每天1000會覺得有...
    微乴問閱讀 302評論 0 0
  • 剛剛接觸react-native不到一月,從一開始照著React Native上文檔的例子熟悉每一個控件的使用,到...
    alexis_zyp閱讀 3,129評論 4 7