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

1、建立 WebViewJavaScriptBridge 和 WebView 之间的关系。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

2、往桥梁中注入 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 的方法。