Android Cordova 插件開發之編寫本身定義插件

前言

本文適合Android+web的複合型人才，因爲cordova自己就是混合開發，因此在Android開發的基礎上，還要懂web相關技術(HTML+CSS+JS)。但是也有例外，比方我。僅僅需負責Android方面。web方面的交由其它web組人員開發。儘管。web略懂一點。但我主要仍是搞Android開發的。

編寫本身定義插件類

本節的內容是。本身定義一個dialog插件。供web調用，顯示系統彈窗。
新建一個包名，我這裏使用org.apache.cordova.dialog。而後建立個類CustomDialog.java。繼承於CordovaPlugin（所有本身定義插件，都要繼承CordovaPlugin），最後重寫execute方法。

execute有三個重載方法：

public boolean execute(String action, JSONArray args, CallbackContext callbackContext)

public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext)

public boolean execute(String action, String rawArgs, CallbackContext callbackContext)

這三個方法。假設你看了CordovaPlugin源代碼的話。會發現，事實上最後都調用了第二個方法，但是CordovaArgs僅僅是對JSONArray的一個封裝。方便操做json數據而已，因此要重寫哪一個。按我的喜愛。

這裏。我是重寫了第二個方法，現在來講明下方法參數：
String action：一個類裏面可以提供多個功能，action就是指名了要調用哪一個功能。
CordovaArgs args：web以json的數據格式傳遞給Android native。CordovaArgs 是對JSONArray 的一個封裝。
CallbackContext callbackContext：這個是回調給web，有success和error兩種回調方法。

詳細實現例如如下：

public class CustomDialog extends CordovaPlugin{

    @Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {
        if("show".equals(action)){
            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());
            builder.setTitle("提示");
            builder.setMessage(args.getString(0));
            builder.setPositiveButton("肯定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.success("點擊了肯定");
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.error("點擊了取消");
                }
            });
            builder.create().show();
            return true;
        }
        return super.execute(action, args, callbackContext);
    }

}

假設web使用了CustomDialog插件。並調用show方法（action）。這時候，會彈出一個系統窗體。會顯示web傳過來的消息內容，點擊肯定，回調web，告訴它調用成功，取消則是失敗。最後記得return true（表示調用成功）。

配置config.xml

打開res/xml/config.xml文件，本來內容例如如下：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.helloworld" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="loglevel" value="DEBUG" />
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <allow-intent href="market:*" />
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
</widget>

Whitelist是基礎項目自帶的一個插件，相同的，咱們在widget節點下也加入一個feature。

<?
xml version='1.0' encoding='utf-8'?> <widget id="com.example.helloworld" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <preference name="loglevel" value="DEBUG" /> <feature name="Whitelist"> <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" /> <param name="onload" value="true" /> </feature> <!--彈窗插件--> <feature name="CustomDialog"> <param name="android-package" value="org.apache.cordova.dialog.CustomDialog" /> </feature> <allow-intent href="market:*" /> <name>HelloWorld</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="dev@cordova.apache.org" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> </widget>

feature name可以隨便取，param value填的是詳細類的位置。

web配置並調用

一、配置

打開asserts/www/cordova_plugins.js文件,註冊插件。

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/cordova-plugin-whitelist/whitelist.js",
        "id": "cordova-plugin-whitelist.whitelist",
        "runs": true
    },
    {
        "file": "plugins/cordova-plugin-dialog/dialog.js",//js文件路徑
        "id": "cordova-plugin-dialog.CustomDialog",//js cordova.define的id
        "clobbers": [
            "alertDialog"//js 調用時的方法名
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.2.1"
};
// BOTTOM OF METADATA
});

而後在assets/www下建立dialog.js文件

內容例如如下：

cordova.define("cordova-plugin-dialog.CustomDialog",
    function(require, exports, module) {
        var exec = require("cordova/exec");
        module.exports = {
            show: function(content){
                exec(
                function(message){//成功回調function console.log(message);
                },
                function(message){//失敗回調function console.log(message);
                },
                "CustomDialog",//feature name
                "show",//action
                [content]//要傳遞的參數。json格式
                );
            }
        }
});

cordova.define 的第一個參數就是cordova_plugins.js裏面定義的id，最基本的是exec方法，參數說明：
參數1：成功回調function
參數2：失敗回調function
參數3：feature name，與config.xml中註冊的一致
參數4：調用java類時的action
參數5：要傳遞的參數，json格式

二、調用

配置完上面的。僅僅剩下在合適的地方調用它了。
打開assets/www/js/index.js
找到onDeviceReady方法，而後調用

alertDialog.show('Hello World!!!!');

這裏直接調用alertDialog，就是在cordova_plugins.js下定義的clobbers名稱,show是在js申明的function
index.js#onDeviceReady

onDeviceReady: function() {
        app.receivedEvent('deviceready');
        //調用本身定義插件
        alertDialog.show('Hello World!!!!');
    }

直接在Android Studio運行，效果圖例如如下：

這個對話框就是Android 系統的AlertDialog。

當咱們點擊肯定時。就會回調js success function，打印出日誌。

不要運行cordova build命令。！

！

需要注意的是。假設你上一篇章有細緻看過以後，你會有這麼個疑問，編譯項目不是用

cordova build

命令的嗎？很是好，網上很是多說。在項目中。代碼都已經寫好了。但是一運行該命令，不但沒有生效，反而以前寫的插件代碼都沒了。事實上，假設你知道整個項目編譯過程。那麼問題就迎刃而解了。

這裏簡單的說下。看下圖的目錄結構

plugins是存放插件的目錄。而www是存放H5項目的。也就是Android項目下的asserts/www下的文件，當運行cordova build時，它會依據config.xml配置來編譯項目，而後會將plugins和www下的文件應用到platforms目錄下的各個平臺，這就是「一次編譯，多平臺運行」。

但是。至始至終，咱們編寫的代碼都是在Android平臺下的。而上面提到的兩個目錄咱們都沒有動過。也就是說，所有配置都沒有動過。都是初始狀態，因此運行build後也就沒有效果。

總結

經過上面的實例，已經實現了簡單的本身定義插件，但是它僅僅是在Android平臺上實現的。那麼。咱們怎麼應用在其它的平臺上呢？或者說，咱們實現一個插件以後，怎麼提供給別人項目使用呢？下一節，將說說插件安裝包怎樣生成。就是解決這幾個問題的。

源代碼