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标签的方式，展示设备本地图片的话无法展示。我们在项目中的解决方案是写了一个调用原生设备展示图片的插件，，，真是大写的尴尬~~~