Android中的JSBridge是H5與Native通信的橋梁，其作用是實現H5與Native間的雙向通信。要實現H5與Native的雙向通信，解決如下四個問題即可：
1、Java如何調用JavaScript
2、JavaScript如何調用Java
3、方法參數以及回調如何處理
4、通信的數據格式是怎么樣的
下面從以上問題依次開始討論:
1、Java如何調用JavaScript
在Android 中，Java與JavaScript的一切交互都是依托于WebView的?？赏ㄟ^如下方法來完成，其中function（）即為JavaScript代碼，來實現相應的具體H5層功能
WebView.loadUrl("javascript:function()");
2、JavaScript如何調用Java
要實現在JavaScript中調用Java，就需要在JavaScript中有觸發Java方法的對象和方法。在JavaScript中，當調用window對象的prompt方法時，會觸發Java中的WebChromeClient對象的onJsPrompt方法，因此可以利用這個機制來實現js調用native的代碼
3、方法參數以及回調處理
任何IPC通信都涉及到參數序列化的問題，同理，Java與JavaScript之間只能傳遞基礎類型（包括基本類型和字符串），不包括其他對象或者函數。所以可以采用json格式來傳遞數據。JavaScript與Java相互調用不能直接獲取返回值，只能通過回調的方式來獲取返回結果。
4、通信的數據格式
Java與JavaScript通信需要遵循一定的通信協議，可以仿照HTTPS協議來將此協議定義為jsbridge協議：
jsbridge://className:port/methodName?jsonObj
當js調用native功能時，應當指定native層要完成某個功能調用的類名（className）和方法名（methodName），以及js傳遞過來的參數（jsonObj）。port值是指當native需要將操作結果返回給js時，在js中定義一個callback，并將這個callback存儲在指定的位置上，這個port就定義了callback的存儲位置。
JSBridge的具體工作流程圖如上所示：
1、js觸發調用native層的行為
JSBridge.call(className, methodName, params, callback);
將call方法中的參數組合成jsbridge協議格式的url。然后通過prompt方法將url傳遞到native層。
window.prompt(url);
2、通過WebChromeClient來獲取js傳遞過來的url.
public class JSBridgeWebChromeClient extends WebChromeClient {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
result.confirm(JSBridge.callJava(view, message));
return true;
}
}
3、JSBridge類管理暴露給前端方法，前端調用的方法應該在此類中注冊才可使用。register的實現是從Map中查找key是否存在，不存在則反射取得對應class中的所有方法,具體方法是在BridgeImpl中定義的，方法包括三個參數分別為WebView、JSONObject、CallBack。如果滿足條件，則將所有滿足條件的方法put到map中。
private static Map<String, HashMap<String, Method>> exposedMethods = new HashMap<>();
public static void register(String exposedName, Class<? extends IBridge> clazz) {
if (!exposedMethods.containsKey(exposedName)) {
try {
exposedMethods.put(exposedName, getAllMethod(clazz));
} catch (Exception e) {
e.printStackTrace();
}
}
}
JSBridge類中的callJava方法就是將js傳遞過來的URL解析，根據將要調用的類名從剛剛建立的Map中找出，根據方法名調用具體的方法，并將解析出的三個參數傳遞進去。
public static String callJava(WebView webView, String uriString) {
String methodName = "";
String className = "";
String param = "{}";
String port = "";
if (!TextUtils.isEmpty(uriString) && uriString.startsWith("JSBridge")) {
Uri uri = Uri.parse(uriString);
className = uri.getHost();
param = uri.getQuery();
port = uri.getPort() + "";
String path = uri.getPath();
if (!TextUtils.isEmpty(path)) {
methodName = path.replace("/", "");
}
}
if (exposedMethods.containsKey(className)) {
HashMap<String, Method> methodHashMap = exposedMethods.get(className);
if (methodHashMap != null && methodHashMap.size() != 0 && methodHashMap.containsKey(methodName)) {
Method method = methodHashMap.get(methodName);
if (method != null) {
try {
method.invoke(null, webView, new JSONObject(param), new Callback(webView, port));
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
return null;
}
4、CallBack類是用來回調js中回調方法的Java對應類。Java層處理好的返回結果是通過CallBack類來實現的。在這個回調類中傳遞的參數是JSONObject（返回結果）、WebView和port，port應與js傳遞過來的port相對應。
private static Handler mHandler = new Handler(Looper.getMainLooper());
private static final String CALLBACK_JS_FORMAT = "javascript:JSBridge.onFinish('%s', %s);";
private String mPort;
private WeakReference<WebView> mWebViewRef;
public Callback(WebView view, String port) {
mWebViewRef = new WeakReference<>(view);
mPort = port;
}
public void apply(JSONObject jsonObject) {
final String execJs = String.format(CALLBACK_JS_FORMAT, mPort, String.valueOf(jsonObject));
if (mWebViewRef != null && mWebViewRef.get() != null) {
mHandler.post(new Runnable() {
@Override
public void run() {
mWebViewRef.get().loadUrl(execJs);
}
});
}
}
5、JSBridgeImpl類中定義所有暴露給前端的方法的具體實現。本文以showToast為例來通過native代碼顯示toast，并給出js的回調函數，返回一個JSONObject對象。
public static void showToast(WebView webView, JSONObject param, final Callback callback) {
String message = param.optString("msg");
Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
if (null != callback) {
try {
JSONObject object = new JSONObject();
object.put("key", "value");
object.put("key1", "value1");
callback.apply(getJSONObject(0, "ok", object));
} catch (Exception e) {
e.printStackTrace();
}
}
}
6、在js中通過
JSBridge.call('bridge','showToast',{'msg': 'Hello'}, function(res){alert(JSON.stringi
fy(res))})"
即可調用在Java層定義的showToast方法，調用前不要忘記在java層的JSBridge中注冊該方法。
JSBridge.register("bridge", BridgeImpl.class);
二、總結：
JSBridge的基本原理為：
H5->通過某種方式觸發一個url->Native捕獲到url,進行分析->原生做處理->Native調用H5的JSBridge對象傳遞回調。如下圖
三、安全性：
1、Android4.2以下，addJavascriptInterface方法有安全漏洞，js代碼可以獲取到Java層的運行時對象，來偽造當前用戶執行惡意代碼。
2、ios7以下，JavaScript無法調用native代碼。
3、通過js聲明的對象，是通過loadUrl注入到頁面中的，所以這個對象是js對象，而不是Java對象，沒有getClass等Object方法，因此也無法獲得Runtime對象，避免了惡意代碼的注入。
4、JSBridge采用URL解析的交互方式，是一套成熟的解決方案，便于拓展，無重大安全性問題。
