痛點在于開發環境吧，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的生命周期如下：

• 阻止點擊事件傳遞方法
  (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這一步。