基于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。

二、     環境搭建

安裝npm、node.js

打開終端，可分別輸入以下內容查看npm和node的版本號：

如果npm或者node并非最新版本或者沒有安裝,可以到nodejs官網下載最新版本，下載好后雙擊下載的pkg包默認安裝即可。

安裝ionic和cordova

采用淘寶npm鏡像避免國內網絡安裝錯誤，終端輸入：

安裝成功后，查看安裝的包內容是否全部都已安裝，終端輸入：

根據信息提示，可對未成功安裝的包再次安裝。

三、     項目生成

進入桌面（或其他文件夾路徑），終端輸入：

生成demo004文件項目，終端輸入：

ps：可以在項目名稱后加上不同參數（blank、tabs、sidemenu）， 其中blank等參數是幾種app樣式，可根據需要選擇不同參數，不寫的話默認是tabs樣式；--v2是指按照ionic2的版本來創建項目，如果不寫--v2則會創建ionic1項目。

創建成功后，項目文件夾如圖。

一般使用瀏覽器作為調試工具，cd到項目文件夾，終端輸入：

執行完畢后Ionic會自動幫我們打開我們的默認瀏覽器并跳轉到我們的應用頁面，瀏覽器打開頁面時Ionic已經給我們開啟了livereload模式，開啟之后我們編輯www下的文件后保存時Ionic會通過websocket通知瀏覽器刷新頁面，我們就不用每次修改完畢手動刷新頁面了。

Ionic支持兩個平臺iOS、Android，默認的Ionic項目并沒有添加這兩個平臺，我們需要手動添加，終端輸入：

可以查看你已經添加的平臺列表，終端輸入：

安裝ios模擬器，終端輸入：

安裝好后，cd到項目目錄后，開始編譯項目，終端輸入：

運行項目可以使用Xcode，也可以使用終端，終端輸入：

稍等片刻，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 里是我們應用的主模版：

<ion-menu[content]="content">

  <ion-header>

    <ion-toolbar>

     <ion-title>Menu</ion-title>

    </ion-toolbar>

  </ion-header>

  <ion-content>

    <ion-list>

      <buttonmenuClose ion-item*ngFor="let p of pages"(click)="openPage(p)">

       {{p.title}}

     </button>

    </ion-list>

  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back becauseit's poor UX to combine STGB with sidemenus -->

<ion-nav [root]="rootPage"#content swipeBackEnabled="false"></ion-nav>

在這個模板中，我們設置了一個 ion-menu 作為側面菜單，然后一個 ion-nav 組件作為主要內容區域。 ion-menu 菜單的 [content] 屬性綁定到了我們 ion-nav 的本地變量 content 上。所以我們知道哪里會發生動作變化。

src/pages是包含所有頁面的文件夾，也是用來實現業務邏輯的區域，推薦使用html、scss、ts文件各司其職的方式（如下圖），將會使開發思路更清晰。

五、     示例

自己做一個簡單demo，測試一下調用本地相冊功能，以及ts代碼和ios原生代碼的交互方式。

1.      在src/pages/home.html中加入如下代碼：

  <button (click)="openCamera()"ion-button color="secondary">選取照片</button>

  <button (click)="addObserver()"ion-button color="secondary">監聽原生頁面通知</button>

  <button (click)="toApplePage()"ion-button color="secondary">跳轉到原生頁面</button>

2.      安裝插件，終端輸入：

3.      在src/pages/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方法，加入如下代碼，至此，打開相冊功能完成：

      var options = {

      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代碼發來的消息：

[[NSNotificationCenter defaultCenter] addObserverForName:@"jsToNative" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {

NSLog(@"handledjs to native [%@]", note.userInfo[@"item"]);

UIViewController*vc = [[RedViewController alloc] init];

[self PResentViewController: [[UINavigationController alloc]initWithRootViewController:vc] animated:true completion:nil];

}];

8.      在子頁面中添加一個返回按鈕，實現其點擊方法：

-(void)btnClick {

NSDictionary*userInfo = @{@"key": @"value"};

[self dismissViewControllerAnimated: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的使用方法和插件。