源码解读JS与Native通信原理-WebViewJavascriptBridge

缘由：网上其实有很多讲解WebViewJavascriptBridge原理的文章，但都着重了Native端，今天从一个纯前端角度出发，抓住核心脉络讲解下原理，清晰明了，一文即懂。

通信的基础：

native端到js端。native能获取到window环境，执行JS。
js端到native端。native能截获H5页面跳转，故而JS端可以通过动态创建iframe来告诉native，我发请求了。（其实就是在window下维护了一个messageQueue数组，然后js创建个iframe，告诉native，我向你发请求了，但具体是什么请求，url里面是不会体现的，需要native去遍历messageQueue数组,毕竟native能取到window环境）。

首先初始化JS端环境。

初始化方法setupWebViewJavascriptBridge，里面的字段都是约定的，因为在native执行初始化JS的时候，会用到，比如WVJBCallbacks。因为通信的过程是异步的（动态创建iframe,捕获跳转）。所以setupWebViewJavascriptBridge是异步的，并且以后调用native提供的方法也会是异步的。并且最好是在setupWebViewJavascriptBridge的回调函数中调用，可以保证初始化成功了。而回调函数里面会把WebViewJavascriptBridge当做参数返回。

上图是网上偷懒截的图，到时候底部放个链接。

重点：window.WebViewJavascriptBridge，所有的交互都是通过这个WebViewJavascriptBridge对象来完成的。初始化的过程就是动态创建一个iframe，将iframe的src设置为https://__bridge_loaded__，然后插入到页面中。前面通信基础说过，natvie能够截获h5跳转，当Native捕获到当前URL，并且其值等于 https://__bridge_loaded__ （当前URL是约定成俗的），就会注入一段自执行的代码（假设其为bridge，下面统一称呼了）,挂载WebViewJavascriptBridge到window上。等下会着重说下这段自执行的代码是如何工作的。

if (window.WebViewJavascriptBridge)， if (window.WVJBCallbacks) ，保证了初始化只执行一次。WVJBCallbacks这个字段用于还没有初始化的时候，保存回调函数。当我们通知native端进行初始化，并且初始化之后，bridge里面会去遍历WVJBCallbacks中的回调函数，并将WebViewJavascriptBridge当做参数注入。执行完后会delete window.WVJBCallbacks。

下图是我们真正调用一个native的方法，假设去获取用户信息,WebViewJavascriptBridge是重点，下面会详细讲解下这个对象。

export function getUserData() {
  return new Promise((resolve, reject) => {
    setupWebViewJavascriptBridge((WebViewJavascriptBridge) => {
      WebViewJavascriptBridge.callHandler('xxxx', params, (data) => {
        resolve(data);
      });
    })
  })
}

到了这里，其实我们前端需要做的已经完了。我再理一理顺序。getUserData，去调用native提供的方法。先调用setupWebViewJavascriptBridge，里面有做是否初始化的判断。然后回调函数里面，我们就能取到WebViewJavascriptBridge对象，对象上面挂载callHandler了方法，'xxxx'代表着和native端约定好的方法，执行即可。

WebViewJavascriptBridge

