PhoneGap插件开发 js与Java之间的交互例子 详解

PhoneGap中js与Java之间相互调用有两种方式，分别是同步和异步。

1、同步方式：js调用Java类的方法，然后Java类的方法直接返回一个值给js端，这跟我们Java方法间的调用是差不多一个意思；

2、异步方式：js调用Java类的方法，但是Java类的方法可能要处理一系列的事情，比如请求数据，那么等Java类的方法执行完，通过回调把结果返回给js端，这就是异步方式，说白了其实就像是Android同步与异步的Http请求...

那么，js是如何来实现调用Java方法呢？其实就是采用PhoneGap插件方式，下面就以Android为例，来谈一谈js与java之间的交互~

开发环境搭建请参考PhoneGap 开发环境搭建，PhoneGap版本采用的是最新版 PhoneGap2.9.1

PhoneGap底层框架的实现，请参考另一篇文章，你绝对会有收获的！！PhoneGap 底层框架实现原理详解

首先导入phonegap-2.9.1\lib\android\framework这个Library，以及phonegap-2.9.1\lib\android\test这个测试工程~结构如图所示

                  

第一步，创建一个自定义插件类MyPlugin，继承CordovaPlugin，然后重写其execute方法，因为js默认就是调用MyPlugin的execute方法~~

package org.apache.cordova;import org.apache.cordova.api.CallbackContext;import org.apache.cordova.api.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;import android.util.Log;public class MyPlugin extends CordovaPlugin {private String helloAction = "helloAction";@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {Log.i("test", action);if (action.equals(helloAction)) {callbackContext.success("congratulation,success");return true;} else {callbackContext.error("sorry,error");return false;}}}

第二步，打开我们项目的res/xml/config.xml文件，增加以下内容~

<feature name="MyPlugin">        <param name="android-package" value="com.newland.phonegap.MyPlugin"/>    </feature>

第三步，修改cordova.android.js，添加以下代码，注意添加的位置！！

/** * 自定义插件*/cordova.define("cordova/plugin/console",function(require, exports, module) {var exec = require('cordova/exec');var modulemapper = require('cordova/modulemapper');var console = {hello:function(msg){exec(function(succseeMsg){ // 成功的回调方法alert(succseeMsg);},function(errorMsg){ // 出错的回调方法alert(successMsg);},"MyPlugin","helloAction",[]);}};module.exports = console;});define("cordova/plugin/console/symbols", function(require, exports, module) {var modulemapper = require('cordova/modulemapper');modulemapper.clobbers('cordova/plugin/console', 'console');});

注意代码添加的位置（后面那几个括号），否则会影响其他代码的功能...这里附上一张截图~~

第四步，修改main.js，在“deviceready”初始化执行的函数后面，添加一句调用插件的代码

var deviceInfo = function() {    document.getElementById("platform").innerHTML = device.platform;    document.getElementById("version").innerHTML = device.version;    document.getElementById("uuid").innerHTML = device.uuid;    document.getElementById("name").innerHTML = device.name;    document.getElementById("width").innerHTML = screen.width;    document.getElementById("height").innerHTML = screen.height;    document.getElementById("colorDepth").innerHTML = screen.colorDepth;    var el = document.getElementById("cordova");    if (el) {    el.innerHTML = device.cordova;    }    console.hello("helloAction"); // 调用插件};

run起来~~弹出了成功的回调，搞定~~~~~~~~~~~~~~

最后，附上修改后的Demo代码，运行有问题的可以下载下来看看：PhoneGap2.9.1插件开发 Demo下载

环境搭建有问题或者报错的可以参考这两篇博客：

PhoneGap 工程导入出错的解决办法
完美解决Error initializing Cordova:Class not found