关于WebViewJavascriptBridge的功能不多做介绍，有兴趣的小伙伴可以搜一下
使用示例
iOS端使用如下
let bridge = WKWebViewJavascriptBridge(for: webView)
//原生调用js
bridge.callHandler("jsFunction", data: [:], responseCallback: { (obj) in
})
//native端注册方法，以供js调用
bridge.registerHandler("nativeFunction") { (data, reponseCallback) in
}
实现原理：
js端有一个处理对象，window.WebViewJavascriptBridge对象，原生端也有一个类似的对象WebViewJavascriptBridgeBase，他们两个在两端，分别使用拦截url和注入js的方式，进行通信，他们的主要工作内容是
-
存储自己端registed handler（实质是个block数组）
-
存储回调（实质也是个block数组）
-
对需要通信数据进行编码和解码
//js端存储相关代码
var messageHandlers = {}; //存储registerHandler方法注册过的block
var responseCallbacks = {}; //存储callHandler中的responseCallback
//原生端存储相关
@interface WebViewJavascriptBridgeBase : NSObject
@property (strong, nonatomic) NSMutableDictionary* responseCallbacks; //存储callHandler中的responseCallback
@property (strong, nonatomic) NSMutableDictionary* messageHandlers; //存储registerHandler方法注册过的block
@end
初始化过程
原生端的初始化：原生端调用WebViewJavascriptBridge库，生成需要的WebViewJavascriptBridge或者WKWebViewJavascriptBridge实例
js端的初始化：js端加载地址为“https://__bridge_loaded__”的新页面，新页面的加载事件触发webview的代理方法
//WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
//UIWebView
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
在代理方法中识别加载地址为“https://__bridge_loaded__”，调用WebViewJavascriptBridge库中预先写好的一段js代码 — WebViewJavascriptBridge_JS，使用evaluateJavaScript执行这段js代码，在js端生成window.WebViewJavascriptBridge对象及一些需要的js方法。
这种交互方式，比较通用的叫法是 url sheme
原生调用js
原生调用js的callHandler方法，实际上是调用WebViewJavascriptBridgeBase中方法对参数进行处理。
WebViewJavascriptBridgeBase会为此次调用的回调生成一个id，并在responseCallbacks中用ID为key存储回调。然后把js方法名、参数、回调id 组织成字典，再json字符串化。
{
"data": ["ID": 67788],
"callbackId": "objc_cb_1",
"handlerName": "jsFunction"
}
然后用“WebViewJavascriptBridge._handleMessageFromObjC”把这个message字符串包起来。_handleMessageFromObjC的是初始化时通过WebViewJavascriptBridge_JS注入js中的一个js方法。接下来通过evaluateJavaScript执行handleMessageFromObjC。
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
js端的bridge方法handleMessageFromObjC被调用后，先将json字符串解析成字典对象，然后根据字典中的handlerName值，在messageHandlers中寻找注册过的对应name的function，将message.data和js回调传给该function，进行调用。
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
注意一点，上面的responseCallback是js自己的回调，原生的回调还留在WebViewJavascriptBridge的responseCallbacks字典中存储。js回调的功能是给原生发送回调消息。
js回调调用_doSend方法中把字典类型的message添加进sendMessageQueue数组
[handlerName: xxxx, responseId: xxx, responseData: xxx] //iOS 字典
{handlerName: xxxx, responseId: xxx, responseData: xxx} //js 字典
然后加载一个地址为“https://__wvjb_queue_message__”的新页面，原生的代理方法被调用
WebViewJavascriptBridge中的代理方法识别到特殊的加载地址，使用evaluateJavaScript调用“WebViewJavascriptBridge._fetchQueue();”，js端的_fetchQueue把sendMessageQueue数组中的message都格式化成json字符串。原生拿到messages的json字符串后先把字符串转换成数组，然后遍历数组处理每个message（通常只有一个）。原生bridge发现message中有responseId，则用responseId调用对应的responseCallback。如果没有responseId，说明这不是 原生调js - js回调原生，而是js直接调用原生的方法，那就从messageHandlers中寻找对应handlerName的block
在原生端初始化WebViewJavascriptBridge的时候，WebViewJavascriptBridge就把webview的代理指向了自己，所以这里能拦截到。如果webview的代理被指向了其他地方，那WebViewJavascriptBridge就不工作了。毕竟js端初始化就指望着这个代理方法拦截到请求，然后去给js注入window.WebViewJavascriptBridge对象。
js调用原生
前面原生调用js中说到了原生发消息给js，js怎么处理，原生的回调怎么处理。js调用原生是类似的逻辑。只是双方发消息的方式不一样，一个是通过evaluateJavaScript，一个是通过url sheme。这里不再多述。
网友评论