PhoneGap：作为原生App，Java（这里面是指Android的）与JavaScript 的通信桥梁，使得我们的混合开发更加得心应手，我是与Android结合的混合开发。
但在这里不得不吐槽一下PhoneGap这个坑：更新速度很快，但是学习资料的更新却远远跟不上节奏。而且必须按照它的套路走，而且就算按着套路走也可能会出错，
最后还是得靠自己摸索。。。。
好了，不说那么多了，下面介绍PhoneGap自定义插件的使用（也可以说是CordovaPlugin），主要分以下步骤：
1）下载最新版的cordova.jar，我在使用的是cordova3.5.0.jar 版本的， 把下载的 cordova-x.x.x.jar导入到工程的libs目录下来。
说明：这个cordova.jar 是用于Android原生Java语言这边使用的，有了这个架包就可以在Android这边编写自定义的插件。
2）把cordova.js，cordova_plugin.js 这两个JavaScript文件复制到www文件目录下面。
说明：这两个js文件是用于JavaScript调用插件中方法使用。
3）在www文件目录下新建一个 plugins 文件夹目录。
说明： 用于存放自定义插件的JavaScript文件
4）编写自定义插件中的 java 代码部分：FirstPlugin.java
<span style="font-size:14px;">package com.customcordovaplugin.plugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
/**
* Created by long on 2016/5/10.
*/
public class FirstPlugin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
throws JSONException {
//检查方法名，例如我们定义一个名为sayHello的方法
if("sayHello".equals(action)){
/**
* 关于回调函数
* 成功就执行 callbackContext.success(param)，从而触发成功回调函数
* 失败就执行 callbackContext.error(param)，从而触发失败回调函数
* 如果不需要回调函数，那么就没必要调用这两个方法
*/
//获取第一个参数，如果有多个参数的话可以使用索引号分别获取
String message = args.getString(0);
//检查输入值是否为空，如果为空值就会调用 callbackContext.error()方法
//这会导致失败回调函数被调用
if(message!=null && message.length()>0){
callbackContext.success("Hello: "+message+"!");
}else{
callbackContext.error("输入值为空！");
}
//最后还需要返回逻辑值 true 来表明方法存在
return true;
}
//否则，如果方法名不符，那么就返回false
//在网页的 JavaScript 程序中调用时就会导致“MethodNotFound”错误
return false;
}
}
</span><span style="font-size:14px;">cordova.define("firstplugin_id",
function(require, exports, module) {
//引入必要的类
var exec = require('cordova/exec');
//创建一个JavaScript类
function FirstPlugin(){};
//为其添加一个方法，在方法中调用exec()方法
FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){
exec(successCallback, failureCallback,
'FirstPlugin', 'sayHello', [name]);
};
//公共的对象是 FirstPlugin 实例
module.exports = new FirstPlugin();
}
);</span>6）编写程序入口html文件：index.html
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="plugins/firstplugin.js"></script>
<title>Simple</title>
</head>
<body onload="onLoaded()">
<label for="inputName">请输入名字: </label>
<input type="text" id="inputName">
<input type="button" onclick="clickHandler()" value="sayHello" />
<script>
//当DOM加载完毕，注册deviceready事件
function onLoaded(){
//注册deviceready事件监听，指定deviceready事件处理函数
document.addEventListener("deviceready",onDeviceReady,false);
}
//成功回调函数
function onSuccess(data){
alert(data);
}
//失败回调函数
function onError(err){
alert(err);
}
//deviceready 事件处理函数，PhoneGap 完成加载后调用该函数
function onDeviceReady(){
//启动所有input元素
var nodelist = document.getElementsByTagName('input');
var nodeLen = nodelist.length;
for(var i=0;i<nodeLen;i++){
nodelist[i].disabled = false;
}
}
//按钮单击事件处理函数
function clickHandler(){
//获取输入文本框中的字符，并将其作为参数传递给sayHello()方法
inputName = document.getElementById("inputName");
var dialog = com.mine.FirstPlugin;
dialog.sayHello(inputName.value, onSuccess, onError);
}
</script>
</body>
</html></span>说明：<span style="font-size:14px;"> var dialog = com.mine.FirstPlugin; <span style="font-family: Arial, Helvetica, sans-serif;">是在后面讲到的cordova_plugins.js文件中配置的</span>
dialog.sayHello(inputName.value, onSuccess, onError);</span><span style="font-size:14px;">调用的这个sayHello方法就是调用了 firstplugin.js 文件中的这个方法：</span>
<span style="font-size:14px;"><pre name="code" class="javascript"> //为其添加一个方法，在方法中调用exec()方法
FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){
exec(successCallback, failureCallback,
'FirstPlugin', 'sayHello', [name]);
};</span>7）接下来就是配置config.xml文件，在res下面新建xml文件夹，并且将config.xml 放到该文件夹下面，config.xml 代码如下：
<span style="font-size:14px;"><widget xmlns = "http://www.w3.org/ns/widgets"
id = "io.cordova.helloCordova"
version = "2.0.0">
<feature name="FirstPlugin">
<param name="android-package" value="com.customcordovaplugin.plugin.FirstPlugin"/>
</feature>
</widget></span>说明：value的值就是 FirstPlugin.java 文件的路径及名称8）配置cordova_plugin.js 文件 ，cordova_plugins.js代码如下：
<span style="font-size:14px;">cordova.define('cordova/plugin_list',function(require, exports, module){
module.exports = [{
"file": "plugins/firstplugin.js", //表示注册和连接JavaScript文件的位置
"id": "firstplugin_id", //表示唯一的标示
"clobbers": ["com.mine.FirstPlugin"] //表示可以引用的接口(用于html中调用JavaScript的方法（自定义）)
}
module.exports.metadata = {
"firstplugin_id": "1.0", //插件的版本号
}
});
</span>到这里，PhoneGap自定义插件的工作完成了，PhoneGap的学习到处是坑，大家学习的时候细心点。
相关文章分享：
http://blog.csdn.net/yuhailong626/article/details/30059679
http://blog.csdn.net/kong92917/article/details/44086821
http://blog.csdn.net/xiaoluo5238/article/details/38711331
http://blog.csdn.net/Maxbalance/article/details/50483490
http://blog.csdn.net/happyflyingave/article/details/25182369
关注公众号，分享干货，讨论技术
