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-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"); // 呼叫外掛
};

環境搭建有問題或者報錯的可以參考這兩篇部落格：