基于ionic2的跨平臺項目（iOS）
一、技術背景
為了開發html5，除了最新使用React Native等之外，目前首選穩定的ionic+Angularjs來開發iOS和Android。
Ionic是一款可以使用html5構建混合移動應用的用戶界面框架，它自稱是“本地與html5的結合”。該框架提供了很多基本的移動用戶界面范例，例如像列表（lists）、標簽頁欄（tabbars）和觸發開關（toggleswitches）這樣的簡單條目。它還提供了更加復雜的可視化布局示例，例如在下面顯示內容的滑出式菜單。
Cordova是一款開放源代碼的App開發框架，旨在讓開發者使用HTML、Javascript、CSS等WebAPIs開發跨平臺的移動平臺應用程序，其原名稱之為PhoneGap，Adobe收購Nitobi公司后，PhoneGap商標保留，代碼貢獻給了Apache基金會，而Apache將其命名為ApacheCallback，其后發布新版本時，定名為ApacheCordova。
Cordova是一個行動設備的API接口集，利用JavaScript存取這些接口可以調用諸如攝影機、羅盤等硬件系統資源。配合上一些基于HTML5、CSS3技術的UI框架，如jQueryMobile、DojoMobile或SenchaTouch，開發者得以快速地開發跨平臺App而不需要編寫任何的原生代碼，因為Cordova本身仍是一個原生程式，為App打包時依然需要用到這些系統平臺的SDK。
二、環境搭建
l安裝npm、node.js
打開終端，可分別輸入以下內容查看npm和node的版本號：
npm –v
node–v
如果npm或者node并非最新版本或者沒有安裝,可以到nodejs官網下載最新版本，下載好后雙擊下載的pkg包默認安裝即可。
l安裝ionic和cordova
采用淘寶npm鏡像避免國內網絡安裝錯誤，終端輸入：
sudo
npm set registryhttps://registry.npm.taobao.org
下載后安裝ionic和cordova包，打開終端輸入：
sudonpm install -g cordova ionic
安裝成功后，查看安裝的包內容是否全部都已安裝，終端輸入：
ionic info
根據信息提示，可對未成功安裝的包再次安裝。
三、項目生成
進入桌面（或其他文件夾路徑），終端輸入：
cd ./Desktop
生成demo004文件項目，終端輸入：
ionic start myapp（項目名稱）[blank][tabs][sidemenu]--v2
ps：其中blank等參數是幾種app樣式，可根據需要選擇不同參數，不寫的話默認是tabs樣式，--v2是指按照ionic2的版本來創建項目，如果不寫--v2則會創建ionic1項目。
創建成功后，項目文件夾如圖。
一般使用瀏覽器作為調試工具，cd到項目文件夾，終端輸入：
cd myapp
ionic serve
執行完畢后Ionic會自動幫我們打開我們的默認瀏覽器并跳轉到我們的應用頁面，瀏覽器打開頁面時Ionic已經給我們開啟了livereload模式，開啟之后我們編輯www下的文件后保存時Ionic會通過websocket通知瀏覽器刷新頁面，我們就不用每次修改完畢手動刷新頁面了。
Ionic支持兩個平臺iOS、Android，默認的Ionic項目并沒有添加這兩個平臺，我們需要手動添加，終端輸入：
ionic platform add android
ionic platform add ios
可以查看你已經添加的平臺列表，終端輸入：
ionic platform list
安裝ios模擬器，終端輸入：
npm install -g ios-sim
安裝好后，cd到項目目錄后，開始編譯項目，終端輸入：
ionic build ios
運行項目可以使用Xcode，也可以使用終端，終端輸入：
ionic run ios
稍等片刻，app就生成好了。如下圖：
四、項目結構
在我們創建的文件夾中，可以看到一個典型的Cordova項目結構。
src/index.html是Ionic 2應用的主入口文件，其目的是設置腳本和CSS引導，然后開始運行我們的應用程序。 我們不會在這個文件中花費大量的時間。
src/app/app.component.ts在該文件能找到我們的預編譯代碼。這是Ionic 2應用程序的大部分工作起始的地方。當我們運行ionic serve時，app中的代碼將被編譯成當前瀏覽器能夠執行的JavaScript版本（當前是ES5）。也就是說我們可以使用TypeScript或更高級別的ES6+進行開發，而在編譯時會自動降級為瀏覽器可識別的版本。
在文件中我們能夠看到這樣的結構：
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(
)
}
每個應用程序都有一個根組件，用于控制應用程序的其余部分。在這個組件中，我們設置了模版文件app.html，下面我們來看一下這個文件。
./src/app/app.html
app.html里是我們應用的主模版：
Menu
{{p.title}}
在這個模板中，我們設置了一個ion-menu作為側面菜單，然后一個ion-nav組件作為主要內容區域。ion-menu菜單的[content]屬性綁定到了我們ion-nav的本地變量content上。所以我們知道哪里會發生動作變化。
src/pages是包含所有頁面的文件夾，也是用來實現業務邏輯的區域，推薦使用html、scss、ts文件各司其職的方式（如下圖），將會使開發思路更清晰。
五、示例
自己做一個簡單demo，測試一下調用本地相冊功能，以及ts代碼和ios原生代碼的交互方式。
1.在home.html中加入如下代碼：
選取照片
監聽原生頁面通知
跳轉到原生頁面
2.安裝插件，終端輸入：
cordovaplugin add cordova-plugin-camera
cordovaplugin add cordova-plugin-broadcaster
3.在home.ts中，導入依賴的組件：
import{ Camera } from 'ionic-native';
import{ NavController } from 'ionic-angular';
import{ DetailPage } from '../detail/detail';
import{ Broadcaster } from 'ionic-native'
其中Camera模塊用來實現打開相冊，NavController和DetailPage模塊用來實現界面導航和跳轉，Broadcaster用來實現與原生代碼的交互。
4.實現openCamera方法，加入如下代碼，至此，打開相冊功能完成：
varoptions = {
quality: 50,
destinationType:Camera.DestinationType.FILE_URI,
sourceType:0,//0對應打開相冊
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true
}
Camera.getPicture(options).then((imageData)=> {
letbase64Image =imageData;
alert(base64Image);
});
5.實現addObserver方法，加入如下代碼：
Broadcaster.addEventListener('nativeToJs').forEach(() =>this.navCtrl.push(DetailPage))
6.實現toApplePage方法，加入如下代碼：
Broadcaster.fireNativeEvent('jsToNative',{ item:'test data'}).then(() => console.log('Success'));
7.接下來打開Xcode，去編輯原生代碼的部分；在自動生成的MainViewController的viewDidLoad方法中加入如下代碼，目的是在加載首頁界面后，讓通知中心監聽ts代碼發來的消息：
[[NSNotificationCenterdefaultCenter] addObserverForName:@"jsToNative" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
NSLog(@"handledjs to native [%@]", note.userInfo[@"item"]);
UIViewController*vc = [[RedViewController alloc] init];
[selfpresentViewController: [[UINavigationController alloc]initWithRootViewController:vc] animated:true completion:nil];
}];
8.在子頁面中添加一個返回按鈕，實現其點擊方法：
-(void)btnClick {
NSDictionary*userInfo = @{@"key": @"value"};
[selfdismissViewControllerAnimated:true completion:^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"nativeToJs" object:nil userInfo: userInfo];
}];
}
9.完成全部功能。
六、總結
通過一段時間學習，感覺Ionic作為一個hybrid應用的開發框架總體來說還是很不錯的，因為它的開發效率很高，并且可以跨平臺發布；缺點是目前網上關于ionic尤其是ionic2以及ionic2使用的typescript的學習探討資料比較少，關于實際開發、打包發布等方面恐怕難免有坑。但是，作為未來趨勢，絕對有學習的必要，以下推薦學習內容：建議熟悉一下TypeScript的基本語法和使用；掌握Angular2的基本原理和開發思路；熟悉Ionic 2的所有Components和API（參https://ionicframework.com/docs/）；了解Cordova的使用方法和插件。
