ionic 自定義native插件

ionic-native git地址: https://github.com/ionic-team/ionic-native
具體說明在 DEVELOPER.md 文件中
步驟如下:
1. 安裝 glup

npm install gulp

2.創建插件文件夾

gulp plugin:create -n PluginName

輸入該命令,並且替換掉你所需要的插件名稱,確保你的插件名首字母大寫,或者使用駝峯命名法
通過添加 -m 命令來獲取一個最小化的插件模板
如

gulp plugin:create -m -n PluginName

執行完該命令後,在目錄 src/@ionic-native/plugins/plugin-name/ 下會創建一個index.ts的文件,該文件是所有的插件的定義文件
可以參考下Geolocation 插件

插件類

第一步,創建插件類,創建一個類代表我們的插件

@Injectable()
class Geolocation {

}

類元數據

第二步,創建類元數據,我們需要指定一些關於插件的一些信息,如@Plugin裝飾器來添加一些插件的信息

@Plugin({
  plugin: 'cordova-plugin-geolocation',
  pluginRef: 'navigator.geolocation'
})
@Injectable()
export class Geolocation {

}

在這,plugin 就是我們再npm上添加插件時用到的插件名:比如cordova plugin add cordova-plugin-geolocation
pluginRef 表示 cordova 插件暴露出來的一些調用方法,例如Geolocation插件,通常調用時調用的方法,如:
window.navigator.geolocation.getCurrentPosition({}, success, error),所以pluginRef在這裏就是:navigator.geolocation

類方法

第三步,創建類方法,如getCurrentPosition方法

@Cordova()
getCurrentPosition(options?: GeolocationOptions): Promise<Geoposition> { return }

在這裏,return 關鍵字僅僅只是爲了保證TypeScript的類型檢查能夠通過,因爲我們已經制定了getCurrentPosition的返回類型是返回一個Promise

通常情況下,@Cordova 裝飾器包含了插件的回調函數,其中success回調指向Promise的resolve方法,而fail回調指向reject方法,並且它保證了能夠獲取到Cordova以及其下的插件都是可獲取的,並且如果她們不存在,能能夠打印出錯誤信息.

getCurrentPosition 是一個靜態函數,因爲插件類僅僅試試一個調用Cordova插件方法的一個類,它並不是一個實例並且沒有狀態.

接下來我們來看下watchPosition 方法

@Cordova({
    callbackOrder: 'reverse',
    observable: true,
    clearFunction: 'clearWatch'
  })
  watchPosition(options?: GeolocationOptions): Observable<Geoposition> { return }

@Cordova裝飾器有如下幾個屬性

observable 表明這個方法可以多次調用它的回調方法,所以在這裏使用Observable 方法而不使用Promise
clearFunction 和 observable 這個選項一起使用,並且 指明當 Observable 進行處理時調用的方法

測試插件類

插件類開發完成後,即可進行測試

在這個ionic-native插件工程下,執行npm run build,當然最好是添加sudo,如果只編譯指定的插件,則輸入sudo npm run build plugin-name即可,命令執行成功後,就會創建一個dist.這個dist目錄下包含一個二級@ionic-native目錄,這個目錄中包含了編譯後的內容.把這個包(如果編譯多個包,則將多個包)拷貝到你的app工程下的node_modules 下的@ionic-native目錄下面,並且在工程的package.json中,dependencies節點下增加插件相關信息