在开发中涉及到网页与iOS原生交互，于是就想到了WebViewJavascriptBridge 这个开源库。经过最近几天的研究和了解算是熟悉了它的使用和大致的处理过程。以此记录作为自己学习总结习惯的开始，也便于不熟悉它的人能快速使用它。 内容包括三个部分。

• WebViewJavascriptBridge基本使用
• OC中调用JS方法分析
• JS中调用OC方法分析

<p>

1、WebViewJavascriptBridge基本使用：

导入工程包含文件如下(图1):

F3C1C2C7-B738-41D2-B7CB-987604347B9D.png

其支持UIWebView 和 WKWebView，我用的是UIWebView，测试文件** test.html 。

** oc端的操作

首先添加头文件#import <WebViewJavascriptBridge.h>
    //初始化_webBridge对象
    _webBridge =[WebViewJavascriptBridge bridgeForWebView:_webview];
    [_webBridge setWebViewDelegate:self];

js和iOS方法相互调用之前需要先注册，如js要调用oc中的方法 * objc_fun1 *，在oc文件中操作如下

//注册方法供js处调用
[_webBridge registerHandler:@"objc_fun1" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"rec data from js :%@",data);
        responseCallback(@"i am from objc!");
//objc_fun1：注册方法的名称供js端调用
//handler：具体的方法操作，参数data — js调用时传递的参数 ，responseCallback—js 回调操作。
//调用js中的方法
[_webBridge callHandler:@"js_fun1" data:@{@"key":@"hello js"} responseCallback:^(id responseData) {
        NSLog(@"from js  :%@",responseData);
    }];

js端的操作 相关操作基本固定，在 test.html 中，方法 function setupWebViewJavascriptBridge(callback){}的定义不需要改动，我们只是在方法的调用时，在callback 中加入自己的操作。这里注册oc 需要调用的方法，或者调用oc已注册过的方法

setupWebViewJavascriptBridge(function(bridge) {
    //register functin
    bridge.registerHandler('js_fun1', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    // add button
   var btn = document.getElementById('divid1').appendChild(document.createElement('button'))
       btn.innerHTML = "callOCFunction"
       btn.style="background-color:red;text-align:center" 
       btn.onclick = function(e){
        e.preventDefault()
        bridge.callHandler('objc_fun1', {'key':'hello oc,I from JS'}, function responseCallback(responseData) {
             var e =document.getElementById('result')
             e.innerHTML = "oc response: " + responseData;
//html部分
<p>this is webviewJavascriptBridge demo</p>
    <p id='result'></p>
<div style = "background-color:blue;text-align:center;" id = 'divid1' height:40px></div>
</body>

在此注册了方法中js_fun1可供oc处调用，添加了测试按钮callOCFunction，点击通过bridge.callHandler() 调用oc端的方法objc_fun1，返回的结果在页面上显示。运行程序后点击按钮达到了预期结果，到这里算是完成了基本实用。

2、OC中调用JS方法分析:

WebViewJavascriptBridge中js与oc的交互主要通过 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType url拦截然后对url分析进行js代码注入，最终实现js与oc的方法相互调用。<p>

首次加载test.html时发起一次请求操作， url = 'wvjbscheme://__BRIDGE_LOADED__',拦截到该url，通过- >>(void)injectJavascriptFile 方法进行js注入， NSString *js = WebViewJavascriptBridge_js();此js代码在#import "WebViewJavascriptBridge_JS.h"中，对js中>WebViewJavascriptBridge对象方法和变量进行初始化 主要方法如下：

function registerHandler(handlerName, handler);//注册方法
function callHandler(handlerName, data, responseCallback);//调用方法
function _doSend(message, responseCallback);
function _fetchQueue();
function _dispatchMessageFromObjC(messageJSON);
function _handleMessageFromObjC(messageJSON);

<p> OC中调用JS方法顺序 1.首先调用方法 - (void)callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback 参数data，参数形式js端书写语法。 参数responseCallback，最后的回调操作。 2.- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName 把发送的数据封装在一个字典中，如果有responseCallback同时生成一个回调id(objc_cb_1形式的字符串)。 3.- (void)_queueMessage:(WVJBMessage*)message 4.- (void)_dispatchMessage:(WVJBMessage*)message 把消息对象转化为json字符串,添加字符格式化的处理-> messageJSON， 获取js代码字符串 NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];

执行js代码 [self _evaluateJavascript:javascriptCommand]; js中依次调用 function _handleMessageFromObjC(messageJSON) function _dispatchMessageFromObjC(messageJSON)执行js中方法操作 方法结束后，如果此时的oc方法有回调操作->通过 function _doSend(message, responseCallback) 再次发起url请求。然后操作回到oc端。

<p> oc中拦截url请求，分析请求类型为 WVJB_QUEUE_MESSAGE 调用方法5 5.- (void)flushMessageQueue:(NSString *)messageQueueString 根据js传入的参数获取 回调id 'responseId'取出oc方法的回调代码块执行，然后在self.responseCallbacks移除已执行的操作。

        NSString* responseId = message[@"responseId"];
        if (responseId) {
            WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
            responseCallback(message[@"responseData"]);
            [self.responseCallbacks removeObjectForKey:responseId];
}

至此，oc调用js方法执行结束。

3、JS中调用OC方法分析:

依次调用方法顺序 JS中的方法操作 在文件#import "WebViewJavascriptBridge_JS.h"中定义的方法 1.function callHandler(handlerName, data, responseCallback); 2.function _doSend(message, responseCallback) 在这个方法中生成回调的id,并保存js端的回调操作，然后发起一次请求回到OC端操作。 oc中拦截url请求，分析请求类型为WVJB_QUEUE_MESSAGE调用方法3 3.- (void)flushMessageQueue:(NSString *)messageQueueString 主要操作代码如下：

{
            WVJBResponseCallback responseCallback = NULL;
            NSString* callbackId = message[@"callbackId"];
            if (callbackId) {
                responseCallback = ^(id responseData) {
                    if (responseData == nil) {
                        responseData = [NSNull null];
                    WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
                    [self _queueMessage:msg];
            } else {
                responseCallback = ^(id ignoreResponseData) {
                    // Do nothing
            WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
            if (!handler) {
                NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
                continue;
            handler(message[@"data"], responseCallback);
        }

根据传递过来的方法名，参数，和回调调用oc方法 handler(message[@"data"], responseCallback); 如果有回调responseCallback，oc方法执行完后调用 [self _queueMessage:msg]; 然后操作同 OC中调用JS方法顺序中步骤3、4又回到JS端执行

    function _dispatchMessageFromObjC(messageJSON) {
    setTimeout(function _timeoutDispatchMessageFromObjC() {
            var message = JSON.parse(messageJSON);
            var messageHandler;
            var responseCallback;
            if (message.responseId) {
                responseCallback = responseCallbacks[message.responseId];
                if (!responseCallback) {