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";

	@Override
	public 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