自定義Cordova插件詳解

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

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

Cordova 自定義插件的官方文檔

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

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

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

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

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

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

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

npm install -g plugman

2、安裝完之后，創建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 androidplugman 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();
        android.widget.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]);
  };

3、創建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"
}

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

如果沒有現成的項目，可以創建一個新的cordova項目來測試：cordova create hello com.example.hello HelloWorld然后像平常添加插件一樣，運行如下命令：（add 后面為插件所在本地或網絡路徑）：cordova plugin add /Users/cordova/MyToast如果已有項目且是ionic項目，則命令前追加上ionic：ionic cordova plugin add /Users/cordova/MyToast

在ionic2或以上使用時，打開任意一個ts文件，在頭部聲明如下：declare let cordova: any;然后調用即可：cordova.plugins.MyToast.showToast("hello"); //后兩個success, error參數省略不寫

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