您的位置：首页 > Web前端 > JavaScript

Cordova2.0(既PhoneGap)中通过Plugin实现Java和JS代码互相调用

2012-09-05 23:11 465 查看
之前写过一篇PhoneGap中Plugin用法的博客，/article/7116022.html

不过当时用的是cordova-1.7.0这个版本，而在cordova-1.7.0.js中也明确指出addPlugin方法将在2.0版本中被移除，以下为源码

// TODO: remove in 2.0.
addPlugin: function(name, obj) {
console.log("[DEPRECATION NOTICE] window.addPlugin and window.plugins will be removed in version 2.0.");
if (!window.plugins[name]) {
window.plugins[name] = obj;
}
else {
console.log("Error: Plugin "+name+" already exists.");
}
},


所以在Cordova2.0版本中Plugin的用法有些变化，接下来介绍一下Cordova2.0中Plugin的用法。

实现功能还是和之前博客一样，JS调用Java代码并传参，Java代码进行处理并返回成功回调JS代码。

1.Java代码(这一步没有变化)

一个继承自Plugin的类，并实现execute方法。

public class test01 extends Plugin{

public static final String ACTION = "test";

@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {
// TODO Auto-generated method stub
PluginResult result = null;
JSONObject jsonObj = new JSONObject();
if(ACTION.equals(action)){
try {
String testData1 = data.getString(0);
String testData2 = data.getString(1);

Log.e("test!!!", "This is testData1 " + testData1);
Log.e("test!!!", "This is testData2 " + testData2);

jsonObj.put("testData1", testData1 + " after Plugin");
jsonObj.put("testData2", testData2 + " after Plugin");

result = new PluginResult(PluginResult.Status.OK, jsonObj);

} catch (Exception e) {
// TODO Auto-generated catch block

e.printStackTrace();
}

}

return result;
}

}


2.在xml中注册

由于Cordova2.0中将之前的cordova.xml和plugins.xml合并成了一个新的配置文件config.xml，所以只用将这一个xml文件拷贝到项目res/xml下并加入Plugin的注册

<plugin name="test01" value="包名.test01"/>


name指的是他的别名(貌似必须与类名相同)，value是他真正的类名

3.js编写插件

新建一个plugin.js，内容如下：

if (typeof cordova !== "undefined") {

function testPlugin() {
this._callback;
}

testPlugin.prototype.test = function(testData1, testData2, cb) {//插件的test方法
this._callback = cb;
return cordova.exec(cb, null, 'test01', "test", [testData1, testData2]);
　　　　　//exec的参数依次是  回调函数， 执行失败的回调函数， xml中注册的插件名， 插件中用于判断的Action名， 参数
};

cordova.addConstructor(function() {
if (!window.plugins) {
window.plugins = {};
}
window.plugins.testPlugin = new testPlugin();  //addPlugin方法取消后用这种方式创建插件
});
};


4.HTML代码中调用JS并测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="plugin.js"></script>

<script type="text/javascript">

var test01 = function(){
var cb = function(data){  //回调函数
alert("1111111 : " + data.testData1 + '   and 2222222 : ' + data.testData2);
};

window.plugins.testPlugin.test("first test data", "second test data", cb);

}
</script>

</head>
<body>

<button type="button" onclick="test01()">Click Me!</button>

</body>
</html>


代码已上传至gitHub，地址是 https://github.com/seeSaber/pluginTest 欢迎拍砖^_^
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航