Cordova进阶：多方法插件

前言

上次写完插件的基本程序后，一直没写出来我想要的插件，总是有很多问题，然后突发奇想，自定义一个多插件的控件应该是后续肯定要用到的，反正也没有相关文档，不如摸索摸索，结果在今天这个美好的下午，让老子写出来了！

因为官网和google，baidu都没有相关资料，所以必须记得特别仔细，免得到时候看不懂了都没人问。

编写过程

• 首先写一个插件，还是继承CordovaPlugin

package com.jty.app.plugin;import android.app.AlertDialog;import android.content.DialogInterface;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 this's a Dialog and Toast plugin */public class ToastPlugin extends CordovaPlugin{    @Override    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {        if("dialog".equals(action)){            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());            builder.setTitle("Tip");            builder.setMessage(args.getString(0));            builder.setPositiveButton("config", new DialogInterface.OnClickListener() {                @Override                public void onClick(DialogInterface dialog, int which) {                    dialog.dismiss();                    callbackContext.success("click config");                }            });            builder.setNegativeButton("cancel", new DialogInterface.OnClickListener() {                @Override                public void onClick(DialogInterface dialog, int which) {                    dialog.dismiss();                    callbackContext.error("click cancel");                }            });            builder.create().show();            return true;        }else if("show".equals(action)){            Toast.makeText(cordova.getActivity(),args.getString(0),Toast.LENGTH_SHORT).show();            return true;        }        return false;    }}

• 在config.xml里不用变

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

• cordova_plugin.js
  

  这里定义一个方法名即可，cordova会先收到文件，然后匹配id，然后找定义方法名，这个dialog和下面文件中的dialog没关系，是用来调用下面插件方法的方法名，可以理解为java中的类名

{    "file": "plugins/ToastPlugin.js",    "id": "jty-plugin-toast",//定义cordova时候的id，看下面的同名插件    "clobbers": [        "dialog"//调用时的类名，如dialog.show("123");里面的dialog    ]}

• 上面两项配置好了，我们就要开始写同名Cordova插件了

/** * 首先格式不变，还是这鸟样，但是下面的输出函数多了一个 * 因为无法再一个action中传递多个参数，所以通过写两个函数的方式来达到目的 * 函数名就是最后要在js中调用的方法名 * action是要传递给原生代码的方法名 * MyToast是在config的feature中定义的名称 *  * 注意exec函数的格式 * cordova.exec（success,failed,service,action,args） */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格式                );            },            dialog: function(content){                exec(                function(message){                    console.log(message);                },                function(message){                    console.log(message);                },                "MyToast",                "dialog",                [content]                );            }        }});

• 然后引用插件即可

<!--在html中加一个button--> <button id = "toNative">TO NATIVE</button>

//在onDeviceReady函数中写个事件调用即可document.getElementById("toNative").addEventListener("click",toNative);function toNative(){    dialog.show("123");    dialog.dialog("123");}

• 效果
  

当点击TO NATIVE按钮的时候，就会弹出Toast和Dialog两个原生方法