上一篇讲了借助 JavaScriptCore 进行 OC 与 JS 的交互，链接请戳⬇️
OC 与 JS 交互之 JavaScriptCore
今天总结一下通过 WKWebView 来进行 OC 与 JS 交互~
WKWebView
WKWebView 是苹果爸爸在 iOS8 推出的希望替代 UIWebView 的WebView，推出了很多新的功能，新的属性，并且通过 WKScriptMessageHandler、WKNavigationDelegate、WKUIDelegate 这三个协议，让请求、执行 web 页面的过程变得更加可控。
与之交互用到的三大代理：
WKNavigationDelegate：与页面导航加载相关
WKUIDelegate：与 JS 交互时的 UI 展示相关，比较 JS 的alert、confirm、prompt
WKScriptMessageHandler：与 JS 交互相关，通常是 iOS 端注入名称，JS 端通过 window.webkit.messageHandlers.{NAME}.postMessage()来发消息到 iOS 端
关于 WKWebView 的更多细节有时间再总结下，今天先说说有关 OC 与 JS 交互的过程。
OC 调用 JS
WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
configuration.userContentController = [WKUserContentController new];
NSString *sourceStr = @"alert('在载入webview时通过oc注入的js方法');";
WKUserScript *script = [[WKUserScript alloc] initWithSource:sourceStr injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
[configuration.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
_webView.UIDelegate = self;
生成的 configuration ，包含了之后新建 webView 的一系列属性；再生成一个脚本片段，包含 JS 的 alert 语句，将其加给 configuration 的 userContentController，在开始加载 web 页面时，注入 JS 方法，执行这个 JS 语句。
或者用 webView 的 evaluateJavaScript 直接调用 JS，与 JavaScriptCore 中的 evaluateScript 类似：
NSString *script = @"alert('webview 直接调用 JS 方法');";
[self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"result: %@, error: %@", result, error);
}];
由于苹果爸爸要求用 native 的方式处理 web 中的弹框，这里就需要
controller 实现 UIDelegate 中的方法，拿到 JS 中的参数，生成弹框，提醒用户：
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alertController animated:YES completion:nil];
}
效果如图：
UIDelegate 有不同的协议方法分别对应 native 确定、选择、输入文本框的等弹框，效果还不错~
JS 调用 OC
先新建一个 html 文件如下：
<!DOCTYPE html>
<html>
<head>
<title>test javascript</title>
<style type="text/css">
* {font-size: 40px;}
</style>
</head>
<body>
<div style="margin-top: 100px">
<input type="button" value="js call oc" onclick="jsCallOC()">
</div>
<script type="text/javascript">
function jsCallOC(){
var message = {
'method' : 'jsCallOC',
'param1' : 'zn',
};
window.webkit.messageHandlers.AppModel.
postMessage({body: message});
}
</script>
</body>
</html>
点击按钮，调用 JS 方法，在 JS 中
window.webkit.messageHandlers.{NAME}.postMessage() 将 JS 中的对象转换为 OC 中的处理消息对象，并且将 message 传递给他。
//将 self 作为 AppModel ，处理 JS 传递过来的数据
[configuration.userContentController addScriptMessageHandler:self name:@"AppModel"];
拿到 message 后，self 需要继承 WKWebView 的另一个协议 WKScriptMessageHandler 的方法，解析消息，从而实现 JS 到 OC 的调用：
// MARK: - WKScriptMessageHandler
// 注入 JS 名称，在 JS 端通过 window.webkit.messageHandlers.AppModel.postMessage() 方法来发送消息到 native
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"messageBody: %@", message.body);
NSLog(@"messageName: %@", message.name);
}
参考博客：
WKWebView
WKWebView特性及使用
