WebViewJavaScriptBridge的基本使用

很久很久以前...........
js和native的交互是这样的

• js调用native
  在js中加载一个网页链接，在WebView的代理方法webView:shouldStartLoadWithRequest:navigationType:
  中进行拦截并解析调用的OC方法

• native调用js
  OC执行stringByEvaluatingJavaScriptFromString方法调用js方法

• 弊端
  假如js调用OC的方法多了以后，webView:shouldStartLoadWithRequest:navigationType:的代码就会变得很臃肿，结构不够清晰

---

基于以上的原因，我们使用WebViewJavascriptBridge来进行两端的交互，因为WebViewJavascriptBridge在GitHub上是目前星级最多，广泛使用的方案；另外也提供了Android端的库，同时也可以做到Android、iOS两端统一。

WebViewJavascriptBridge的原理

把 OC 的方法注册到桥梁中，让 JS 去调用。
把 JS 的方法注册在桥梁中，让 OC 去调用。

安装并引入

pod 'WebViewJavascriptBridge'
#import "WebViewJavascriptBridge.h"

OC配置bridge

@property WebViewJavascriptBridge* bridge;//一般会设置为属性

#//初始化bridge并建立 WebViewJavaScriptBridge 和 WebView 之间的关系
 _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

[_bridge setWebViewDelegate:self];//设置代理

js端粘贴这两段 JS 函数，配置bridge

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

往bridge中注入 OC 方法，供js调用

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];

说明：

1. testObjcCallback 相当于是 OC block 的一个别名，也可以理解为方法名。
2. block 函数，就是handler后面的代码块。
3. data是 JS 端传递过来的数据。
4. responseCallback是 OC 端的 block 执行完毕之后，往 JS 端传递的数据。

往bridge中注入js 方法，供OC 调用。下面的代码是写在前端js代码中的

setupWebViewJavascriptBridge(function(bridge) {//注册 OC 要调用的 JS 方法
    
    // 声明 OC 需要调用的 JS 方法

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
            // data 是 OC 传递过来的数据.
            // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })

})

说明：

1. JS Echo 是 供OC调用的js方法名
2. data是 OC 端传递过来的数据。
3. responseCallback是 js 端执行完毕之后，往 OC 端传递的数据。

避免内存泄漏

- (void)dealloc {
    //从bridge中删除注册的OC方法，否则，可能会出现控制器无法释放的情况
  [_jsBridge removeHandler:@"scanClick"];
}

安全禁用弹框

[self.bridge disableJavscriptAlertBoxSafetyTimeout];

参考
https://www.jianshu.com/p/d12ec047ce52