2020-04-26WebViewJavascriptBridge分析理解

关于WebViewJavascriptBridge三方库的解析理解。

配流程图

image.png

一.简单介绍（针对WKWebview）
WebViewJavascriptBridge是根据WKWebview自带的监听页面跳转的方法

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler

以及OC自带的调用js的方法

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler

在三方库的代码中定义了一套url规则，来处理不同的情况进行js代码的写入调用。以达到oc和js代码交互的效果。

二.简单使用
1.初始化

  self.bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
  [self.bridge setWebViewDelegate:self];设置代码

2.注册

[self.bridge registerHandler:@"register" handler:^(id data, WVJBResponseCallback responseCallback) {
        responseCallback(@"Callback");
        [self dismissViewControllerAnimated:true completion:nil];
    }];

3.发送数据

[self.bridge callHandler:@"test" data:@{@"test":@"test"} responseCallback:^(id responseData) {
            
}];

三.流程分析
(一)数据接收 js-->oc
1.初始化，这一步会初始化一些数组和字典，用来存储一些数据，例如：注册的字段列表
2.registerHandler注册，将对应的字段存到字典中，handlerName为key，handler为value
3.页面加载，decidePolicyForNavigationAction监听到url为https://bridge_loaded/时，注入WebViewJavascriptBridge_JS类中的js代码。https://bridge_loaded/这个已由js端的库提前配置好，在网页加载时会载入。
4.当监听到url为https://wvjb_queue_message时，为js发送数据到oc。这时候注入js代码@"WebViewJavascriptBridge._fetchQueue();"。_fetchQueue()这个方法用来将数据处理为json数据返回到oc。
5.在回调的block中通过flushMessageQueue:方法进行数据处理，根据handlerName，从字典中取出对应的WVJBHandler，Handler数据回调。

(二)数据发送 oc-->js
(一)中的1和3
1.发送callHandler:数据发送；_queueMessage:方法进行判断，如果尚未初始化注入js的sdk，也就是https://bridge_loaded/之前，将要发送的数据存入数组中，初始化时进行调用发送js代码。如果已经注入过怎直接进行调用发送js代码。
2.通过_dispatchMessage:方法将要发送的数据进行处理用来传输。然后注入调用js方法WebViewJavascriptBridge._handleMessageFromObjC('%@');
3.js中的_dispatchMessageFromObjC接收并解析数据。
4.js接收成功，并回执。

有错误欢迎指正

最后编辑于：2020.04.26 18:03:40