WKWebView中OC与JS的交互

现在iOS项目中越来越多的使用到HTML，以更加方便、快捷的实现一些功能。当然有了混合开发，免不了需要OC与JS的交互，实现一些通讯。这个项目主要就是解决了WKWebView中OC与JS的交互，非常的方便、高效。

我采用了本地的Html文件，集成了扫一扫、分享、登录、地图选点、定位、支付等功能，不过分享，登录，支付，定位等功能需要去申请相应的开发者，得到参数补充到config.h文件中，就可以使用了。看一下截图：

Simulator Screen Shot - iPhone 8 - 2018-08-28 at 22.32.06.png

我们主要讲WebViewJavascriptBridge的使用，先看看它的头文件：

# 初始化bridge
+ (instancetype)bridgeForWebView:(WKWebView*)webView;
# 打开打印日志
+ (void)enableLogging;
# 向JS注册方法，handlerName是OC中的方法名，handler是回调
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
# OC调用JS方法，handlerName是JS中的方法名
- (void)callHandler:(NSString*)handlerName;
# OC调用JS方法，handlerName是JS中的方法名，data是传递过去的参数
- (void)callHandler:(NSString*)handlerName data:(id)data;
# OC调用JS方法，handlerName是JS中的方法名，data是传递过去的参数，responseCallback是JS处理的回调
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
# 重置消息队列和响应队列
- (void)reset;
# 设置bridge的代理
- (void)setWebViewDelegate:(id)webViewDelegate;
- (void)disableJavscriptAlertBoxSafetyTimeout;

使用方法为：

1.初始化WKWebViewJavascriptBridge
self.webViewBridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
2.设置WKWebViewJavascriptBridge的代理
[self.webViewBridge setWebViewDelegate:self];
3.向JS注册OC方法
[self registerNativeFunctions];
4.需要调用JS方法时
- (void)OCCallJS
{
    [self.webViewBridge callHandler:@"OCCallJS" data:nil responseCallback:^(id responseData) {
        NSLog(@"OC调用JS");
    }];
}

当然还有最最重要的一点，这一段代码必须要放在JS中，否则JS无法调用OC方法：

/*这段代码是固定的，必须要放到js中*/
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)
}

附上的地址：WebViewJavascriptBridge
同时附上Demo地址：JTWKWebView_NativeToJS
希望对大家有用，如果有不对的地方欢迎指正，最后希望喜欢的小伙伴点赞，谢谢。