PhoneGap插件开发实例

目前PhoneGap虽然提供了很多的API，但是我们也很容易发现，他有很多地方不能满足我们的需求，比如发短信。我也将介绍如何开发一个针对PhoneGap发短信的Plugin。（Android 版本）。

1、创建一个Android工程，创建之后的目录结构如图：

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

3、新增一个类MessagePlugin

这个类就是负责发送短信功能的具体类，可以调用发送短信的android API，当然如果是其他功能，则调用相应的API，但是当使用这个API时记得申请权限。

具体代码：

    
1. package
2.   
3. import
4. import
5. import
6.   
7. import
8.   
9. import
10. import
11.   
12. publicclass MessagePlugin extends
13.       
14. privatestaticfinal String SEND = "send";  
15.       
16. @Override
17. public
18.         PluginResult result;  
19. if
20. try
21. new
22. 0);  
23. 1);  
24.                 SmsManager sms = SmsManager.getDefault();  
25. null, content, null, null);  
26. "target", target);  
27. "content", content);  
28. new
29. catch
30. new
31. catch(IllegalArgumentException ex){  
32. new
33.             }  
34. else
35. new
36.         }  
37.   
38. return
39.     }  
40.   
41. }

1. package
2.   
3. import
4. import
5. import
6.   
7. import
8.   
9. import
10. import
11.   
12. public class MessagePlugin extends
13.       
14. private static final String SEND = "send";  
15.       
16. @Override
17. public
18.         PluginResult result;  
19. if
20. try
21. new
22. 0);  
23. 1);  
24.                 SmsManager sms = SmsManager.getDefault();  
25. null, content, null, null);  
26. "target", target);  
27. "content", content);  
28. new
29. catch
30. new
31. catch(IllegalArgumentException ex){  
32. new
33.             }  
34. else
35. new
36.         }  
37.   
38. return
39.     }  
40.   
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，然后加入代码：

PhoneGap插件开发实例

1. var Message = function(){};  
2.   
3. Message.prototype = {  
4. function(success, error, target, content){  
5. "MessagePlugin", "send", [target, content]);  
6.         }  
7. };  
8.   
9. PhoneGap.addConstructor(function() {  
10. "message",  new
11. });

1. var Message = function(){};  
2.   
3. Message.prototype = {  
4. function(success, error, target, content){  
5. "MessagePlugin", "send", [target, content]);  
6.         }  
7. };  
8.   
9. PhoneGap.addConstructor(function() {  
10. "message", new
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页面（上一篇已经介绍怎么开发，这里不做重复介绍），代码参照下面：

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. onSend = function(){  
11.               
12. success = function(data){  
13.                 alert("tel : " + data.target + ', and content : ' + data.content);  
14.             };  
15.               
16. error = function(e){  
17.                 alert(e);  
18.             };  
19.               
20. tel
21. content
22.             window.plugins.message.send(success, error, tel, content);  
23.         };  
24.           
25.         $('#send').bind('click', onSend);  
26.     });  
27. </script>
28. </head>
29. <body>
30. <div >
31. <inputtype="tel"value="5556"/>
32. <textarearows="20"cols="25"></textarea>
33. <buttontype="button">Send Me</button>
34. </div>
35. </body>
36. </html>

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. onSend = function(){  
11.               
12. success = function(data){  
13.                 alert("tel : " + data.target + ', and content : ' + data.content);  
14.             };  
15.               
16. error = function(e){  
17.                 alert(e);  
18.             };  
19.               
20. tel
21. content
22.             window.plugins.message.send(success, error, tel, content);  
23.         };  
24.           
25.         $('#send').bind('click', onSend);  
26.     });  
27. </script>
28. </head>
29. <body>
30. <div >
31. <input type="tel"  value="5556" />
32. <textarea rows="20" cols="25" ></textarea>
33. <button type="button" >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 >
    <input type="tel"  value="5556" />
    <textarea rows="20" cols="25" ></textarea>
    <button type="button" >Send Me</button>
  </div>
</body>
</html>

注意在页面中加入你自己的phonegapPlugin.js，而且顺序必须在phonegap.js之后。

其他的都参照上一篇中，修改自己的Activity就开始测试吧！一下是测试截图：

秒客网

PhoneGap插件开发实例

相关文章