JsBridge源码详解（一） JS与Native通讯过程（附详细流程图）

JsBridge（github地址）为混合式应用native与h5的通讯提供安全而方便的桥接。

JsBridge是通过url拦截的方式实现的。

本次源码解析分为三篇，本篇为源码分析第一篇，其他两篇请见：
android JS与Native通讯方案汇总
JsBridge源码详解（一） JS与Native通讯过程（附详细流程图）
JsBridge源码详解（二） Native与JS通讯过程（附详细流程图）

通讯前准备

通讯的实现需要注入一段js代码，js代码的注入在页面加载完毕也就是WebViewClent的onPageFinished方法中

@Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(mWebView, url);
        //加载本地通讯桥接的js文件
        JsBridgeUtil.webViewLoadLocalJs(view, BridgeX5WebView.toLoadJs);
    }

其中JsBridgeUtil的webViewLoadLocalJs方法负责注入js片段，其代码如下

public static void webViewLoadLocalJs(WebView view, String path) {
        String jsContent = assetFile2Str(view.getContext(), path);
        view.loadUrl("javascript:" + jsContent);
    }

负责通讯的js片段以文件形式放在asserts目录下，assetFile2Str将文件以流的方式读取出来转换成字符串格式，然后通过loadUrl就加载了通讯的js片段，js的具体内容下面再一一分析。

至此，通讯的准备工作就完成了，下面来看看具体的通讯实现。

通讯过程

js调用native有个前提条件，就是上面讲到的js片段必须注入完毕，所以这里有部分逻辑是对该部分准备工作的监听，负责通讯的js通过发送事件的方式告诉调用方js：

 var readyEvent = doc.createEvent('Events');
    readyEvent.initEvent('WebViewJavascriptBridgeReady');
    readyEvent.bridge = WebViewJavascriptBridge;
    doc.dispatchEvent(readyEvent);

调用方js可以通过如下方式来监听该事件

function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                // 准备完毕，可以通讯了
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        // 准备完毕，可以通讯了
                    },
                    false
                );
            }
        }

监听到桥js加载完毕（步骤1），接下来就可以通讯了，调用方js通过调用桥js的callHandler函数来发起通讯（步骤2），来看一个获取H5所运行的设备的信息例子：

function getDeviceInfo(){
             window.WebViewJavascriptBridge.callHandler(
                'NativeHandler'
                , {'funcName'  : 'getDeviceInfo'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "getDeviceInfo involved,responseData from native is " + responseData
                }
            );
        }

各个参数的作用后面会讲到，先来看一下callHandler的实现

function callHandler(handlerName, data, responseCallback) {
        _doSend({
            handlerName: handlerName,
            data: data
        }, responseCallback);
    }
<