（2）cordova android自定義插件開發

插件分為三部分，原生java 類 ，中間件（.js .xml）,h5(前端)

第一步 建立 插件

第一次使用 pluman 需要安裝

npm install -g plugman

建立插件指令

參數:

pluginName: 插件名字

pluginID: 插件id, egg : coolPlugin

oversion: 版本, egg : 0.0.1

directory:一個絕對或相對路徑的目錄，該目錄将建立插件項目

variable NAME=VALUE: 額外的描述，如作者資訊和相關描述

例:

生成插件初始的目錄檔案結構

第二步配置關聯，配置中間件

打開配置檔案 plugin.xml

打開firstCordovaPlugin.js檔案

開始配置

plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<!--id:插件id，version:插件版本号   -->
<plugin id="firstCordovaPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" 
xmlns:android="http://schemas.android.com/apk/res/android">
    <!--name:插件名稱-->
    <name>firstCordovaPlugin</name>
    <!--src：js中間件相對目錄位址-->
    <js-module name="firstCordovaPlugin" src="www/firstCordovaPlugin.js">
        <!--target：H5通過它調用js中間件方法，可以配置多個-->
        <clobbers target="cordovaMin" />
    </js-module>
    <!--name:配置平台 android -->
    <platform name="android">
        <!--src: 插件原生java的類名-->
        <!-- tartget-dir: src/包類"**會複制進項目包中-->      
        <source-file src="src/android/FirstCordova.java" target-dir="src/com/szzt/min"/>

        <!-- target："res/xml/config.xml",  parent："/*"-->
        <config-file target="res/xml/config.xml" parent="/*">
            <!--  name："js中間件通過它調用java方法 -->
            <feature name="loga">
                <!--  value：原生插件類的包類路徑** -->
                <param name="android-package" value="com.szzt.min.FirstCordova"/>
            </feature>
        </config-file>
    </platform>
</plugin>
           

firstCordovaPlugin.js

var exec = require('cordova/exec');
<!--第二個參數為.xml配置檔案feature的name屬性值 ，第三個 參數為原生java類中的action-->
exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "loga", "coolMethod", [arg0]);
};
           

在src檔案下 建立 android/ FirstCordova.java 檔案

FirstCordova.java

package com.szzt.min;

import android.util.Log;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class FirstCordova extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

        if("coolMethod".equals(action)){
            Log.i("--------->","success");
            return true;
        }
        return false;
    }
}
           

具體實作可以安裝到項目編寫

第三步 插件安裝

行插件安裝指令

cordova plugin add  firstCordovaPlugin
           

檢視目錄

插件添加成功 後會在相應的目錄出現1、2号檔案

打開配置檔案(6号)

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.szzt.min" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <name>sdnx</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" 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:*" />
    <allow-intent href="market:*" />
    <preference name="loglevel" value="DEBUG" />
    <feature name="ShowToast">
        <param name="android-package" value="com.hand.toast.ShowToast" />
    </feature>
    <!-- 自動添加的 plugin.xml 中 feature 元素的内容到這裡-->
    <feature name="loga">
        <param name="android-package" value="com.szzt.min.FirstCordova" />
    </feature>
</widget>
           

打開4号檔案

檢視到//自動添加内容到 module.exports

并且clobber：cordovaMin 已經注冊為内置對象

cordova.define('cordova/plugin_list', function(require, exports, module) {
//自動添加引用
module.exports = [
    {
        "id": "coolPlugin.CoolPlugin",
        "file": "plugins/coolPlugin/www/CoolPlugin.js",
        "pluginId": "coolPlugin",
        "clobbers": [
            "cordova.plugins.CoolPlugin"
        ]
    },
    {
        "id": "firstCordovaPlugin.firstCordovaPlugin",
        "file": "plugins/firstCordovaPlugin/www/firstCordovaPlugin.js",
        "pluginId": "firstCordovaPlugin",
        "clobbers": [
            "cordovaMin"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.3.2",
    "coolPlugin": "0.0.1",
    "firstCordovaPlugin": "0.0.1"
};
// BOTTOM OF METADATA
});
           

檢視2号檔案

cordova.define("firstCordovaPlugin.firstCordovaPlugin", function(require, exports, module) {
var exec = require('cordova/exec');
//coolMethod為action 的值 ；loga 為feature 的name值 關聯原生java類
exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "loga", "coolMethod", [arg0]);
};

});
           

打開 FirstCordova.java

package com.szzt.min;

import android.util.Log;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class FirstCordova extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        //coolMethod action的值js中間件裡一緻
        if("coolMethod".equals(action)){
            Log.i("--------->","success");
            return true;
        }
        return false;
    }
}
           

index.html

<!DOCTYPE html>
<html>
    <head>
 <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>Hello World</title>
    </head>
    <body>
        <button class="amazing"  onclick="logl()" >click</button>

    </body>
    <!--必須引入cordova.js /插件初始化過程-->
    <script type="text/javascript" src="cordova.js"></script>
<script >
// 直接用cordovaMin對象（在cordova_plugins.js 裡有介紹） 調用插件js中的coolMethod方法
   function logl(){
            cordovaMin.coolMethod();
        }
</script>

</html>
           

運作程式，點選按鈕