WKWebView的JS交互

2019-01-01

最近又双叕换了项目组，相比上一个项目的庞大体量来说，这个项目实在太轻量了，但相应的，很多组件就需要自己来写，对一个渴望进步（不喜欢用别人的老旧代码）的程序员来说，这是一个很好的机会来接触、总结一些技术点。就网页加载方面吧，不可避免的遇到了JS交互，总结一下

以前在用 UIWebView 的时候，都是用三方库 WebViewJavascriptBridge 来实现的，由于不想在项目中引入不必要的三方控件，所以也研究一下原生的实现方法，发现实现也是比较简单的。

说明一下，由于 UIWebView 在 iOS12 的时候即将作废，而 WKWebView 在 iOS8 的时候开始启用，也有消息说苹果爸爸会在今年3月份之后要求用 Xcode10.1 之后的版本打包，且iOS版本要在 ios11之上，所以就不研究 UIWebView 了。

好了，干货开始：

一、JS 调用 OC 方法

JS 代码：

<!DOCTYPE html>
<html>
<head>
	<title>哈喽</title>
	<meta charset="utf-8" name="viewport" content="width=device-width">
        <script type="text/javascript">
            
            function clickedBtn() {
                window.webkit.messageHandlers.h5Share.postMessage({
                    "key" : "This is value"
                });
            }
        </script>
</head>

<body>
    <h1>测试一下</h1>
    <p></p>
	<button onclick="clickedBtn()">这是一个按钮</button>
</body>
</html>

这里有个坑，就是 postMessage 的参数不能不写，如果真没参数，要写成 postMessage(null)，否则在OC里调不起方法，由于h5只懂一点点，所以我也不知道啥原因。

再贴 OC 代码：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [WKUserContentController new];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
[_webView loadRequest:[NSURLRequest requestWithURL:[NSBundle.mainBundle URLForResource:@"aa" withExtension:@"html"]]];

[self.view addSubview:_webView];

//注册js方法
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"h5Share"];

需要实现 WKScriptMessageHandler 的方法：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

    if ([message.name isEqualToString:@"h5Share"]) {
        
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"点击了js按钮，参数是：" message:[message.body description] preferredStyle:UIAlertControllerStyleAlert];
        [alert addAction:[UIAlertAction actionWithTitle:@"Sure" style:UIAlertActionStyleCancel handler:nil]];
        [self presentViewController:alert animated:true completion:nil];
    }
}

以上是让 JS 调用 OC 端的方法，例子里就是 JS 唤起 OC 端的弹窗。

二、OC 调用 JS 方法

js代码：

<!DOCTYPE html>
<html>
<head>
	<title>哈喽</title>
	<meta charset="utf-8" name="viewport" content="width=device-width">
        <script type="text/javascript">
            
            function clickedBtn() {
                window.webkit.messageHandlers.h5Share.postMessage({
                    "key" : "This is value"
                });
            }

            //这个方法就是 OC 要调用的方法
            function ocCallJS(p) {
                document.getElementById('bodyId').style = "background-color:" + p;
                return p;
            }
        </script>
</head>

<body id="bodyId" style="background-color: #ffffff">
    <h1>测试一下</h1>
    <p></p>
	<button onclick="clickedBtn()">这是一个按钮</button>

</body>
</html>

OC 代码比较简单，就是在需要的时候调用一个 WKWebView 的一个方法：

//参数要用引号括起来
NSString *str = [NSString stringWithFormat:@"ocCallJS('%@')", @"#e47f51"];

[_webView evaluateJavaScript:str completionHandler:^(id obj, NSError * _Nullable error) {
    //obj: 是js方法的返回值   error：若js方法正确执行则返回nil，否则返回对应参数
    NSLog(@"obj: %@ er：%@", obj, error);
}];

H5 还在初学阶段，所以仅是用传入的色值改变背景色了，复杂的传参也一样了