Cordova进阶：插件开发

前言

我本来没想这么快进入这一块的，但是Cordova居然没有跳转原生的方法，还把js桥断了，这也就算了，还没有官方插件，于是想来想去只有自己写个插件了，也方便以后调用。但是我才刚入门，不会写，所以记录下插件开发的坑，先做个练习，下一节准备完成Cordova调用Activity插件。

开发前有几个得先了解一下Cordova官方的几个重要网站：
Cordova 插件开发指南
Cordova插件命令
CordovaPlugin.java

如果能看完这3个，你基本上就有点思路了，甚至可以自己写个简单的插件了，但是如果你看不懂的话，或者和我一样看完还是糊里糊涂，还是跟我入坑实操一遍吧。

开发插件

来来来，先看下图，第一步是废话，第二步有3个构造方法，看一下它的源码你会发现，是按照下图顺序调用的，用起来还是比较方便的，我的工具类也是这种写法https://github.com/seeways/AndroidUtils

plugin

execute释义

action : 你要调哪个功能
args: web通过json格式发来native，所以3个参数哪个方便用哪个。
callbackContext：首先他是回调接口，没有异议，其次，看看源码的构造方法CallbackContext(String callbackId, CordovaWebView webView)，大概就知道它应该是web的回调接口

插件的JavaScript接口使用cordova.exec方法如下:
exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

这是从WebView向Android Native发一个请求，有效地调用service上的action方法，并在args数组中传递其他参数。

无论你是将插件作为Java文件分发还是作为其自身的jar文件，插件必须在应用程序的res/xml/config.xml文件中指定。xml文件。有关如何使用插件的更多信息，到plugin.xml 中查看即可。

<feature name="<service_name>">
    <param name="android-package" value="<full_name_including_namespace>" />
</feature>

开发步骤

• 添加一个继承CordovaPlugin的java文件。

package com.jty.app.plugin;

import android.widget.Toast;

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

/**
 * @author TaoYuan
 * @time 2017/5/18 0018
 * @desc
 */

public class ToastPlugin extends CordovaPlugin{
    //重写execute方法
    @Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {
        //逻辑代码
        if("show".equals(action)){
            Toast.makeText(cordova.getActivity(),args.getString(0),Toast.LENGTH_SHORT).show();
        }
        return super.execute(action, args, callbackContext);
    }
}

• 在assets\www\plugins添加插件的目录，并在该目录下添加一个js文件

cordova.define("jty-plugin-toast",
    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);
                },
                "MyToast",//feature name
                "show",//action
                [content]//要传递的参数，json格式
                );
            }
        }
});

• 配置cordova_plugins.js文件(配置js文件的相关信息)

{
    "file": "plugins/ToastPlugin.js",
    "id": "jty-plugin-toast",//js cordova.define's id
    "clobbers": [
    "toast"//js 调用时的方法名
    ]
}

• 配置res\xml\config.xml文件(配置java文件的相关信息)

<feature name="MyToast">
    <param name="android-package" value="com.jty.app.plugin.ToastPlugin"/>
</feature>

• 效果

在html上加个按钮，id为toNative，然后按刚才设置的action去调，就会显示出原生Toast。

    document.getElementById("toNative").addEventListener("click",toNative);

    function toNative(){
        toast.show("Hello Cordova Plugin!!");
        }

点击 TONATIVE的效果

点击 TONATIVE的效果