源码解读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原理解析