您的位置: 首页  >  文章  >  phoneGap插件

phoneGap插件

分类: 文章 • 2025-01-27 23:07:40
快过年回家了，为了不阉割phonegap开发的介绍，在今天完成phonegap的最后一个介绍，在上一篇中提到过的如何开发phonegap的插件。
目前PhoneGap虽然提供了很多的API，但是我们也很容易发现，他有很多地方不能满足我们的需求，比如发短信。我也将介绍如何开发一个针对PhoneGap发短信的Plugin。（Android 版本）。
1、创建一个Android工程，创建之后的目录结构如图：
phoneGap插件

2、把PhoneGap的android版jar包、javascript和xml文件夹加入工程。（参照上一篇中的做法）目录结构：
phoneGap插件

3、新增一个类MessagePlugin
这个类就是负责发送短信功能的具体类，可以调用发送短信的android API，当然如果是其他功能，则调用相应的API，但是当使用这个API时记得申请权限。
具体代码：
Java代码 phoneGap插件 phoneGap插件phoneGap插件
  1. package com.phonegap.kiddyu.plugin;
  3. import org.json.JSONArray;
  4. import org.json.JSONException;
  5. import org.json.JSONObject;
  7. import android.telephony.SmsManager;
  9. import com.phonegap.api.Plugin;
  10. import com.phonegap.api.PluginResult;
  12. public class MessagePlugin extends Plugin {
  14. private static final String SEND = "send";
  16. @Override
  17. public PluginResult execute(String action, JSONArray data, String callbackId) {
  18. PluginResult result;
  19. if (SEND.equals(action)) {
  20. try {
  21. JSONObject jsonObj = new JSONObject();
  22. String target = data.getString(0);
  23. String content = data.getString(1);
  24. SmsManager sms = SmsManager.getDefault();
  25. sms.sendTextMessage(target, null, content, null, null);
  26. jsonObj.put("target", target);
  27. jsonObj.put("content", content);
  28. result = new PluginResult(PluginResult.Status.OK, jsonObj);
  29. } catch (JSONException ex) {
  30. result = new PluginResult(PluginResult.Status.JSON_EXCEPTION);
  31. }catch(IllegalArgumentException ex){
  32. result = new PluginResult(PluginResult.Status.ERROR);
  33. }
  34. } else {
  35. result = new PluginResult(PluginResult.Status.INVALID_ACTION);
  36. }
  38. return result;
  39. }
  41. }
package com.phonegap.kiddyu.plugin; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.telephony.SmsManager; import com.phonegap.api.Plugin; import com.phonegap.api.PluginResult; public class MessagePlugin extends Plugin { private static final String SEND = "send"; @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; } }

4、为phonegap增加一个javascript的API
在工程目录www/js下面增加一个javascript文件：phonegapPlugin.js，然后加入代码：
Javascript代码 phoneGap插件 phoneGap插件phoneGap插件
  1. var Message = function(){};
  3. Message.prototype = {
  4. send: function(success, error, target, content){
  5. PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
  6. }
  7. };
  9. PhoneGap.addConstructor(function() {
  10. PhoneGap.addPlugin("message", new Message());
  11. });
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()); });

关键的方法是PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
做一下简单的介绍：
success：方法执行成功时调用该函数；
error：方法执行失败时调用该函数；
"MessagePlugin"：类名，最好与前面创建的Java类一个样；
"send"：插件类中的参数String action；
[target, content]：一个数据，插件类中的参数JSONObject data；

PhoneGap.addPlugin("message", new Message());中的"Message"是你调用send方法时的实例名称。（不知道这样叫是否准确）


5、将自己的插件加入到PhoneGap的配置中
打开目录中res/xml/plugins.xml文件，在最后面加上
<plugin name="MessagePlugin" value="com.phonegap.kiddyu.plugin.MessagePlugin"/>
注意name要和你的插件类名一致！ value是类的包名.类名。

插件到这里就算完成了，让我们测试一下到底能不能工作吧。
加入一个简单的html页面（上一篇已经介绍怎么开发，这里不做重复介绍），代码参照下面：
Html代码 phoneGap插件 phoneGap插件phoneGap插件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" charset="utf-8" src="../js/jquery_1_6_4.js"></script>
  6. <script type="text/javascript" charset="utf-8" src="../js/phonegap-1.2.0.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="../js/phonegapPlugin.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. var onSend = function(){
  12. var success = function(data){
  13. alert("tel : " + data.target + ', and content : ' + data.content);
  14. };
  16. var error = function(e){
  17. alert(e);
  18. };
  20. var tel = $('#tel').val();
  21. var content = $('#content').val();
  22. window.plugins.message.send(success, error, tel, content);
  23. };
  25. $('#send').bind('click', onSend);
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <div id="messageDiv">
  31. <input type="tel" id="tel" value="5556" />
  32. <textarea rows="20" cols="25" id="content"></textarea>
  33. <button type="button" id="send">Send Me</button>
  34. </div>
  35. </body>
  36. </html>
<!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_1_6_4.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>

注意在页面中加入你自己的phonegapPlugin.js，而且顺序必须在phonegap.js之后。
其他的都参照上一篇中，修改自己的Activity就开始测试吧！一下是测试截图：

phoneGap插件

相关推荐