最上面的时候说过，native可以执行JS，能获取到window。所以接下来重点讲一下连接native和js的（bridge）桥梁是如何运作的。
什么时候初始化bridge？
重复说一下。setupWebViewJavascriptBridge第一次调用的时候，会创建一个iframe，src指向https://__bridge_loaded__。当native截获到这个请求的时候，判断为bridge_loaded，就会注入一段自执行的代码进行WebViewJavascriptBridge初始化。
接下来看代码：

    //如果已经初始化了，则返回。
    if (window.WebViewJavascriptBridge) {
        return;
    }
    if (!window.onerror) {
        window.onerror = function(msg, url, line) {
            console.log("WebViewJavascriptBridge: ERROR:" + msg + "@" + url + ":" + line);
        }
    }
    //初始化一些属性。
    var messagingIframe;
    //用于存储消息列表
    var sendMessageQueue = [];
    //用于存储消息
    var messageHandlers = {};
    //通过下面两个协议组合来确定是否是特定的消息，然后拦击。
    var CUSTOM_PROTOCOL_SCHEME = 'https';
    var QUEUE_HAS_MESSAGE = '__wvjb_queue_message__';
    //oc调用js的回调
    var responseCallbacks = {};
    //消息对应的id
    var uniqueId = 1;
    //是否设置消息超时
    var dispatchMessagesWithTimeoutSafety = true;
    //web端注册一个消息方法
    function registerHandler(handlerName, handler) {
        messageHandlers[handlerName] = handler;
    }
    //web端调用一个OC注册的消息
    function callHandler(handlerName, data, responseCallback) {
        if (arguments.length == 2 && typeof data == 'function') {
            responseCallback = data;
            data = null;
        }
        _doSend({ handlerName: handlerName, data: data }, responseCallback);
    }
    function disableJavscriptAlertBoxSafetyTimeout() {
        dispatchMessagesWithTimeoutSafety = false;
    }
        //把消息转换成JSON字符串返回
    function _fetchQueue() {
        var messageQueueString = JSON.stringify(sendMessageQueue);
        sendMessageQueue = [];
        return messageQueueString;
    }
    //OC调用JS的入口方法
    function _handleMessageFromObjC(messageJSON) {
        _dispatchMessageFromObjC(messageJSON);
    }

    //初始化桥接对象，OC可以通过WebViewJavascriptBridge来调用JS里面的各种方法。
    window.WebViewJavascriptBridge = {
        registerHandler: registerHandler,
        callHandler: callHandler,
        disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
        _fetchQueue: _fetchQueue,
        _handleMessageFromObjC: _handleMessageFromObjC
    };


    //处理从OC返回的消息。
    function _dispatchMessageFromObjC(messageJSON) {
        if (dispatchMessagesWithTimeoutSafety) {
            setTimeout(_doDispatchMessageFromObjC);
        } else {
            _doDispatchMessageFromObjC();
        }

        function _doDispatchMessageFromObjC() {
            var message = JSON.parse(messageJSON);
            var messageHandler;
            var responseCallback;
            //回调
            if (message.responseId) {
                responseCallback = responseCallbacks[message.responseId];
                if (!responseCallback) {
                    return;
                }
                responseCallback(message.responseData);
                delete responseCallbacks[message.responseId];
            } else {//主动调用
                if (message.callbackId) {
                    var callbackResponseId = message.callbackId;
                    responseCallback = function(responseData) {
                        _doSend({ handlerName: message.handlerName, responseId: callbackResponseId, responseData: responseData });
                    };
                }
                //获取JS注册的函数
                var handler = messageHandlers[message.handlerName];
                if (!handler) {
                    console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
                } else {
                    //调用JS中的对应函数处理
                    handler(message.data, responseCallback);
                }
            }
        }
    }
    //把消息从JS发送到OC，执行具体的发送操作。
    function _doSend(message, responseCallback) {
        if (responseCallback) {
            var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
            //存储消息的回调ID
            responseCallbacks[callbackId] = responseCallback;
            //把消息对应的回调ID和消息一起发送，以供消息返回以后使用。
            message['callbackId'] = callbackId;
        }
        //把消息放入消息列表
        sendMessageQueue.push(message);
        //下面这句话会出发JS对OC的调用
        //让webview执行跳转操作，从而可以在
        //webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 中拦截到JS发给OC的消息
        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    }


    messagingIframe = document.createElement('iframe');
    messagingIframe.style.display = 'none';
    //messagingIframe.body.style.backgroundColor="#0000ff";
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    document.documentElement.appendChild(messagingIframe);


    //注册_disableJavascriptAlertBoxSafetyTimeout方法，让OC可以关闭回调超时，默认是开启的。
    registerHandler("_disableJavascriptAlertBoxSafetyTimeout", disableJavscriptAlertBoxSafetyTimeout);
    //执行_callWVJBCallbacks方法
    setTimeout(_callWVJBCallbacks, 0);

    //初始化WEB中注册的方法。这个方法会把WEB中的hander注册到bridge中。
    //下面的代码其实就是执行WEB中的callback函数。
    function _callWVJBCallbacks() {
        var callbacks = window.WVJBCallbacks;
        delete window.WVJBCallbacks;
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i](WebViewJavascriptBridge);
        }
    }
})();

这里着重讲 JS如何调native方法的。
window.WebViewJavascriptBridge = {

    registerHandler: registerHandler,
    callHandler: callHandler,
    disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
    _fetchQueue: _fetchQueue,
    _handleMessageFromObjC: _handleMessageFromObjC
};

这个对象就是上文中回调函数获取到的WebViewJavascriptBridge 对象。callHandler表示执行某个约定的方法。
上面的源码注释很清晰了，源码就不过多解读了。接下来我们举一个完整的列子来阐述整个过程。

重点
getUserData => 调用setupWebViewJavascriptBridge => 因为是第一次调用进行初始化,会将回调函数保存到WVJBCallbacks中。
=> 动态创建ifram，native截获，注入代码进行brige初始化 => WebViewJavascriptBridge初始化 => 第一次执行所以会触发
_callWVJBCallbacks，遍历上面的WVJBCallbacks数组，并且将WebViewJavascriptBridge作为参数传入，执行回调。 => 回调中执行的就是getUserData里面的WebViewJavascriptBridge.callHandler('xxxx'）
=》 callHandler执行的其实就是__doSend方法。 =》 _doSend里面会将getUserData里面的回调函数保存在全局对象变量responseCallbacks中,key则是自增的ID。并且把getUserData所调用的方法名，参数，key，都放在一个对象中(message)，并将这个
message,存到另外一个全局数组变量sendMessageQueue中。 => 动态创建一个ifram,src为__wvjb_queue_message__，也就是说创建的ifram,一般就两种地址，一个是告诉native进行初始化，一个是告诉native可以轮询消息队列sendMessageQueue了。 => native拦截到URL，遍历全局变量sendMessageQueue，执行getUserData所需要的方法，这里就是XXXX，并组装参数 => 调用另一个_handleMessageFromObjC方法，解析参数，得到一开始的自增ID，从全局responseCallbacks中取到真正的回调函数执行。 => over了。完整的交互就是这个样子的了。

上面的流程已经很清楚了，如果有不懂，或者有错误的地方欢迎指正。
这是js到native端的消息过程，还有native调js的，其实过程差不多。参考下文把
WebViewJavascriptBridge原理解析

源码解读JS与Native通信原理-WebViewJavascriptBridge

首先初始化JS端环境。

WebViewJavascriptBridge

白衣卿相

引用和评论

vue-cli脚手架源码解析(四)

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号