為什么使用 Cordova
Cordova 提供了與 APP 原生平臺交互的功能油宜,使基于網(wǎng)頁的APP突破了不能使用設(shè)備平臺完整功能的限制点待。
如何尋找自己想要的插件
Cordova 社區(qū)
Cordova 社區(qū)提供上千個插件大渤,支持各種設(shè)備平臺的各類硬件特性璧尸。
Github
作為最大的程序員同性交友網(wǎng)站,在這里也可以搜索到的很多插件肆资。
Ionic Native
Ionic 官方提供的插件地址懊烤,它與原生 Cordova 插件有所不同梯醒,后面會講到。
選擇時需要注意什么:
選擇更新時間更近的插件腌紧。時間較為久遠(yuǎn)的插件茸习,可能會存在方法過時導(dǎo)致不可用。
選擇 Star 較多的插件壁肋。越多人關(guān)注使用的插件号胚,使用起來問題相對較少一些。
如何使用 Cordova 插件
由于 Cordova 插件無法使用 Angular 的依賴注入浸遗,所以只能通過訪問全局變量和方法來調(diào)用猫胁,十分不方便代碼管理。所以 Ionic 開發(fā)團(tuán)隊在 Cordova API 基礎(chǔ)上封裝了一系列開源 Cordova 插件跛锌,命名為 Ionic Native 的插件集弃秆。在我們新建的 Ionic 項目中,打開 package.json 中就可以看到幾個自帶的 Ionic Native 插件髓帽。
接下來我們就分別舉例子講解一下如何使用 Cordova 原生插件
和 Ionic Native
菠赚。
Cordova 原生插件
這里舉一個獲取手機(jī)相冊的例子,輸入以下代碼安裝 imagepicker 插件
$ ionic cordova plugin add add cordova-plugin-telerik-imagepicker
之后在需要用到的頁面郑藏,使用以下方法即可調(diào)用手機(jī)相冊
showAlbum() {
this.platform.ready().then(() => {
(<any>window).imagePicker.getPictures(photo => {
console.log(photo[0]);
});
});
簡單分析一下代碼:
1.首先我們使用了 this.platform.ready 方法衡查,這是因為我們需要保證設(shè)備已經(jīng)就緒,否則插件可能會調(diào)用失敗必盖。
2.從 (< any>window) 可以看出我們必須使用全局變量來調(diào)用拌牲,選擇圖片后,會返回一個數(shù)組筑悴。
3.如果只選一張圖片的話们拙,直接取[0]即可。取出的數(shù)值就是手機(jī)的圖片路徑阁吝,可以直接設(shè)置 [src] 進(jìn)行顯示。
Ionic Native
Ionic Native 與原生 Cordova 插件不同械拍,它的安裝需要進(jìn)行兩步突勇。以 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 的使用方法埂奈,官方文檔寫的已經(jīng)很簡單了,我簡單舉一個例子定躏。
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);
}
插件的限制
尋找好用的插件十分有助于開發(fā)的工作账磺,但并不是所有插件都可以在所有平臺使用,也不是所有方法都可以使用痊远。在 Ionic Native 尋找插件時垮抗,首先要看支持的平臺。
之后也不是所有方法都可以使用碧聪,可能作者也沒在介紹的地方標(biāo)出來冒版。比如 Keyboard 這個插件,其中有一個方法 show()
逞姿,我在查看源碼時發(fā)現(xiàn)在 iOS 中是不可用的辞嗡。
所以在日常開發(fā)時,使用插件如果遇到問題了滞造,不妨尋找 Android续室、iOS 開發(fā)協(xié)助查看源碼,調(diào)查一下為什么失敗谒养。