phonegap 提供了一系列插件,封装好了native的功能,可以在js层面调用,访问native的功能,但是,当这些插件不能满足需求的时候,就需要自己封装插件了。
过程很简单
1 .写类继承 Plugin类
覆盖其中execute方法。
例如
MessagePlugin 继承Plugin类,实现发短信操作 。
@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {
PluginResult result;
if (SEND.equals(action)) {
try {
JSONObject jsonObj = new JSONObject();
String target = data.getString(0);
String content = data.getString(1);
SmsManager sms = SmsManager.getDefault();
sms.sendTextMessage(target, null, content, null, null);
jsonObj.put("target", target);
jsonObj.put("content", content);
result = new PluginResult(PluginResult.Status.OK, jsonObj);
} catch (JSONException ex) {
result = new PluginResult(PluginResult.Status.JSON_EXCEPTION);
} catch (IllegalArgumentException ex) {
result = new PluginResult(PluginResult.Status.ERROR);
}
} else {
result = new PluginResult(PluginResult.Status.INVALID_ACTION);
}
return result;
}
2.在res/xml/plugins.xml文件中,声明插件类. 实际上是插件名和对应java文件的映射.
<plugin name="MessagePlugin" value="com.phonegap.plugin.MessagePlugin"/>
3 .在assert/www/js/文件夹下 ,增加对应此plugin的 js文件。
var Message = function(){};
Message.prototype = {
send: function(success, error, target, content){
PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
}
};
PhoneGap.addConstructor(function() {
PhoneGap.addPlugin("message", new Message());
});
新建了名为message的插件,对外提供send方法。实际上当调用message插件send方法时候,会调用MessagePlugin类。success和error分别为调用成功 和 失败的回掉函数名称.PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
4.使用刚刚写好的插件 例子
注意将phonegapPlugin.js写到声明里面。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegapPlugin.js"></script>
<script type="text/javascript">
$(function(){
var onSend = function(){
var success = function(data){
alert("tel : " + data.target + ', and content : ' + data.content);
};
var error = function(e){
alert(e);
};
var tel = $('#tel').val();
var content = $('#content').val();
window.plugins.message.send(success, error, tel, content);
};
$('#send').bind('click', onSend);
});
</script>
</head>
<body>
<div id="messageDiv">
<input type="tel" id="tel" value="5556" />
<textarea rows="20" cols="25" id="content"></textarea>
<button type="button" id="send">Send Me</button>
</div>
</body>
</html>