OC与H5交互（WebViewJavascriptBridge）

虽然原生方法也可以满足我们一些日常的OC与H5交互需求，但是一旦交互需求多了，代码就会显得很凌乱和松散；WebViewJavascriptBridge就为我们解决了这样的问题，他可以很轻松简单的在OC和JS之间传送消息，还是可以方便的携带参数，处理回调，极大的提高了我们的开发效率。

首先不管你是手动或是pods，要先把WebViewJavascriptBridge集成到我们的工程里来，然后倒入头文件#import "WebViewJavascriptBridge.h"

OC部分准备

1. 创建WebViewJavascriptBridge的实例属性

@property WebViewJavascriptBridge* bridge;

2. 创建webView，然后与bridge绑定，并设置代理

    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    [_bridge setWebViewDelegate:self];

JS部分准备

1. 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 = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

2. 实现函数和回调

setupWebViewJavascriptBridge(function(bridge) {

        /* Initialize your app here */

        bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
            log('ObjC 传来=', data)
            var responseData = { 'JS':'回调给OC' }
            log('JS 收到=', responseData)
            responseCallback(responseData)
        })

        bridge.callHandler('testObjcCallback', {'来自JS': 'hello OC'}, function(response) {
            log('JS 收到回调=', response)
        }
})

调用

1. JS调用OC

    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback方法被调用了，参数: %@", data);
        responseCallback(@"通知JS收到消息");
    }];

在OC中注册JS的testObjcCallback的方法监听，当JS的testObjcCallback函数被调用后，我们就会在上边拿到回调以及参数，并且可以用responseCallback()回调给JS。

2. OC调用JS

    id data = @{ @"来自OC": @"hello JS" };
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler 收到了: %@", response);
    }];

当我们在OC中通过callHandler方法调用JS的testJavascriptHandler函数，在JS中该函数就会被调用，并把参数传递过去。

总结

WebViewJavascriptBridge可以很灵活实在OC和JS的调用和传参，而且每个方法单独注册回调，代码很清晰。而且api简单易上手，学习成本不高，可以为你解决ios原生方法里那些多重判断带来的代码臃肿、逻辑混乱。