一、插件内容详解

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

插件目录结构

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

功能实现相关

• CallNative.java
• callnative.js

注册到cordova相关

• 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 {
        // 自定义实现
        // callbackContext.success(); 与插件js中的exec方法success参数对应
        // callbackContext.error(); 与插件js中的exec方法error参数对应
        return true;
    }
}

2、callnative.js

var exec = require('cordova/exec');
/**
exports.coolMethod：导出名叫coolMethod的函数，其他js在使用插件时调用[clobber].[functionName]
调用示例

// 先定义回调函数，
function success(res){
    console.log("success",res)
}
function error(res){
    console.log("error",res)
}
// 调用自定义插件[clobber].[functionName]
cordova.plugins.CallNative.coolMethod('参数',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相关内容在安装插件时会被写入到cordova项目的cordova_plugins.js文件  -->
    <!-- src：自定义开发的插件js文件路径 -->
    <js-module name="callnative" src="www/callnative.js">
        <!--target：js调用插件时的引用对象 -->
        <clobbers target="cordova.plugins.CallNative" />
    </js-module>
    <platform name="android">
        <!-- 安装插件时，config-file 内容会被写入到安卓项目的config.xml内(即将feature标签内容原样写入) -->
        <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：自定义开发的插件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、根据一、的介绍创建插件项目cordova-plugin-callnative

2、创建测试cordova项目

• 创建项目

cordova create plugin-test com.liang.plugintest pluginTest

• 添加android平台

cordova platforms add android

• 进入cordova项目目录

cd plugin-test

• 安装创建好的自定义插件
  注意：我此处插件项目目录与cordova测试项目目录同级，所以使用../相对路径

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

3、安装成功后测试cordova项目变化

注意：如果项目已经在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
  新增插件相关内容

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

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

与plugin.xml中定义的内容对应

4、调用测试

    function success(res){
        console.log("调用成功",res)
    }
    function error(e){
        console.log("调用失败",e)
    }
  
    // 调用test函数测试
    function test(){
      cordova.plugins.CallNative.coolMethod('action',success,success);
    }