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两个原生方法