Cordova进阶：插件开发

前言

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

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

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

开发插件

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

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!!");        }