第一步需要先导入WebViewJavascriptBridge相关代码至iOS工程中->传送门WebViewJavascriptBridge

OC代码

1.先初始化相关内容

//初始化wkwebview
WKWebView * webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 130, self.view.frame.size.width, self.view.frame.size.height)];
//写代理
webView.navigationDelegate = self;
webView.UIDelegate = self;
[self.view addSubview:webView];
[WebViewJavascriptBridge enableLogging];
//初始化WebViewJavascriptBridge设置代理
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];

//js调用oc的方法先注册
[self jsCallOC];
//加载html
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"nativeJS" ofType:@"html"];
[webView loadFileURL:[NSURL fileURLWithPath:filePath] allowingReadAccessToURL:[NSBundle mainBundle].resourceURL];
//写一个按钮
UIButton * btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 90, self.view.frame.size.width, 40)];
btn.backgroundColor = [UIColor yellowColor];
[btn setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
[btn setTitle:@"OC调JS" forState:(UIControlStateNormal)];
[btn addTarget:self action:@selector(registerOCCallJS) forControlEvents:(UIControlEventTouchUpInside)];
[self.view addSubview:btn];

2.代理方法

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
NSLog(@"webViewDidStartLoad");
}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"webViewDidFinishLoad");
}
//下面的是弹框的展示需要遵循代理UIDelegate
//alert
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
    
}
//confirm
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    //    DLOG(@"msg = %@ frmae = %@",message,frame);
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(NO);
    }])];
    [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(YES);
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
}
//prompt
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.text = defaultText;
    }];
    [alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(alertController.textFields[0].text?:@"");
    }])];
    
    [self presentViewController:alertController animated:YES completion:nil];
}

3.交互方法

//js调用oc
- (void)jsCallOC{
    //js调用oc先注册这个方法
    [_bridge registerHandler:@"JScallOC" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"js调用oc成功了参数为%@", data);
        responseCallback(@"js调用oc后回调给js的参数");
    }];
}

//oc调用js方法
- (void)registerOCCallJS{
    //oc调js不带参数不带回调
    [_bridge callHandler:@"OCCallJS"];
    //oc调js带参数不带回调
//    [_bridge callHandler:@"OCCallJSParameter" data:@"带参数不带回调"];
    //oc调js带参数带回调
//    [_bridge callHandler:@"OCCallJSParameterBlock" data:@"带参数带回调" responseCallback:^(id response) {
//        NSLog(@"testJavascriptHandler responded: %@", response);
//    }];
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="JSCallOC">js调用oc</div>
    <div id="textOne"></div>
</body>

<script>
    //这个方法是必须的
    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)
    }

    //这也是固定的,OC调JS,需要给OC调用的函数必须写在这个函数里面
    setupWebViewJavascriptBridge(function(bridge) {
        //oc调js不带参数不带回调
        bridge.registerHandler('OCCallJS',function() {
            alert("oc调js不带参数不带回调");
        })
        //oc调用js带参数不带回调
        bridge.registerHandler('OCCallJSParameter',function(params) {
            alert("oc调js带参数不带回调"+params);
        })
        //oc调js带参数带回调
        bridge.registerHandler('OCCallJSParameterBlock',function (params,responseCallback) {
            alert("oc调js带参数带回调");
            responseCallback("参数回调");
        })
    })
    // js调用oc
    $(".JSCallOC").click(function () {
        WebViewJavascriptBridge.callHandler('JScallOC',"我是js调用oc的参数",function(response) {
            // console.log("这是oc返回js的参数"+response);
            $("#textOne")[0].innerHTML = response;
        });
    })

</script>
</html>