iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

WebViewJavascriptBridge是一个有点年代的JS与OC交互的库，使用该库的著名应用还挺多的，其实用的时候也不难.

本文介绍的是在UIWebView中使用WebViewJavascriptBridge来达到JS与OC互相调用的目的。WKWebView使用的是WKWebViewJavascriptBridge

建立UIWebView 
建立UIWebView的代码：

self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:self.webView];

    NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];

    // UIWebView 滚动的比较慢，这里设置为正常速度
    self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    [self.webView loadRequest:request];

这里不要为UIWebView设置代理，由于在建立WebViewJavascriptBridge的时候，UIWebView的代理已经被赋值给了WebViewJavascriptBridge。

建立WebViewJavascriptBridge 
由于WebViewJavascriptBridge实例，在控制器中多个地方用到，所以最好定义一个property或者实例变量存起来

_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}这个方法，能够将UIWebView的代理，从_webViewBridge中再传递出来。
// 因此若是你要在控制器中实现UIWebView的代理方法时，添加下面这样代码，不然能够不写。
[_webViewBridge setWebViewDelegate:self];

而后跟踪进{- bridgeForWebView }方法，看它具体是怎么实现的

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
}

// 上面方法调用了这个方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}

其实{-bridgeForWebView }内部也不过是初始化了一个WebViewJavascriptBridge对象，并为其实例变量_webView 和 _base赋值而已。

注册js 要调用的Native 功能

先上示例代码：

#pragma mark - private method
- (void)registerNativeFunctions
{
    [self registScanFunction];

    [self registShareFunction];

    [self registLocationFunction];

    [self regitstBGColorFunction];

    [self registPayFunction];

    [self registShakeFunction];
}

- (void)registShareFunction
{
    // 全部JS 须要调用的原生功能都要先用registerHandler注册一下
    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操做
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];

        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 该方法有两个参数：第一个参数handlerName，是对这个功能起的一个别名；第二个参数handler，是个block，也就是Native 实现的功能。JS要调用的Native 实现其实就是block 的 {} 内的代码功能。
为了便于维护，咱们能够将JS要调用的Native方法都集中到一块儿，而后单个功能再封装一个方法。

完成HMTL必要的JS代码

HTML 中有一个必需要添加的JS 方法，而后须要自动调用一次该方法。该方法是：

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

上面这个方法的参数是一个function，这个方法的做用主要是在第一次加载HTML的时候起做用，目的是加载一

次wvjbscheme://__BRIDGE_LOADED__，来触发往HTML中注入一些已经写好的JS方法。

 添加完setupWebViewJavascriptBridge方法，须要在JS中主动调用一次该方法：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
})

Native 须要调用的 JS 功能，也是须要先注册，而后再执行的。若是Native 须要调用的JS 功能有多个，那么这些功能都要在这里先注册，注册以后才可以被Native 调用。
接下来须要好好分析一下JS 中这个方法的做用了。

这里是重点：
一、首先调用setupWebViewJavascriptBridge，第一次执行的时候，因为window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在，因此会继续往下执行，将参数callback（它是一个function）装进数组赋值给window.WVJBCallbacks。
js 支持动态添加属性 并赋值，这里window.WVJBCallbacks = [callback];就是动态添加属性，并赋值。 另外js中的全局变量均可以使用window.xxxx来调用;动态添加的属性也能够不加window.，直接使用。
二、WebViewJavascriptBridge 帮助JS调用Native的url 有两种，一种是wvjbscheme://__BRIDGE_LOADED__；而另外一种是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在调用setupWebViewJavascriptBridge的时候执行一次，通常来讲这个url 若是没有页面应该只会执行一次。第二种url全部js调用Native 功能时，都会使用到。
三、在拦截到自定义的url 时，WebViewJavascriptBridge分了三种状况，若是是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已经写好的js，这个js 在WebViewJavascriptBridge_JS中；若是是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString，取回调用js中callHandler传进去的参数。
而后再从WebViewJavascriptBridge以前保存的Native 方法对应的block，调用对应的block。

 

调用Native 功能

利用以前注入的JS方法callHandler 就能够调用Native 功能了。
示例代码以下：

function shareClick() {
    var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}

这里callHandler前的WebViewJavascriptBridge,其实就是上一步注入到JS中的代码中，动态建立属性，动态赋值的属性。以下代码片断能够在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge = {
  registerHandler: registerHandler,
  callHandler: callHandler,
  disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
  _fetchQueue: _fetchQueue,
  _handleMessageFromObjC: _handleMessageFromObjC
 };

而callHandler 内部调用了另外一个js function _doSend,而_doSend内部其实，就是把handlerName和 参数data，再加上callbackId 装成键值对，而后保存到数组sendMessageQueue，同时加载一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。
到此 利用WebViewJavascriptBridge实现JS 调用iOS Native 就完成了。

Native 调用 js 功能

Native 调用js 的功能，也须要先在js 中为要调用的功能注册一个别名。
 js 注册Native 要调用的功能 
示例代码：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
    // 注册其余的功能
    //bridge.regsiterHandler.....
})

Native 调用功能的别名handlerName：

//    // 若是不须要参数，不须要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction"];
//    // 若是须要参数，不须要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
    // 若是既须要参数，又须要回调，使用这个
    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
        NSLog(@"调用完JS后的回调：%@",responseData);
    }];

而callHandler 方法又是如何实现调用js 方法的呢？
callHandler 内部是将传递给js 的参数、handlerName、callbackId组合成字典，而后把字典转换成字符串，将转换后的字符串以参数的形式，经过 stringByEvaluatingJavaScriptFromString传递给js ，js 中将传递过来的字符串转成json ，而后经过handlerName 获取对应的function执行。

利用WebViewJavascriptBridge来实现JS与OC的交互的优势：
一、获取参数时，更方便一些，若是参数中有一些特殊符号或者url带参数，可以很好的解析。
也有一些缺点：
一、作一次交互，须要执行的js 与原生的交互步骤较多，至少有两次。
二、须要花较多的时间，理解WebViewJavascriptBridge的原理和使用步骤。

demo地址： https://github.com/domanc/JS_OC_WebViewJavascriptBridge_UIWebView.git