JSBridge解析

基礎知識

JS和Native之間的通信方式

在Android開發中，能實作Javascript與Native代碼通信的，有4種途徑：

1.JavascriptInterface

2.WebViewClient.shouldOverrideUrlLoading()

3.WebChromeClient.onConsoleMessage()

4.WebChromeClient.onJsPrompt()
Native調用Javascript使用loadUrl()方法。

此處涉及到了WebViewClient和WebChromeCLient:

WebViewClient主要幫助WebView處理各種通知、請求事件的，比如：

- onPageStarted(WebView view, String url, Bitmap favicon)

- onPageFinished(WebView view, String url)

- onLoadResource(WebView view, String url)

- onReceivedError(WebView view, int errorCode, String description, String failingUrl)

- onReceivedHttpAuthRequest(WebView view,HttpAuthHandler handler, String host, String realm)

- shouldOverrideUrlLoading(WebView view, String url)//将在webview上點選的url傳遞過來，java代碼決定是否攔截

WebChromeClient主要輔助WebView處理Javascript的對話框、網站圖示、網站title、加載進度等比如

- onProgressChanged(WebView view, int newProgress)

- onReceivedTitle(WebView view, String title)

- onReceivedIcon(WebView view, Bitmap icon)

- onJsAlert(WebView view, String url, String message,JsResult result)//JS需要彈出警告框

- onJsConfirm(WebView view, String url, String message,JsResult result)//JS需要彈出确認框

- onJsPrompt(WebView view, String url, String message,String defaultValue, JsPromptResult result)//JS需要彈出提示資訊

- onCloseWindow(WebView window)

JsBridge的實作

JsBridge中，JAVA和JS互相調用前，都需要注冊方法。

//Native中注冊方法，提供給JS調用（非webview原生方法，需要自定義）
webView.registerHandler("submitFromWeb", new BridgeHandler() {

    @Override
    public void handler(String data, CallBackFunction function) {
        Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
        function.onCallBack("submitFromWeb exe, response data 中文 from Java");
    }

});

//JS中注冊方法，提供給Native調用
bridge.registerHandler("functionInJs", function(data, responseCallback) {
    document.getElementById("show").innerHTML = ("data from Java: = " + data);
    var responseData = "Javascript Says Right back aka!";
    responseCallback(responseData);
});

JAVA注冊方法：

自定義webview調用registerHandler(String handlerName, BridgeHandler handler)後，将handler存入一個messageHandlers的Map中，鍵為handlerName，也就是JS調JAVA時需要指定的調用名稱，handler就是JS調用JAVA是所執行的方法。

//JAVA方面，webview進行方法注冊
public void registerHandler(String handlerName, BridgeHandler handler) {
    if (handler != null) {
        messageHandlers.put(handlerName, handler);
    }
}

JS注冊方法：

在将 WebViewJavascriptBridge.js 檔案load到webview中後，JS中會執行connectWebViewJavascriptBridge方法，進行JS方面的調用方法注冊。注冊後，會将回調函數存儲到messageHandlers這個對象中（可以了解為MAP，鍵為注冊的函數名）。

//JS注冊方法的形式，第一個參數是JAVA調用JS需要指定的方法名稱，第二個函數參數是具體執行的方法。
bridge.registerHandler("functionInJs", function(data, responseCallback) {})

//注冊實際調用的方法
function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

此處建立WebViewJavascriptBridge.js和html界面的連接配接，有兩種方法：

* 在webview加載完html界面後（onPageFinished方法可以監聽到），再次通過webview.loadUrl(“”)方法，将WebViewJavascriptBridge.js的加入到該webview中。

* 如果加載的是本地的（資源檔案中的或者已經下載下傳下來的）html界面，可以将WebViewJavascriptBridge.js添加到需要加載的界面的頭部，再進行webview.loadDataWithBaseURL()或者webview.loadData()方法進行界面加載。

//WebViewJavascriptBridge.js中部分代碼
...
//進行全局的參數申明，用于html界面判斷是否已經進行了bridge的初始化
var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
    init: init,
    send: send,
    registerHandler: registerHandler,
    callHandler: callHandler,
    _fetchQueue: _fetchQueue,
    _handleMessageFromNative: _handleMessageFromNative
};
var doc = document;
_createQueueReadyIframe(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');//注冊dom事件
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);//釋出事件
...

//加載的html界面中的部分代碼
...
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {//如果WebViewJavascriptBridge有定義，則直接執行回調函數
        callback(WebViewJavascriptBridge)
    } else {//WebViewJavascriptBridge沒有定義，那麼監聽相關事件，等待激活
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}
//直接調用JS方法，傳遞回調函數
connectWebViewJavascriptBridge(function(bridge) {
    bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': '測試中文!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });
    bridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });
})
...

