前言
上次写完插件的基本程序后，一直没写出来我想要的插件，总是有很多问题，然后突发奇想，自定义一个多插件的控件应该是后续肯定要用到的，反正也没有相关文档，不如摸索摸索，结果在今天这个美好的下午，让老子写出来了！
因为官网和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两个原生方法
效果
