WebViewJavascriptBridge实现原理

2020-02-26 本文已影响0人亲爱的八路

关于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。这里不再多述。