Ionic2 开发总结

痛点在于开发环境吧，base app的下载和gradle编译都需要较好的外网环境

环境准备

• npm install -g cordova ionic
• ionic start myApp --v2 --skip-npm，这一步是从git上拉取项目模板，内网环境下是无法下下来的， --v2是下载ionic2版本， --skip-npm是因为下完模板后ionic会自动npm install，跳过这部然后自己手动用cnpm下载
• cd myApp
• ionic serve -lc，ionic提供的浏览器调试，一开始一直不成功。多次新建项目下载重试后，成功...还是网络不稳定导致的吧，-lc是ionic lab，该页面可以同时调试在Android、IOS和WP设备上的样式；
• ionic platform add android，添加android平台下的项目结构，在platforms文件夹下。
• ionic build android, ionic run android -lc，编译和在真机上运行，-lc类似serve下的-lc，可以实时在真机上调试;

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
• maven下载失败问题。替换为阿里云镜像：
  打开项目\platforms\android\build.gradle修改：

repositories {
//mavenCentral() // 注释掉
jcenter()
flatDir {
dirs 'libs'
}
maven {
url "http://maven.aliyun.com/nexus/content/groups/public"
}
}

Ionic2 使用

• Ionic2添加页面模板
  ionic g page xxx

• 页面跳转
  引入 import {NavController} from 'ionic-angular'
  在类中通过push和pop方法跳转或返回上个页面:
  this.navCtrl.push(demoPage);
this.navCtrl.pop()

• 页面间的参数传递
  引入import {NavParams} from 'ionic-angular'
  跳转时传入参数： this.navCtrl.push(demoPage, {item: 'value'})
  跳转后的页面通过get方法获取值: let temp = this.navParams.get('item')

• select/radioGroup的默认选择问题
  官方文档中给出的方法是在html中使用属性selected="true"/ checked="true";
  目前来看该方法不起作用，查看issue，发现需通过ngModel绑定变量，设定变量的初始值。

• 搜索框

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

@Component({
  templateUrl: 'search/template.html',
})
class SearchPage {

  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

• ionic2页面切换数据不刷新
  在tabs模板下，切换页面，初始化的方法只会执行一次，但一些动态从服务器获取的数据是希望每次进入页面时都重新获取刷新的，这就需要对ionic的页面生命周期有一定了解，可以将数据请求刷新的方法放在ionViewWillEnter中。ionic2的生命周期如下：

事件名称	事件说明
ionViewDidLoad	页面加载完毕触发。该事件发生在页面被创建成 DOM 的时候，且仅仅执行一次。如果页面被缓存（Ionic默认是缓存的）就不会再次触发该事件。该事件中可以放置初始化页面的一些事件。
ionViewWillEnter	即将进入一个页面变成当前激活页面的时候执行的事件。
ionViewDidEnter	进入了一个页面且变成了当前的激活页面，该事件不管是第一次进入还是缓存后进入都将执行。
ionViewWillLeave	将要离开了该页面之后变成了不是当前激活页面的时候执行的事件。
ionViewDidLeave	在页面完成了离开该页面并变成了不是当前激活页面的时候执行的事件。
ionViewWillUnload	在页面销毁和页面中有元素移除之前执行的事件。
ionViewDidUnload	在页面销毁和页面中有元素移除之后执行的事件

• 阻止点击事件传递方法
  (click)="do(); $event.stopPropagation()"

• 修改应用图标和启动画面

  1. 找到合适的图标文件，png格式
  2. 替换项目resources文件夹下的icon.png
  3. 项目路径下运行ionic resources命令，该命令为所有platform生成对应分辨率的图片
  4. 若想针对不同platform使用不同图标，图片复制到resources下对应platform文件夹下，再运行ionic resources

ionic resources对应的服务似乎不太稳定，也可以通过在线网站图标工厂

• 修改应用名称
  修改根目录下config.xml文件：
  <widget id="com.ionframework.demo">，id对应应用的包名
  <name></name>对应应用名称，直接修改Android的values文件没有效果

• 解决Splash后出现短暂白屏问题
  修改config.xml：
  添加 <preference name="AutoHideSplashScreen" value="false"/>
  注释掉 <preference name="SplashScreenDelay" value="3000"/>

• 关于crosswalk
  crosswalk是针对安卓设备的一个webview插件，性能较好，目前ionic2的demo里不会自带crosswalk。官方的说法是它们发现只有在低于4.x.x的安卓系统上，ionic应用运行性能不稳定，而4.x.x的设备在Google的统计里，全球只有不到11%。

Angular2双向绑定

ngModule

<ion-input type="text", [(ngModule)]="inputTN"></ion-input>

ts文件中
private inputTN;
let tn = this.inputTN;

需要先定义变量名。

Angular2依赖注入

在自定义了一个http服务类后，页面中引用方法报错，原因是没有给服务类添加注解@Injectable()，@Injectable()标志着一个类可以被一个注入器实例化;通常来讲,在试图实例化一个没有被标识为@Injectable()的类时候,注入器将会报告错误

Ionic2引入第三方js库

应用中想实现一个页面，进入时显示根据设备uuid生成的二维码，虽然barcodescanner可以实现生成二维码，但会打开一个Activity，这样体验不符合需求。于是想到引用第三方的js库，如qrcode.js等。
然而Ionic2使用typescript，ts中是无法直接调用js的。这里网上给出了两种方案。

1. 引入js文件，通过declarations.d.ts文件声明引用变量。
2. 通过types库下载qrcode。

方案2并没有成功，方案1的具体过程以qrcode为例，如下：

1. 从github下在需要的js文件，jquery.min.js和qrcode.js
2. 文件复制到项目'/src/assets/js'目录下，js目录是自己新建的
3. 在index.html中引入：
   <script src="assets/js/jquery.min.js"></script> <script src="assets/js/qrcode.min.js"></script>
4. 在src目录下的declarations.d.ts中申明qrcode的方法变量：
   declare var QRCode;
5. 完成以上步骤后，就可以在ts中调用qrcode的方法，例如在页面上显示一个文本转换的二维码：
   <div id="qrImage" class="qrcode-image"></div>
let qrImage = document.getElementById('qrImage'); new QRCode(qrImage, 'test');

获取设备分辨率

window.screen.width * window.devicePixelRatio; window.screen.height * window.devicePixelRatio;

隐藏滚动条

发现在部分设备上会显示滚动条，解决方法：修改app.sccs，添加如下代码：

::-webkit-scrollbar {  
  display: none !important;  
}  

编译

ionic build android --prod --release， --prod是压缩模式，编译出来的app启动速度变快，减少splash时间
--release是签名打包，具体可见Ionic2 安卓签名打包;
Ios有一特殊的地方，正常编译出来的都是.app文件，需要导入ITouch中生成ipa。后来发现，使用ionic run ios --prod安装到真机时，/ios/build/下会多出device目录，该目录下有现成ipa，省去iTouch这一步。