5分鐘創建Cordova Plugin教學，超完整手把手開發環境範例

前置工作

已完成安裝cordova以及android studio

創建plugn專案

首先透過npm安裝plugman

npm install -g plugman

創建一個cordova plugin專案，參數--name會成為資料夾名稱以及java class name

plugman create --name CustomPlugin --plugin_id "cordova-plugin-customplugin" --plugin_version 0.0.1

cd到cordova plugin專案目錄下並加上android平台支持

cd CustomPlugin
plugman platform add --platform_name android

創建package.json檔案並輸入相關資訊(.代表當前目錄)

plugman createpackagejson .

到目前為止整個cordova plugin架構已經完成

CustomPlugin/
├───src/
│   └───android/
│       └───CustomPlugin.java
├───www/
│   └───CustomPlugin.js
├───package.json
└───plugin.xml

修改部分

1.開啟src\android\CustomPlugin.java

將檔案中最上面的package name從package cordova-plugin-customplugin;改成自定義的package這裡以package com.cordova.plugin當範例。

2.打開plugin.xml並先格式化一下

在<platform name="android">的tag裡找到這行，將value修改為剛剛自定義對應java的完整路徑。

<!-- before-->
<param name="android-package" value="cordova-plugin-customplugin.CustomPlugin" />
<!-- after-->
<param name="android-package" value="com.cordova.plugin.CustomPlugin" />
Copy

還有找到下面這行，將target-dir修改為剛剛自定義對應java的package路徑。

<!-- before-->
<source-file src="src/android/CustomPlugin.java" target-dir="src/cordova-plugin-customplugin/CustomPlugin" />
<!-- after-->
<source-file src="src/android/CustomPlugin.java" target-dir="src/com/cordova/plugin" />
Copy

這樣就完成了全部修改。

初步測試

將剛新增的CustomPlugin加到現有cordova專案，並測試自動產生的coolMethod，首先到cordova的專案路徑下執行

cordova plugin add D:\CustomPlugin

在codova專案的js新增下面程式碼

var customPlugin = cordova.plugins.CustomPlugin;
customPlugin.coolMethod("test Custom Plugin ok", function(data) {
    alert(data);
}, function() {
    alert("Error calling Plugin");
});
Copy

建置app

cordova build android

執行app可以看到alert訊息就是表示plugin已經完成基底架構可以開始開發了。

新增功能

接下來打開android studio匯入cordova app專案下資料夾路徑為platforms\android後，然後就能在app\src\main\java\com\cordova\plugin下找到你剛剛新增的CustomPlugin.java，並依照coolMethod的範例加上自己所需功能，最後將android studio修改所有程式碼複製回原本CustomPlugin專案覆蓋src\android\CustomPlugin.java，這裡加上一個新的功能packageName。

@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;
    } else if (action.equals("packageName")) {
        callbackContext.success(cordova.getActivity().getApplicationContext().getPackageName());
        return true;
    }
    return false;
}
Copy

接著打開CustomPlugin專案下的www\CustomPlugin.js也定義新的Action入口如下。

var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'CustomPlugin', 'coolMethod', [arg0]);
};

exports.packageName = function (success, error) {
    exec(success, error, 'CustomPlugin', 'packageName', []);
};

Copy

到原本cordova app專案下移除原本加入的plugin重新加入

cordova plugin remove cordova-plugin-customplugin

重新加入

cordova plugin add D:\CustomPlugin

在你cordova app專案的js新增下面程式碼

var customPlugin = cordova.plugins.CustomPlugin;
customPlugin.packageName(function(data) {
    alert(data);
}, function() {
    alert("Error calling Plugin");
});
Copy

建置app

cordova build android

執行app可以看到alert訊息顯示app的package name就是成功了。

小結

Cordova Plugin開發可以讓我們很容易呼叫android手機native api，Java部分的語法並沒有太多也沒有太複雜，尤其是找不是合適的plugin時候，不妨考慮自己開發吧。

參考延伸閱讀: