在開始這篇文章之前，首先提出幾個問題，帶著這些問題，我們?nèi)ヒ稽c一點解開Cordova插件面紗。

• 什么是cordova插件？
• cordova插件能做什么？
• 為什么需要自定義cordova插件?
• 如何自定義插件？

什么是Cordova插件

??cordova是一個注入代碼包,允許Cordova webview在其中呈現(xiàn)的應(yīng)用程序與運行它的本機平臺進(jìn)行通信，提供基于web的應(yīng)用程序與設(shè)備和平臺功能的訪問，所有主要的Cordova API功能都作為插件實現(xiàn)，通俗點來說，cordova插件是連接web應(yīng)用程序和設(shè)備平臺之間的一個橋梁。

Cordova插件能做什么

??正常情況下，web應(yīng)用程序無法直接獲取手機設(shè)備信息，例如電池狀態(tài)，文件，媒體，對話框等。但是web應(yīng)用程序可以通過cordova插件提供的API,實現(xiàn)對設(shè)備平臺的訪問。

為什么需要自定義Cordova插件

??大部分情況下，你可以在Cordova Plugin Search和GitHub中找到你程序所需要的插件。但是我們所開發(fā)的應(yīng)用程序依托于我們業(yè)務(wù)邏輯，這時就需要我們?nèi)プ远xcordova插件了。

如何自定義插件

??說了這么多，各位小伙伴是不是都想打我了，別著急，Cordova之自定義插件馬上開始。

敲黑板了，小伙伴們注意了

創(chuàng)建項目

??首先我們創(chuàng)建一個HelloWorld項目，這里我們從簡，具體詳細(xì)過程可參考上篇文章Cordova從入門到放棄（一）,創(chuàng)建HelloWorld項目，添加android平臺。

$ cordova create hello com.hello.demo HelloWorld
$ cd hello 
$ cordova platform add android --save

自定義插件

• 首先安裝plugman,cordova需要用它來創(chuàng)建插件,可使用node命令來安裝

$ npm install -g plugman

• plugman安裝成功后就可以創(chuàng)建插件了,這里我們學(xué)習(xí)自定義一個Toast插件，基本學(xué)會之后，大部分插件都是一個套路了。

$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本] 
$ plugman create --name Toast --plugin_id toast_plugin --plugin_version 1.0.0
$ cd Toast

• 進(jìn)入Toast目錄下之后，我們添加插件支持的平臺

$ plugman platform add --platform_name android
$ plugman platform add --platform_name ios

• 運行之后，會分別創(chuàng)建android的Toast.java文件和ios的Toast.m兩個文件，分別對應(yīng)在android和ios文件夾下，這里我們只看android的代碼，所以只添加了android平臺
  這時我們打開plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns:android="http://schemas.android.com/apk/res/android"
    id="toast_plugin"
    version="1.0.0"
    xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>Toast</name>

<!--模塊名稱-->
    <js-module
        name="Toast" 
        src="www/Toast.js"> <!--js中間件相對文件地址（www目錄下的那個js）-->
        <!--H5通過它調(diào)用js中間件方法（js調(diào)用方法的前綴）可自定義-->
        <clobbers target="cordova.plugins.Toast" />
    </js-module>
    <!--添加的Android平臺  -->
    <platform name="android">
        <config-file
            parent="/*"
            target="res/xml/config.xml"> <!--插件文件復(fù)制到到原生項目位置-->
            <!-- JS文件中對應(yīng)字段 -->
            <feature name="MyToast">
                <!-- .java類名全路徑  可自定義路徑，添加會后生成新的包路徑 js中間件通過它調(diào)用原生方法（包名）--> 
                <param    
                    name="android-package"
                    value="org.apache.cordova.toast.Toast" />
            </feature>
        </config-file>
        <config-file
            parent="/*"
            target="AndroidManifest.xml"></config-file>
        <!-- src:java源文件的路徑， target-dir:插件安裝好后，源文件的位置，要和上面的包名對應(yīng) -->
        <source-file
            src="src/android/Toast.java"
            target-dir="src/org/apache/cordova/toast" />
    </platform>
</plugin>

• plugin.xml文件配置好之后，我們再來看看Toast.java文件

public class Toast 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是必須重寫的方法，會有三個構(gòu)造方法，按需重寫自己需要的，execute方法中的action參數(shù)是和Toast.js關(guān)聯(lián)使用的，args是js返回的參數(shù)，callbackContext是對js的回調(diào)，最后我們修改下代碼。

public class Toast 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/Toast.js修改

//showToast為安裝后js調(diào)用的方法名，參數(shù)可以為任意多個
  exports.showToast = function(msg, success, error) {
      // success error 為成功 失敗回調(diào)
     // MyToast 為 plugin.xml 中配置的 feature 的name名
    //"showToast"為給Toast.java判斷的action名
      exec(success, error, "MyToast", "showToast", [msg]);
  };

web界面調(diào)用可通過

<!-- js 調(diào)用-->
cordova.plugins.Toast.showToast('Helloworld',success,error);

• ??基本流程，當(dāng)一個web界面調(diào)用Cordova插件的過程，會通過plugin.xml中的 clobbers 標(biāo)簽
  找到相對應(yīng)的js文件的函數(shù)名，通過exec中第三個參數(shù)去找到plugin.xml下的 feature標(biāo)簽，從而找到定義的java文件，再通過exec中的第四個參數(shù)，去找對應(yīng)java類下action相同的方法，整個插件運行流程基本是這個樣子。
• 正常情況下，到這一步，基本整個插件就已經(jīng)完成了，但是你在項目中添加插件時會提示你創(chuàng)建package.json文件，而plugman沒有給我們創(chuàng)建這個的文件，所有就需要我們自己動手去創(chuàng)建，通過npm init 命令創(chuàng)建package.json ，里面的參數(shù)從plugin.xml拿來使用就好,也可以一路回車，這樣一個插件就完成了。

{
  "name": "toast",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安裝插件

可以使用上篇文章中創(chuàng)建的Cordova項目來測試

$ cordova plugin add /Users/cordova/Toast

最后，可在index.html中寫個button按鈕測試所寫的插件是否合適。

附

刪除插件

cordova plugin remove XXXXX(你的plugin_id)

查看所有插件

cordova plugin list