Android中的JSBridge是H5與Native通信的橋梁，其作用是實現(xiàn)H5與Native間的雙向通信。要實現(xiàn)H5與Native的雙向通信，解決如下四個問題即可：
1、Java如何調(diào)用JavaScript
2、JavaScript如何調(diào)用Java
3、方法參數(shù)以及回調(diào)如何處理
4、通信的數(shù)據(jù)格式是怎么樣的

下面從以上問題依次開始討論:

1、Java如何調(diào)用JavaScript

在Android 中，Java與JavaScript的一切交互都是依托于WebView的。可通過如下方法來完成，其中function（）即為JavaScript代碼，來實現(xiàn)相應(yīng)的具體H5層功能

WebView.loadUrl("javascript:function()");

2、JavaScript如何調(diào)用Java

要實現(xiàn)在JavaScript中調(diào)用Java，就需要在JavaScript中有觸發(fā)Java方法的對象和方法。在JavaScript中，當(dāng)調(diào)用window對象的prompt方法時，會觸發(fā)Java中的WebChromeClient對象的onJsPrompt方法，因此可以利用這個機(jī)制來實現(xiàn)js調(diào)用native的代碼

3、方法參數(shù)以及回調(diào)處理

任何IPC通信都涉及到參數(shù)序列化的問題，同理，Java與JavaScript之間只能傳遞基礎(chǔ)類型（包括基本類型和字符串），不包括其他對象或者函數(shù)。所以可以采用json格式來傳遞數(shù)據(jù)。JavaScript與Java相互調(diào)用不能直接獲取返回值，只能通過回調(diào)的方式來獲取返回結(jié)果。

4、通信的數(shù)據(jù)格式

Java與JavaScript通信需要遵循一定的通信協(xié)議，可以仿照HTTPS協(xié)議來將此協(xié)議定義為jsbridge協(xié)議：

jsbridge://className:port/methodName?jsonObj

當(dāng)js調(diào)用native功能時，應(yīng)當(dāng)指定native層要完成某個功能調(diào)用的類名（className）和方法名（methodName），以及js傳遞過來的參數(shù)（jsonObj）。port值是指當(dāng)native需要將操作結(jié)果返回給js時，在js中定義一個callback，并將這個callback存儲在指定的位置上，這個port就定義了callback的存儲位置。

jsbridge原理圖.png

JSBridge的具體工作流程圖如上所示：

1、js觸發(fā)調(diào)用native層的行為

JSBridge.call(className, methodName, params, callback);

將call方法中的參數(shù)組合成jsbridge協(xié)議格式的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類管理暴露給前端方法，前端調(diào)用的方法應(yīng)該在此類中注冊才可使用。register的實現(xiàn)是從Map中查找key是否存在，不存在則反射取得對應(yīng)class中的所有方法,具體方法是在BridgeImpl中定義的，方法包括三個參數(shù)分別為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解析，根據(jù)將要調(diào)用的類名從剛剛建立的Map中找出，根據(jù)方法名調(diào)用具體的方法，并將解析出的三個參數(shù)傳遞進(jìn)去。

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類是用來回調(diào)js中回調(diào)方法的Java對應(yīng)類。Java層處理好的返回結(jié)果是通過CallBack類來實現(xiàn)的。在這個回調(diào)類中傳遞的參數(shù)是JSONObject（返回結(jié)果）、WebView和port，port應(yīng)與js傳遞過來的port相對應(yīng)。

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類中定義所有暴露給前端的方法的具體實現(xiàn)。本文以showToast為例來通過native代碼顯示toast，并給出js的回調(diào)函數(shù)，返回一個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))})"

即可調(diào)用在Java層定義的showToast方法，調(diào)用前不要忘記在java層的JSBridge中注冊該方法。

JSBridge.register("bridge", BridgeImpl.class);

二、總結(jié)：

JSBridge的基本原理為：
H5->通過某種方式觸發(fā)一個url->Native捕獲到url,進(jìn)行分析->原生做處理->Native調(diào)用H5的JSBridge對象傳遞回調(diào)。如下圖

h5與原生頁面通過jsbridge交互.png

三、安全性：

1、Android4.2以下，addJavascriptInterface方法有安全漏洞，js代碼可以獲取到Java層的運(yùn)行時對象，來偽造當(dāng)前用戶執(zhí)行惡意代碼。
2、ios7以下，JavaScript無法調(diào)用native代碼。
3、通過js聲明的對象，是通過loadUrl注入到頁面中的，所以這個對象是js對象，而不是Java對象，沒有g(shù)etClass等Object方法，因此也無法獲得Runtime對象，避免了惡意代碼的注入。
4、JSBridge采用URL解析的交互方式，是一套成熟的解決方案，便于拓展，無重大安全性問題。