Ionic 如何使用 Cordova 插件

爲何使用 Cordova

Cordova 提供了與 APP 原平生臺交互的功能，使基於網頁的APP突破了不能使用設備平臺完整功能的限制。

如何尋找本身想要的插件

Cordova 社區
Cordova 社區提供上千個插件，支持各類設備平臺的各種硬件特性。

Github
做爲最大的程序員同性交友網站，在這裏也能夠搜索到的不少插件。

Ionic Native
Ionic 官方提供的插件地址，它與原生 Cordova 插件有所不一樣，後面會講到。

選擇時須要注意什麼：

1. 選擇更新時間更近的插件。時間較爲久遠的插件，可能會存在方法過期致使不可用。
2. 選擇 Star 較多的插件。越多人關注使用的插件，使用起來問題相對較少一些。

如何使用 Cordova 插件

因爲 Cordova 插件沒法使用 Angular 的依賴注入，因此只能經過訪問全局變量和方法來調用，十分不方便代碼管理。因此 Ionic 開發團隊在 Cordova API 基礎上封裝了一系列開源 Cordova 插件，命名爲 Ionic Native 的插件集。在咱們新建的 Ionic 項目中，打開 package.json 中就能夠看到幾個自帶的 Ionic Native 插件。

接下來咱們就分別舉例子講解一下如何使用 Cordova 原生插件和 Ionic Native。

Cordova 原生插件

這裏舉一個獲取手機相冊的例子，輸入如下代碼安裝 imagepicker 插件

$ ionic cordova plugin add add cordova-plugin-telerik-imagepicker

以後在須要用到的頁面，使用如下方法便可調用手機相冊

showAlbum() {
this.platform.ready().then(() => {
  (<any>window).imagePicker.getPictures(photo => {
    console.log(photo[0]);
  });
});

簡單分析一下代碼：
1.首先咱們使用了 this.platform.ready 方法，這是由於咱們須要保證設備已經就緒，不然插件可能會調用失敗。
2.從 (< any>window) 能夠看出咱們必須使用全局變量來調用，選擇圖片後，會返回一個數組。
3.若是隻選一張圖片的話，直接取[0]便可。取出的數值就是手機的圖片路徑，能夠直接設置 [src] 進行顯示。

Ionic Native

Ionic Native 與原生 Cordova 插件不一樣，它的安裝須要進行兩步。以 ActionSheet 插件舉例

$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet

第一個步驟和以前安裝插件徹底相同，第二步則是安裝 Ionic 封裝的代碼。因此不須要的時候咱們也要輸入兩條指令才能完全刪除。

$ ionic cordova plugin rm cordova-plugin-actionsheet
$ npm uninstall --save @ionic-native/action-sheet

Ionic Native 的使用方法，官方文檔寫的已經很簡單了，我簡單舉一個例子。

showActionSheet() {
  let buttonLabels = ['你好', '肯定'];
  const options: ActionSheetOptions = {
    title: '你好Ionic',
    buttonLabels: buttonLabels,
    addCancelButtonWithLabel: '取消',
    androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_LIGHT,
    destructiveButtonLast: true
  };
  this.actionSheet.show(options);
}

插件的限制

尋找好用的插件十分有助於開發的工做，但並非全部插件均可以在全部平臺使用，也不是全部方法均可以使用。在 Ionic Native 尋找插件時，首先要看支持的平臺。

以後也不是全部方法均可以使用，可能做者也沒在介紹的地方標出來。好比 Keyboard 這個插件，其中有一個方法 show() ，我在查看源碼時發如今 iOS 中是不可用的。

因此在平常開發時，使用插件若是遇到問題了，不妨尋找 Android、iOS 開發協助查看源碼，調查一下爲何失敗。