一泄朴、插件內(nèi)容詳解

插件gitee地址：https://gitee.com/liangyehao/cordova-plugin-calllnative

插件目錄結(jié)構(gòu)

cordova-plugin-callnative
│  package.json
│  plugin.xml
│
├─src
│  └─android
│          CallNative.java
│
└─www
        callnative.js

功能實現(xiàn)相關(guān)

• CallNative.java
• callnative.js

注冊到cordova相關(guān)

• plugin.xml
• pakage.json

1茫死、CallNative.java

核心是繼承CordovaPlugin 且重寫execute方法

package com.liang.plugins;

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

public class CallNative extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        // 自定義實現(xiàn)
        // callbackContext.success(); 與插件js中的exec方法success參數(shù)對應
        // callbackContext.error(); 與插件js中的exec方法error參數(shù)對應
        return true;
    }
}

2勾笆、callnative.js

var exec = require('cordova/exec');
/**
exports.coolMethod：導出名叫coolMethod的函數(shù)最冰，其他js在使用插件時調(diào)用[clobber].[functionName]
調(diào)用示例

// 先定義回調(diào)函數(shù)狭魂，
function success(res){
    console.log("success",res)
}
function error(res){
    console.log("error",res)
}
// 調(diào)用自定義插件[clobber].[functionName]
cordova.plugins.CallNative.coolMethod('參數(shù)',success,error)

*/


exports.coolMethod = function (arg0, success, error) {
    /* @param {Function} success    The success callback
     * @param {Function} fail       The fail callback
     * @param {String} service      The name of the service to use，插件java文件類名
     * @param {String} action       Action to be run in cordova 傳入到java方法的action值
     * @param {String[]} [args]     Zero or more arguments to pass to the method
       [arg]對應的方法為：execute(String action, JSONArray args, CallbackContext callbackContext)
     */
    exec(success, error, 'CallNative', 'action', [arg0]);
};

3蛛枚、plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<!--id: 插件id，會寫入到cordova_plugins.js中 -->
<plugin xmlns:android="http://schemas.android.com/apk/res/android" id="cordova-plugin-callnative"
    version="1.0.0"
    xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>CallNative</name>
    <!-- js-module相關(guān)內(nèi)容在安裝插件時會被寫入到cordova項目的cordova_plugins.js文件  -->
    <!-- src：自定義開發(fā)的插件js文件路徑 -->
    <js-module name="callnative" src="www/callnative.js">
        <!--target：js調(diào)用插件時的引用對象 -->
        <clobbers target="cordova.plugins.CallNative" />
    </js-module>
    <platform name="android">
        <!-- 安裝插件時脸哀，config-file 內(nèi)容會被寫入到安卓項目的config.xml內(nèi)(即將feature標簽內(nèi)容原樣寫入) -->
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="CallNative">
                <!-- value：cordova安裝插件成功后蹦浦，自定義插件java部分的全限定類名 -->
                <param name="android-package" value="com.liang.plugins.CallNative" />
            </feature>
        </config-file>
        <!-- src：自定義開發(fā)的插件java文件路徑
        注意：java文件包名應該跟target-dir相對應，例如此處java文件最終會被放在src/com/liang/plugins目錄下撞蜂，
        所以java類的包名應該定義為com.liang.plugins
         -->
        <!-- target-dir：java文件寫入到cordova項目時的目錄 -->
        <source-file src="src/android/CallNative.java"
            target-dir="src/com/liang/plugins" />
    </platform>
</plugin>

4盲镶、package.json

核心是版本號，自定義就好："version": "1.0.0",
name和id與plugin.xml中的plugin標簽id屬性的值保持一致即可

{
  "name": "cordova-plugin-callnative",
  "version": "1.0.0",
  "description": "",
  "cordova": {
    "id": "cordova-plugin-callnative",
    "platforms": [
      "android"
    ]
  },
  "keywords": [
    "ecosystem:cordova",
    "cordova-android"
  ],
  "author": "lyh",
  "license": "ISC"
}

二蝌诡、示例步驟

1溉贿、根據(jù)一、的介紹創(chuàng)建插件項目cordova-plugin-callnative

2浦旱、創(chuàng)建測試cordova項目

• 創(chuàng)建項目

cordova create plugin-test com.liang.plugintest pluginTest

• 添加android平臺

cordova platforms add android

• 進入cordova項目目錄

cd plugin-test

• 安裝創(chuàng)建好的自定義插件
  注意：我此處插件項目目錄與cordova測試項目目錄同級宇色，所以使用../相對路徑

cordova plugin add ../cordova-plugin-callnative/

3、安裝成功后測試cordova項目變化

注意：如果項目已經(jīng)在android studio打開颁湖，文件加載可能存在延遲宣蠕，手動刷新一下項目reload from disk

-{項目目錄} \platforms\android\platform_www

platform_www
│  cordova.js
│  cordova_plugins.js # 里面新增注冊了自定義插件信息
│
└─plugins 
    └─cordova-plugin-callnative # 新增，自定義插件
        └─www
                callnative.js

• {項目目錄}\platforms\android\app\src\main\assets\www

www
│  cordova.js
│  cordova_plugins.js # 里面新增注冊了自定義插件信息
│  index.html
│
├─css
│      index.css
│
├─img
│      logo.png
│
├─js
│      index.js
│
└─plugins
    └─cordova-plugin-callnative # 新增甥捺，自定義插件
        └─www
                callnative.js

• {項目目錄}\platforms\android\app\src\main\java

java
└─com
    └─liang
        ├─plugins # 新增植影，自定義插件java文件
        │      CallNative.java
        │
        └─plugintest
                MainActivity.java

• {項目目錄}\platforms\android\android.json
  config_munge
  modules
  plugin_metadata
  新增插件相關(guān)內(nèi)容

• {項目目錄}\platforms\android\app\src\main\res\xml\config.xml
  新增

    <feature name="CallNative">
        <param name="android-package" value="com.liang.plugins.CallNative" />
    </feature>

與plugin.xml中定義的內(nèi)容對應

4窜醉、調(diào)用測試

    function success(res){
        console.log("調(diào)用成功",res)
    }
    function error(e){
        console.log("調(diào)用失敗",e)
    }
  
    // 調(diào)用test函數(shù)測試
    function test(){
      cordova.plugins.CallNative.coolMethod('action',success,success);
    }