cordova开发插件步骤及小结（android插件）

最近领导要求以cordova为基础写一个h5应用，在初步的摸索之后发现cordova的插件并不算多，不接地气，在国内感觉挺一般的，当然跟我的水平也有一定的关系...用的还不算熟练。在领导的需求中有个一定位的功能，一开始打算使用百度地图的javascript api的，后来发现定位的准确度实在是太烂了。。隔着十万八千里。。官方解释说在测试高精度ip定位，现在还没有开放，没办法就想到了通过cordova来封装百度地图的android sdk，那就只能先学cordova开发插件了，这篇博客是学习之后编写的，实现了android原生toast的js调用。下面是编写该插件的步骤：

1.在src目录下新建一个package

2.编写一个ToastPlugin.java类继承CordovaPlugin.java且重写excute()方法：

package com.cordova.plugins.toastplugin;

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

import android.widget.Toast;

/**
 * cordova吐司插件
 * @author AmosLiu
 * @Date 2016/04/13
 */
public class ToastPlugin extends CordovaPlugin {

	// 无参构造函数
	public ToastPlugin() {

	}


	@Override
	public boolean execute(String action, CordovaArgs args,
			CallbackContext callbackContext) throws JSONException {
		// TODO Auto-generated method stub
		//参数action:对应的js中的方法名,
		//参数agrs:对应js方法中传入的参数
		//参数callbackContext回调方法
		if ("showToast".equals(action)) {
			//当在js中使用同名方法时触发该动作
			//args.getString(0):传入的文本
			//args.getInt(1):传入的类型（长短）
			show(args.getString(0),args.getInt(1));
		}
		//触发js中的成功回调函数
		callbackContext.success();
		return true;
	}
	
	
	
	private void show(String text ,int type){
		if (1==type) {
			Toast.makeText(this.cordova.getActivity(), text, Toast.LENGTH_LONG).show();
		}else {
			Toast.makeText(this.cordova.getActivity(), text, Toast.LENGTH_SHORT).show();
		}
	}

}

3.在工程的res/xml/config.xml中配置对应的plugin:

参数中注意value为第二步中编写的Java类

4.在工程的assests/www/plugins下新建文件toast.js，工程目录如下图：

5.编写toast.js：

cordova.define("cordova-plugin-webtoast.webToast", function(require, exports, module) {
	//android 原生toast插件
	var exec = require("cordova/exec");

	module.exports = {
		showToast: function(content, type) {
			exec(null, null, "WebToast", "showToast", [content, type]);
			//exec方法参数解释：
			//第一个参数：成功回调函数，当在java中调用callbackcontext.success()时触发
			//第二个参数：失败回调参数，当在java中调用callbackcontext.error()时触发
			//第三个参数:对应的res/xml/config.xml中配置插件的name，
			//第四个参数：方法名
			//第五个参数：需要传到java中的参数
		}
	};
});

6.在cordova-plugins中添加编写的toast.js的配置：

    	"file": "plugins/cordova-plugin-webtoast/www/toast.js",  
        "id": "cordova-plugin-webtoast.webToast",  
        "clobbers": [  
            "navigator.webtoast"  
        ]  

file：对应的toast.js在工程的路径，相对路径

id：toast.js中define后面的id

        clobbers：在js中调用该插件的方法

7.在Js中使用该插件：

<span style="white-space:pre">	</span>function testToast(){
		//测试自定义插件调用android原生toast
	<span style="white-space:pre">	</span>navigator.webtoast.showToast("hello,这是一个shortToast",0);
	}

<span style="white-space:pre">	</span>以上就是在开发toast插件的步骤，希望大家喜欢