JAVA調用JS方法

一般來講，JAVA調用JS使用callHandler(String handlerName, String data, CallBackFunction callBack)方法，也可以使用send(String data)方法進行預設方法（需要在JS調用端進行處理）的調用。

//BridgeWebView部分代碼
...
//此方法為調用JS方法最終會調用到的方法
//參數：handlerName-JS注冊的方法名稱；data-傳遞的資料；responseCallback-調用成功後的回調函數
private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
    Message m = new Message();
    if (!TextUtils.isEmpty(data)) {
        m.setData(data);
    }
    if (responseCallback != null) {
        String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
        responseCallbacks.put(callbackStr, responseCallback);
        m.setCallbackId(callbackStr);
    }
    if (!TextUtils.isEmpty(handlerName)) {
        m.setHandlerName(handlerName);
    }
    queueMessage(m);
}

private void queueMessage(Message m) {
    if (startupMessage != null) {
        startupMessage.add(m);
    } else {
        dispatchMessage(m);
    }
}

void dispatchMessage(Message m) {
    String messageJson = m.toJson();
    //escape special characters for json string
    messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
    messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
    String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        this.loadUrl(javascriptCommand);
    }
}
...

Message類的定義

//用于在JAVA和JS之間通訊的重要類
public class Message {
    private String callbackId; //回調函數的唯一确認值
    private String responseId; //responseId
    private String responseData; //responseData
    private String data; //傳遞的資料
    private String handlerName; //調用函數注冊的名稱
    //一些資料轉化需要的資料辨別符
    private final static String CALLBACK_ID_STR = "callbackId";
    private final static String RESPONSE_ID_STR = "responseId";
    private final static String RESPONSE_DATA_STR = "responseData";
    private final static String DATA_STR = "data";
    private final static String HANDLER_NAME_STR = "handlerName";

        ...set and gets...
    //将message類執行個體轉化為json對象
    public String toJson() {
        JSONObject jsonObject= new JSONObject();
        try {
            jsonObject.put(CALLBACK_ID_STR, getCallbackId());
            jsonObject.put(DATA_STR, getData());
            jsonObject.put(HANDLER_NAME_STR, getHandlerName());
            jsonObject.put(RESPONSE_DATA_STR, getResponseData());
            jsonObject.put(RESPONSE_ID_STR, getResponseId());
            return jsonObject.toString();
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return null;
    }
    //将message類對應的json對象轉化為message類執行個體
    public static Message toObject(String jsonStr) {
        Message m =  new Message();
        try {
            JSONObject jsonObject = new JSONObject(jsonStr);
            m.setHandlerName(jsonObject.has(HANDLER_NAME_STR) ? jsonObject.getString(HANDLER_NAME_STR):null);
            m.setCallbackId(jsonObject.has(CALLBACK_ID_STR) ? jsonObject.getString(CALLBACK_ID_STR):null);
            m.setResponseData(jsonObject.has(RESPONSE_DATA_STR) ? jsonObject.getString(RESPONSE_DATA_STR):null);
            m.setResponseId(jsonObject.has(RESPONSE_ID_STR) ? jsonObject.getString(RESPONSE_ID_STR):null);
            m.setData(jsonObject.has(DATA_STR) ? jsonObject.getString(DATA_STR):null);
            return m;
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return m;
    }

    public static List<Message> toArrayList(String jsonStr){
        List<Message> list = new ArrayList<Message>();
        try {
            JSONArray jsonArray = new JSONArray(jsonStr);
            for(int i = ; i < jsonArray.length(); i++){
                Message m = new Message();
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                m.setHandlerName(jsonObject.has(HANDLER_NAME_STR) ? jsonObject.getString(HANDLER_NAME_STR):null);
                m.setCallbackId(jsonObject.has(CALLBACK_ID_STR) ? jsonObject.getString(CALLBACK_ID_STR):null);
                m.setResponseData(jsonObject.has(RESPONSE_DATA_STR) ? jsonObject.getString(RESPONSE_DATA_STR):null);
                m.setResponseId(jsonObject.has(RESPONSE_ID_STR) ? jsonObject.getString(RESPONSE_ID_STR):null);
                m.setData(jsonObject.has(DATA_STR) ? jsonObject.getString(DATA_STR):null);
                list.add(m);
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return list;
    }
}

JS調用JAVA方法

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

參考：http://www.cnblogs.com/wingyip/p/5426477.html

JSBridge解析

基礎知識

JS和Native之間的通信方式

JsBridge的實作

JAVA調用JS方法

JS調用JAVA方法

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