PhoneGap Plugin的创建步骤

PhoneGap在Android的配置已经有相应的文章,就不介绍了,发个链接:http://www.cnblogs.com/lee0oo0/articles/2534677.html

注意:我们插件可能只需要用到一个,但是在上面链接所列出的都必须全部显式声明在xml文件中。而且我们使用的android开发版本需要在2.3.3或以上,否者会出现莫名的错 误。以下以一个例子说明步骤,重要部分会使用不同的颜色进行表明。

 

 

Html文件: 

<! DOCTYPE HTML > 

<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple Plugin Demo</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="simplePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
    document.addEventListener('deviceready', function() {

        var btn = document.getElementById("hello"); //获得Button的ID
        var textbox = document.getElementById("name"); //获得输入框的ID
        var output = document.getElementById("output"); //获得输出的ID

        btn.addEventListener('click', function() { //为Button添加点击的事件监听器

            var text = textbox.value; //得到输入框的的内容

 
            
        // window.plugins是固定的;  

 

//simpleplugin是JavaScript中PhoneGap.addPlugin('simpleplugin', new SimplePlugin()); 的那个'simpleplugin'插件名称 

//hello是JavaScript中 SimplePlugin.prototype.hello方法的名字"hello"

window.plugins.simpleplugin.hello(text, function(result) { //成功时执行,传入的是Javascript中对象方法的参数                

output.innerHTML = result;//把输入框的的内容的内容显示在输出div上
            }, function(err) { //错误时执行
                // failure callback
                output.innerHTML = 'err: ' + err
                        + ', Failed to invoke simple plugin';
            });
        });

    }, true);
</script>

</head>
<body>
    <p>
        <label for="name">Enter Name: </label> <input type="text" name="name"
            id="name" value="" />
        <button id="hello">Say Hello</button>
    </p>

    <p>
    <div id="output"></div>
    </p>
</body>

</html>  


JavaScript文件:

var SimplePlugin =  function() {};

SimplePlugin.prototype.hello =  function(name, successCallback, failureCallback) {
     //  exec 內的參數分別是: Success Callback, Failure Callback, Registered Plugin name:就是在XML文件配置的那个所对应的name,
    // 'hello'是传入Java文件的 execute方法中的参数String action 
   //  name (從 HTML 傳進來的參數)
     return PhoneGap.exec(successCallback, failureCallback, 'SimplePlugin',
            'hello', [ name ]);
};

//  这里是 PhoneGap Plugin 的註冊,Plugin 的名稱還有 Native Class 的名稱別打錯了,就是我們剛剛輸入的那些
PhoneGap.addConstructor( function() {
     //  Register the javascript plugin with PhoneGap
    PhoneGap.addPlugin('simpleplugin',  new SimplePlugin()); // simpleplugin是插件名称,  new  SimplePlugin()实例化的是本Javascript的类名 

});  


JAVA文件:

package org.apache.cordova.example;

import java.util.Date;
import org.apache.cordova.api.PluginResult.Status;
import org.json.JSONArray;
import org.json.JSONException;
import com.phonegap.api.Plugin;
import com.phonegap.api.PluginResult;
public  class SimplePlugin  extends Plugin {

     public  static String ACTION_HELLO = "hello";

    @Override
     public PluginResult execute(String action, JSONArray data, String callbackId) { //action和 data是javascript传进来的参数
 
        PluginResult pluginResult =  null;

         if (ACTION_HELLO.equals(action)) {
            String name;

             try {
                name = data.getString(0);
                String result = "Hello " + name + "! The time is "
                        + ( new Date()).toString();
                pluginResult =  new PluginResult(Status.OK, result);

                 return pluginResult;

            }  catch (JSONException e) {
                pluginResult =  new PluginResult(Status.JSON_EXCEPTION,
                        "missing argument name");
            }
        }  else {
            pluginResult =  new PluginResult(Status.INVALID_ACTION,
                    "Allowed actions is hello");
        }

         return pluginResult;
    }

}  


XML文件:

< plugins > 
     < plugin  name ="App"  value ="org.apache.cordova.App" />
     < plugin  name ="Geolocation"  value ="org.apache.cordova.GeoBroker" />
     < plugin  name ="Device"  value ="org.apache.cordova.Device" />
     < plugin  name ="Accelerometer"  value ="org.apache.cordova.AccelListener" />
     < plugin  name ="Compass"  value ="org.apache.cordova.CompassListener" />
     < plugin  name ="Media"  value ="org.apache.cordova.AudioHandler" />
     < plugin  name ="Camera"  value ="org.apache.cordova.CameraLauncher" />
     < plugin  name ="Contacts"  value ="org.apache.cordova.ContactManager" />
     < plugin  name ="File"  value ="org.apache.cordova.FileUtils" />
     < plugin  name ="NetworkStatus"  value ="org.apache.cordova.NetworkManager" />
     < plugin  name ="Notification"  value ="org.apache.cordova.Notification" />
     < plugin  name ="Storage"  value ="org.apache.cordova.Storage" />
     < plugin  name ="Temperature"  value ="org.apache.cordova.TempListener" />
     < plugin  name ="FileTransfer"  value ="org.apache.cordova.FileTransfer" />
     < plugin  name ="Capture"  value ="org.apache.cordova.Capture" />
     < plugin  name ="Battery"  value ="org.apache.cordova.BatteryListener" />
     < plugin  name ="SplashScreen"  value ="org.apache.cordova.SplashScreen" />
    <!--添加的插件-->
     < plugin  name ="SimplePlugin"  value ="org.apache.cordova.example.SimplePlugin"   /> //name是参见的名字 ;value是创建插件的全称类名

</plugins>  

 

转载于:https://www.cnblogs.com/lee0oo0/archive/2012/06/07/2540059.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值