iOS JS与原生交互

UIWebView

使用 JSCore 
复制代码

WKWebView

使用userContentController

经过 userContentController 把须要观察的 JS 执行函数注册起来。而后经过一个协议方法，将全部注册过的 JS 函数执行的参数传递到此协议方法中。

1、注册 须要 观察的 JS 执行函数

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

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

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

3、OC 中遵照 WKScriptMessageHandler 协议。

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

此协议方法里的 WKScriptMessage 有 name & body 两个属性。 name 能够用来判断是哪一个 JSFunc 调用了。body 则是 JSFunc 传递到 OC 的参数。
复制代码

使用 WebViewJavaScriptBridge

一、创建 WebViewJavaScriptBridge 和 WebView 之间的关系。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
复制代码

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

2.1 往桥梁中注入 OC 方法。

[_jsBridge registerHandler:@"colorClick" handler:^(id data, WVJBResponseCallback responseCallback) {
       self.navigationController.navigationBar.barTintColor = [UIColor redColor];
        responseCallback(@"颜色修改完毕!");
    }];
复制代码

OC 调用 JS 的三种状况。

1、单纯的调用 JSFunction，不往 JS 传递参数，也不须要 JSFunction 的返回值。

    [_jsBridge callHandler:@"changeBGColor"];

2、调用 JSFunction，并向 JS 传递参数，但不须要 JSFunciton 的返回值。

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

3、调用 JSFunction ，并向 JS 传递参数，也须要 JSFunction 的返回值。

    [_jsBridge callHandler:@"changeBGColor" data:@"传递给 JS 的参数" responseCallback:^(id responseData) {
        NSLog(@"JS 的返回值: %@",responseData);
    }];
复制代码

2.2 往桥梁中注入 JS 函数.

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

JS 调用 OC 的三种状况

1、JS 单纯的调用 OC 的 block
    
    WebViewJavascriptBridge.callHandler('scanClick');

2、JS 调用 OC 的 block，并传递 JS 参数
    
    WebViewJavascriptBridge.callHandler('scanClick',"JS 参数");

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

基本就是：

OC 端注册 OC 的方法，OC 端调用 JS 的函数。
JS 端注册 JS 的函数，JS 端调用 OC 的方法。
复制代码