无缝交互、高效沟通：iOS WKWebView 与 JS 的封装实践

一、使用方式

1. 导入依赖

pod 'WKJSWebView'

2. 在需要使用 WKJSWebView 的地方，引入头文件

#import <WKJSWebView/WKJSWebView.h>

3. 创建 WKJSWebView 实例

WKJSWebView *webView = [[WKJSWebView alloc] initWithFrame:CGRectZero];

4. 设置 WKJSWebView 的代理

webView.delegate = self;

5. 加载 HTML 内容

[webView loadHTMLString:@"<h1>Hello World!</h1>" baseURL:nil];

6. 原生调用 JS

[webView evaluateJavaScript:@"alert('Hello World!')" completionHandler:nil];

7. JS 调用原生

webView.jsBridgeDelegate = self;

二、原理解析

基本思想就是通过 WKScriptMessageHandler 来实现原生调用 JS 和 JS 调用原生。

1. 原生调用 JS

当原生调用 JS 时，会创建一个 WKScriptMessage 对象，并将其发送给 WKWebView。WKWebView 会将该消息传递给 WKScriptMessageHandler，由 WKScriptMessageHandler 来处理该消息。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // 处理收到的消息
}

2. JS 调用原生

当 JS 调用原生时，会创建一个 JavaScript 对象，并将其传递给 WKScriptMessage。WKWebView 会将该对象传递给 WKScriptMessageHandler，由 WKScriptMessageHandler 来处理该对象。

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *))completionHandler {
    // 处理收到的对象
}

三、封装的 WKJSWebView

封装后的 WKJSWebView 可以在 GitHub 上找到，地址是：https://github.com/CoderMJLee/WKJSWebView。

WKJSWebView 的使用非常简单，只需导入头文件、创建实例、设置代理、加载 HTML 内容即可。原生调用 JS 和 JS 调用原生也非常方便，只需调用相应的 API 即可。

四、总结

本文对 WKWebView 进行了封装，参考了 EasyJSWebView 的交互方式，并进行了修改和增加。封装后的 WKJSWebView 可以轻松实现原生调用 JS 和 JS 调用原生，大大提高了开发效率。