WebViewJavaScriptBridge 基本使用

在 iOS 开发 Hybrid App 的时分，有两个 WebView 可以选择。
UIWebView & WKWebView。

这两个 WebView 控件，可以完全只凭借 iOS 自带的结构进行 OC & JS 交互。

1. UIWebView 运用 javaScriptCore.
2. WKWebView 运用 WKUserContentController.

UIWebView 原生的交互原理
通过一个 JSContext 获取 UIWebView 的 JS 实行上下文。
然后通过这个上下文，进行 OC & JS 的双端交互。

 _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"%@",@"获取 WebView JS 实行环境失利了!");
    };

WKWebView 原生交互原理

通过 userContentController 把需求调查的 JS 实行函数注册起来。
然后通过一个协议方法，将所有注册过的 JS 函数实行的参数传递到此协议方法中。

注册 需求 调查的 JS 实行函数

 [webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];

在 JS 中调用这个函数并传递参数数据

window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});

OC 中恪守 WKScriptMessageHandler 协议。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

此协议方法里的 WKScriptMessage 有 name & body 两个特色。 name 可以用来判别是哪个 JSFunc 调用了。body 则是 JSFunc 传递到 OC 的参数。

---

WebViewJavaScriptBridge

WebViewJavaScriptBridge 用于 WKWebView & UIWebView 中 OC 和 JS 交互。
它的底子原理是：

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

WebViewJavascriptBridge 底子原理

注册自己，调用它人。

---

WebViewJavaScriptBridge 运用的底子进程

1. 首要在项目中导入 WebViewJavaScriptBridge 结构。

pod ‘WebViewJavascriptBridge’

2. 导入头文件 #import <WebViewJavascriptBridge.h> 。
3. 树立 WebViewJavaScriptBridge 和 WebView 之间的联络。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

4. 在HTML 文件中，复制粘贴这两段 JS 函数。

function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback]; // 创立一个 WVJBCallbacks 大局特色数组，并将 callback 刺进到数组中。
        var WVJBIframe = document.createElement('iframe'); // 创立一个 iframe 元素
        WVJBIframe.style.display = 'none'; // 不显现
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 特色
        document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当时文导航上。
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    // 这儿主要是注册 OC 行将调用的 JS 方法。
    setupWebViewJavascriptBridge(function(bridge){
    });

到此为止，底子的准备工作就做完了。现在需求往桥梁中注入 OC 方法 和 JS 函数了。

---

往桥梁中注入 OC 方法 和 JS 函数

往桥梁中注入 OC 方法。

 [_jsBridge registerHandler:@"scanClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"dataFrom JS : %@",data[@"data"]);
        responseCallback(@"扫描成果 : www.baidu.com");
    }];

这段代码的意思：

1. scanClick 是 OC block 的一个别号。
2. block 自身，是 JS 通过某种方法调用到 scanClick 的时分，实行的代码块。
3. data ，因为 OC 这端由 JS 调用，所以 data 是 JS 端传递过来的数据。
4. responseCallback OC 端的 block 实行完毕之后，往 JS 端传递的数据。

往桥梁中注入 JS 函数.

OC 方法，在 OC 中注入。JS 的方法所以必定就需求在 JS 中注入的。（好像是废话)
在 JS 的方法如何注入到桥梁呢？

之前，在准备工作的时分，有两段 JS 代码。
需求在第二段 JS 代码中，注入 JS 的函数。

// 这儿主要是注册 OC 行将调用的 JS 方法。
    setupWebViewJavascriptBridge(function(bridge){
        // 声明 OC 需求调用的 JS 方法。
        bridge.registerHanlder('testJavaScriptFunction',function(data,responseCallback){
            // data 是 OC 传递过来的数据.
            // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
            alert("JS 被 OC 调用了.");
            responseCallback({data: "js 的数据",from : "JS"});
        })
    });

这段代码的意思：

1. testJavaScriptFunction 是注入到桥梁中 JS 函数的别号。以供 OC 端调用。
2. 回调函数的 data。 既然 JS 函数由 OC 调用，所以 data 是 OC 端传递过来的数据。
3. responseCallback 。 JS 调用在被 OC 调用完毕之后，向 OC 端传递的数据。

底子便是：

OC 端注册 OC 的方法，OC 端调用 JS 的函数。
JS 端注册 JS 的函数，JS 端调用 OC 的方法。

