Cordova自定义插件

一、创建一个Cordova项目

命令格式 ：cordova create 项目名 包名

cordova create hello  com.metre.demo

添加平台：（以Android为例）
命令： cordova platform add 平台名

cordova platform add android

二、创建一个插件

注意：先切换到demo项目根目录 cd d:/xx/hello 。再用命令创建插件项目
命令格式：plugman create --name 插件名 --plugin_id 插件ID --plugin_version 插件版本号

plugman create --name PlugTest --plugin_id com-metre-PlugTest --plugin_version 1.0.0

创建完后，目录如下：

插件目录

三、修改配置文件

1、将需要用到的调到Android的Java类复制到src下。
2、创建插件类，并继承 CordovaPlugin。

package com.metre.demo;
import android.app.Activity;
import android.content.Intent;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
/**
 *  Created by mi on 2018/9/13
 */
public class TestPlugin extends CordovaPlugin {
    @Override
    protected void pluginInitialize() {
        super.pluginInitialize();
    }
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        final Activity activity = this.cordova.getActivity();
        if (action.equals("showInfo")){  // showInfo是定义的js函数
            Toast.makeText(activity,"插件原生功能showInfo（原生弹出），参数：" + args.toString(),Toast.LENGTH_LONG).show();
            callbackContext.success("Android 调用成功啦。");  //callbackContext 是回调接口
        }else{
            Toast.makeText(activity,"未实现（原生弹出）",Toast.LENGTH_LONG).show();
            return true;
        }
        return false;
    }
}

3、修改 plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com-metre-PlugTest" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>PlugTest</name>
    <js-module name="PlugTest" src="www/PlugTest.js">
        <clobbers target="com.metre"/>  <!--   注意：这里的taget 值定义的是js的访问对象  既：com.metre.showInfo(....);   -->
    </js-module>

    <!--platform：支持的平台-->
    <platform name="android">
        <!--插件的配置信息，build的时候会添加到res/xml/config.xml 文件中-->
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="PlugTest">
                <param name="android-package" value="com.metre.demo.TestPlugin"/>
            </feature>
        </config-file>
        <!-- 可以定义自己的一些权限信息，build后会添加到主配置文件中 -->
        <config-file target="AndroidManifest.xml" parent="/*">
        </config-file>
       <source-file src="src/com/metre/demo/TestPlugin.java" target-dir="src/android/"/>
        <!-- <source-file src="src/android/TestPlugin.java" target-dir="src/android"/>-->
    </platform>
</plugin>

注意：js-module中 的taget 值定义的是js的访问对象 既js中调用方式为 ：com.metre.showInfo(....);

4、修改 www目录下的 js（PlugTest.js）

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

var testPlug = {};
testPlug.showInfo = function (info, success, error) {
    exec(success, error, "PlugTest", "showInfo", [info]);
};

module.exports = testPlug;

5、生成package.json文件
切换到 插件目录下 cd PlugTest
命令：npm init

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (plugtest) PlugTest
version: (1.0.0)
description: 测试插件
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\xx\xx\hello\PlugTest\package.json:

{
  "name": "PlugTest",
  "version": "1.0.0",
  "description": "测试插件",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

Metre@DESKTOP-O0R0ISK MINGW64 /d/xx/xx/hello/PlugTest

成功后，会在插件项目根目录下生产package.json文件。

package.json

到此为止，插件已经完成啦。

四、调用自定义插件

1、添加自定义插件
命令：cordova plugin add 插件项目目录

cordova plugin add D:/xx/xx/hello/PlugTest

添加成功

插件如果有问题，需要重新修改，需要从项目移除插件后，再添加，移除命令如下：cordova plugin remove 插件ID

cordova plugin remove com-metre-PlugTest

2、js调用插件

 com.metre.showInfo('Test Data', function (msg) {
                console.log('success:'+msg);
            },function ( error ) { 
                console.log('fail:'+error);
            });

3、打包安装测试

$ cordova run android

调用成功