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官方的图标是不够用的，流行常用的图标都可以在阿里巴巴矢量图标中找到。需要扩展图标来使用，这里有详细的解决办法，亲身实践后可以完美的使用(详情请点击)。

四、ionic2自定义处理返回按钮

​ APP开发过程中，有时需要自定义处理返回按钮的行为。一种方法是使用hideBackButton="true"隐藏app页面上自带返回按钮，然后自写返回按钮控制点击事件。

​ 但是，上述方法并不能控制安卓手机实体返回按键。这时，就需要下列方法来处理页面的返回了：

//注册返回按键事件
      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代码如下：

  
    选择{{title}}
    
      
        
      
    
  



  

  
    
      
        
        
      
      
        
          编号
          {{title}}名称
        
      
      
        
          {{item.id}}
          {{item.name}}
        
      
    
  

  
      
  

​ 该页面用于选择数据，当前页面有实时搜索数据和上拉刷新加载更多数据的功能，都是通过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标签的方式，展示设备本地图片的话无法展示。我们在项目中的解决方案是写了一个调用原生设备展示图片的插件，，，真是大写的尴尬~~~