自定義 Cordova插件詳解

1、Cordova的基礎點

在混合式應用中，咱們經過現有的Cordova插件，能夠輕鬆的在 H5 上調用手機native的功能。現有的Cordova插件能知足平時大部分的開發需求，然而，有時候找不到合適的插件、或對找到的插件有不滿意的地方，那就要動手去作或改寫一個插件，這時候就要了解一些Cordova插件的相關知識。

那Cordova插件的基礎要點是什麼呢？其實就是把原生代碼調用方法映射爲js的統一接口，供H5使用而已.

Cordova 自定義插件的官方文檔

2、觀察現有應用結構

打開任意一個基於Cordova技術的hybird app的開發目錄，添加過平臺（android、ios等）和安裝過插件的話，你會發現結構大體是這樣子的：

├── platforms
| ├── android | ├── ios | └── ... ├── plugins | ├── org.apache.cordova.device | └── ... ├── config.xml └── www 

這裏的 platforms 是咱們應用支持的平臺目錄，plugins是咱們安裝的插件目錄，config.xml 是應用的配置信息（應用名稱、描述等），www 是咱們的 web 工程目錄。

也就是說，若是咱們建立一個新的插件並安裝，也會添加到plugins目錄中，同時修改其它文件信息。那下一步就來開始進行驗證。

3、使用plugman開發Cordova插件

一個獨立插件的目錄基本結構是這樣的：

MyToast
├── src
| ├── android | | └── MyToast.java | ├── ios | └── ... ├── www | └── MyToast.js └── plugin.xml 

src存放的是各平臺的原生代碼，plugin.xml爲插件描述及配置文件，www是web工程目錄（其實主要就是MyToast.js這個js中間件），咱們能夠手動建立這幾個目錄及文件，然而這並非一個好的方式，由於效率不高，推薦的方式是使用plumam。
一、首先安裝plumam命令行工具

npm install -g plugman

二、安裝完以後，建立plugin

使用plumam建立插件的命令是：

plugman create --name pluginName --plugin_id pluginID --plugin_version version [--path path] [--variable NAME=VALUE]

參數說明:

pluginName：插件名稱，如MyToast；
pluginID：插件id, 如:org.demo.mytoast；
version：版本號, 如:0.0.1；
path：插件存放的絕對或相對路徑；
variable NAME=VALUE：擴展參數，如說明或做者，如woodstream

因而命令行中敲入如下代碼：
plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1
這樣將會在當前目錄建立一個MyToast插件，進入插件目錄，打開plugin.xml查看，注意如下內容及說明：

plugin
- id：插件惟一標識
- version：版本號
- js-module src：js中間件相對文件地址（www目錄下的那個js） name：模塊名稱 clobbers/merges target：H5經過它調用js中間件方法（ts調用方法的前綴） - platform name：對應平臺android | ios source-file src：類名 tartget-dir：插件文件複製到到原生項目位置 feature name：js中間件經過它調用原生方法（包名） uses-permission：相關原生權限 

也就是說，咱們能夠寫這樣一個插件，不寫一句原生代碼，只是爲了設置權限和拷貝文件。

等你消化完plugin.xml文件後，敲入命令進入插件目錄：
cd MyToast
添加支持平臺
plugman platform add --platform_name android
plugman platform add --platform_name ios
這樣，就會分別建立src/android/MyToast.java和src/ios/MyToast.m兩個文件，這裏只演示android的代碼，因此打開MyToast.java觀察：

public class MyToast extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("coolMethod")) { String message = args.getString(0); this.coolMethod(message, callbackContext); return true; } return false; } private void coolMethod(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } } } 

其中execute是必須的方法，是和www目錄中的MyToast.js關聯打交道用的，至於MyToast.js和MyToast.java怎麼關聯，是由Cordova解釋plugin.xml處理的，內部細節不須要知道，只需按方法格式編寫便可。CallbackContext爲回調上下文，coolMethod爲可選的默認生成的示例方法，通常裏面就寫原生的代碼，咱們把它改爲咱們想要的：showToast，而後補充基本的一些原生代碼，最後文件變成這樣：

public class MyToast extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("showToast")) { String message = args.getString(0); this.showToast(message, callbackContext); return true; } return false; } private void showToast(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { Activity activity = this.cordova.getActivity(); Toast.makeText(activity, message, Toast.LENGTH_SHORT).show(); callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } } } 

而後再打開www/MyToast.js修改以下：

//showToast爲安裝後js調用的方法名，參數能夠爲任意多個 exports.showToast = function(msg, success, error) { //"showToast"爲給MyToast.java判斷的action名 exec(success, error, "MyToast", "showToast", [msg]); }; 

三、建立package.json文件
原本執行完上述步驟，一個插件就完成了的，但後來的Cordova版本要求添加一個package.json來管理插件，而plumam沒有給咱們建立這樣一個文件，因而咱們手動建立，藉助npm init命令建立package.json。裏面的參數從plugin.xml拿過來即是：

{
 "name": "MyToast", "version": "0.0.1", "description": "demo", "cordova": { "id": "com.demo.mytoast", "platforms": [ "android" ] }, "keywords": [], "author": "demo", "license": "MIT" } 

這樣一個插件就開發完成了。

4、安裝已開發完成的插件

若是沒有現成的項目，能夠建立一個新的Cordova項目來測試：
cordova create hello com.example.hello HelloWorld
注：

hello:項目文件夾名
com.example.hello:項目包名
HelloWorld:項目名

而後進入到該Cordova項目目錄，像日常添加插件同樣，運行以下命令：（add 後面爲插件所在本地或網絡路徑）：
cordova plugin add /Users/cordova/MyToast
若是已有項目，且是ionic項目，則命令前追加上ionic：
ionic cordova plugin add /Users/cordova/MyToast

在ionic2或以上使用時，打開任意一個ts文件，在頭部聲明以下：
declare let cordova: any;
而後調用便可（若是是普通js調用，則能夠省掉上面那步）：
cordova.plugins.MyToast.showToast("hello"); //後兩個success, error參數省略不寫

5、其餘命令

刪除插件：
ionic cordova plugin remove XXXXX(你的plugin_id)
查看已安裝插件
ionic cordova plugin list