js与OC交互 — WKWebView + WebViewJavascriptBridge

本文介绍WebViewJavaScriptBridge的使用，来操作js与oc的交互

下载地址:WebViewJavascriptBridge

1.编译环境配置

image.png

2.创建WKWebview

- (void)initWKWebView
{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [WKUserContentController new];
    
    WKPreferences *preferences = [WKPreferences new];
    preferences.javaScriptCanOpenWindowsAutomatically = YES;
    preferences.minimumFontSize = 30.0;
    configuration.preferences = preferences;
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    
    NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
    NSString *localHtml = [NSString stringWithContentsOfFile:urlStr encoding:NSUTF8StringEncoding error:nil];
    NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
    [self.webView loadHTMLString:localHtml baseURL:fileURL];
    
    self.webView.UIDelegate = self;
    [self.view addSubview:self.webView];
}

3.创建WebViewJavascriptBridge实例

_webViewBridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
    [_webViewBridge setWebViewDelegate:self];

4.注册js要调用的Native 功能

[self registerNativeFunctions];
#pragma mark - private method
- (void)registerNativeFunctions
{
    [self registScanFunction];
    
    [self registShareFunction];
    
    [self registLocationFunction];
    
    [self regitstBGColorFunction];
    
    [self registPayFunction];
    
    [self registShakeFunction];
}

- (void)registLocationFunction
{
    //    - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
     //   后面的block参数是js要调用的Native实现   handlerName 是这个native实现的别名
    
    [_webViewBridge registerHandler:@"locationClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // 获取位置信息
        
        NSString *location = @"广东省深圳市南山区学府路XXXX号";
        // 将结果返回给js
        responseCallback(location);
    }];
}

5.在HTML添加关键的JS (查看html文件)

HTML中添加关键的js.png

文件详情

 1.方法声明
     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)
     }
     
     2.调用上述的方法
     setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
     alert('JS方法被调用:'+data);
     responseCallback('js执行过了');
     })
     })
     主动调用setupWebViewJavascriptBridge有两个目的：
     1、执行一次wvjbscheme://__BRIDGE_LOADED__请求。
     2、注册Native 要调用的js 功能。

6.在js中调用 Native 功能

讲完过程，终于到了 js 调用Native 的用法了。其实非常的简单，例如我想要利用Native 获取定位信息，那么在HTML中添加一个按钮，onclick事件是locationClick()，按照如下实现即可。
     function locationClick() {
     WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
     alert(response);
     document.getElementById("returnValue").value = response;
     });
     }
     
     // 没有参数，有回调可以这样写
     function locationClick() {
     WebViewJavascriptBridge.callHandler('locationClick',function(response) {
     alert(response);
     document.getElementById("returnValue").value = response;
     });
     }
     
     // 没有参数，又不需要回调可以这样写
     function shake() {
     WebViewJavascriptBridge.callHandler('shakeClick');
     }
  

7.Native调用JS功能

- (void)rightClick
{
    //    // 如果不需要参数，不需要回调，使用这个
    //    [_webViewBridge callHandler:@"testJSFunction"];
    //    // 如果需要参数，不需要回调，使用这个
    //    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
    // 如果既需要参数，又需要回调，使用这个
    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
        NSLog(@"调用完JS后的回调：%@",responseData);
    }];
}

本文参考相关技术博客，简单整理WebViewJavascriptBridge与WKWebView交互的操作使用