WebViewJavascriptBridge的使用

前言

目前大部分的APP或多或少都会嵌入HTML界面，这时候就需要Obj-C跟Javascript进行交互了。下面给大家介绍一下一个比较流行的开源交互框架，这个框架实现了在UIWebView和WKWebView下Obj-C和Javascript之间的交互。

原理

关于其实现的原理其实我也理解的不是很透彻，只知道它还是基于之前的Obj-C与Javascript交互的老方法：JS调用Obj-C是通过对webview的请求进行拦截，然后决定是进行网页界面跳转还是调Obj-C本地方法。具体可以看下我这篇文章

使用

一.准备工作：前往github下载源代码

可手动拖入工程，也支持cocoapod，我现在用的是V5.0.5版本，里面文件如下

源文件

二.具体使用

1.导入头文件，并声明一个WebViewJavascriptBridge对象。

#import <WKWebViewJavascriptBridge.h>
@property (nonatomic, strong) WebViewJavascriptBridge* bridge;

2.创建一个WebView，并用WebViewJavascriptBridge对象绑定这个Webview,在控制器中遵守UIWebViewDelegate。

#pragma mark - Lazy
- (UIWebView *)webView {
 if(_webView == nil) {
  _webView = [[UIWebView alloc] init];
        [self.view addSubview:_webView];
        _webView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
        NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
        NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
        [_webView loadHTMLString:appHtml baseURL:baseURL];
 }
 return _webView;
}

- (WebViewJavascriptBridge *)bridge {
 if(_bridge == nil) {
  _bridge = [[WebViewJavascriptBridge alloc] init];
        //[WebViewJavascriptBridge enableLogging];
        _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
        [_bridge setWebViewDelegate:self];
 }
 return _bridge;
}

3.JS端的配置工作
下面这个方法是必须添加的

<script>    
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)
    }
</script>

4.Obj-C调用JS
在需要进行交互的界面中由JS注册方法供Obj-C调用

setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler('ObjCCallJS', function(data, responseCallback){ console.log("JS Received:", data) responseCallback(data)
 }) 
})

Obj-C主动去调用JS方法

    //不传参
    [self.bridge callHandler:@"ObjCCallJS"];
    //传参数
    [self.bridge callHandler:@"ObjCCallJS" data:@{@"key":@"value"}];
    //传参数并接收JS回调内容
    [self.bridge callHandler:@"ObjCCallJS" data:@{@"key":@"value"} responseCallback:^(id responseData) {
        //data:你传给JS的内容
        //responseData:JS被Obj-C调用后,回调给Obj-C的内容
    }];

5.JS调用Obj-C
Obj-C注册方法供JS调用

    //请求打电话
    [self.bridge registerHandler:@"callNativeCall" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSMutableString * telstr=[[NSMutableString alloc] initWithFormat:@"telprompt://%@",data[@"tel"]];
        [[UIApplication sharedApplication] openURL:[NSURL URLWithString:telstr]];
    }];

JS主动去调用Obj-C注册好的方法

setupWebViewJavascriptBridge(function(bridge) {
    bridge.callHandler('callNativeCall', {'tel': '18942325686'}, function(response) {
    alert('JSGetResponse:' + response)            
       })
})

总结：不管是Obj-C调用JS还是JS调用Obj-C 双方都可以选择是否传参，是否进行回调。