场景

JS -> OC 的交互

在 HTML 中，有个按钮，点击这个按钮，批改 NavigationBar 的颜色。

1. 在 OC 端，往桥梁注入一个批改 NavigationBar 颜色的 block.
2. 在 JS 端，调用这个 block，来间接的抵达批改颜色的意图。

首要，在 OC 中，通过 WebViewJavascriptBridge 注册一个批改 navigationBar 颜色的 Block。

[_jsBridge registerHandler:@"colorClick" handler:^(id data, WVJBResponseCallback responseCallback) {
       self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1.0];
        responseCallback(@"颜色批改完毕!");
    }];

然后再 JS 中，通过某种方法去调用这个 OC 的 block。

WebViewJavascriptBridge.callHandler('colorClick',function(dataFromOC) {
            alert("JS 调用了 OC 注册的 colorClick 方法");
            document.getElementById("returnValue").value = dataFromOC;
        })

这儿通过某种方法便是运用 WebViewJavascriptBridge.callHandler(‘OC 中block 别号’,callback) 的方法来调用。

OC -> JS 的交互

OC 上有一个UIButton,点击这儿按钮，把 HTML body 的颜色批改成橙色。

首要，往桥梁中，注入一个批改 HTML body 颜色的 JSFunction。

// 在这儿声明 OC 需求自动调用 JS 的方法。
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.registerHandler('changeBGColor',function(data,responseCallback){
            // alert('aaaaaa');
            document.body.style.backgroundColor = "orange";
            document.getElementById("returnValue").value = data;
        });
    }); 

然后在 OC 端通过桥梁调用这个 changeBGColor。

 [_jsBridge callHandler:@"changeBGColor" data:@"把 HTML 的布景颜色改成橙色!!!!"];

实行效果：

---

补偿

OC 调用 JS 的三种状况。

    // 单纯的调用 JSFunction，不往 JS 传递参数，也不需求 JSFunction 的返回值。
    [_jsBridge callHandler:@"changeBGColor"];
    // 调用 JSFunction，并向 JS 传递参数，但不需求 JSFunciton 的返回值。
    [_jsBridge callHandler:@"changeBGColor" data:@"把 HTML 的布景颜色改成橙色!!!!"];
    // 调用 JSFunction ，并向 JS 传递参数，也需求 JSFunction 的返回值。
    [_jsBridge callHandler:@"changeBGColor" data:@"传递给 JS 的参数" responseCallback:^(id responseData) {
        NSLog(@"JS 的返回值: %@",responseData);
    }];

JS 调用 OC 的三种状况。

// JS 单纯的调用 OC 的 block
WebViewJavascriptBridge.callHandler('scanClick');
// JS 调用 OC 的 block，并传递 JS 参数
WebViewJavascriptBridge.callHandler('scanClick',"JS 参数");
// JS 调用 OC 的 block，传递 JS 参数，并承受 OC 的返回值。
WebViewJavascriptBridge.callHandler('scanClick',{data : "这是 JS 传递到 OC 的扫描数据"},function(dataFromOC){
            alert("JS 调用了 OC 的扫描方法!");
            document.getElementById("returnValue").value = dataFromOC;
        });

可以依据实际状况，选择适宜的方法。

关于在 OC 中，往桥梁中注入 block 的留心点。

在当时控制器消失的时分，要记得把注入到桥梁中的 OC block，从桥梁中删去。
不然，可能会出现控制器无法开释的状况。

- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    [_jsBridge removeHandler:@"scanClick"];
    [_jsBridge removeHandler:@"colorClick"];
    [_jsBridge removeHandler:@"locationClick"];
    [_jsBridge removeHandler:@"shareClick"];
    [_jsBridge removeHandler:@"payClick"];
    [_jsBridge removeHandler:@"goBackClick"];
}

最后总结：

1. UIWebView & JavaScriptCore 等于原生的 JS & OC 交互计划。
2. WKWebView & userContentController 等于原生了 JS & OC 交互计划。
3. WebViewJavascriptBridge 可以搭配 UIWebView & WKWebView 进行 OC & JS 交互。
4. WebViewJavascriptBridge 运用核心，OC 注入 OC 的方法，让 JS 调用。JS 注入 JS 函数，让 OC 调用。
5. WebViewJavaScriptBridge 运用的需求 4个前提进程。