iOS开发 WKWebView实现JS交互

需求：利用webView加载H5页面，并实现点击H5页面的按钮触发事件，事件是调用OC的方法。
简单说就是JS调用OC的方法，这里我们选择的是WKWebView，至于为什么不用UIWebView，自行百度或者看开发文档。
实现：
1、首先应该倒入 WebKit 框架 #import <WebKit/WebKit.h>

2、懒加载一个webView

//需要的代理 <WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler> @property (nonatomic , strong) WKWebView *webView; - (WKWebView *)webView{ if (!_webView) { WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init]; _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, NAVHEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVHEIGHT) configuration:config];
 if (@available(iOS 11.0, *)) {
            [configuration setURLSchemeHandler:self.handler forURLScheme:@"webImage"];
        } _webView.UIDelegate = self; _webView.navigationDelegate = self; NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:self.structureUrl]]; [_webView loadRequest:request]; } return _webView; }

3、JS端的方法构成HTML代码：

切记在html中预留接口，格式必须是固定的：

window.webkit.messageHandlers.actionName.postMessage('parameter'); actionName：为方法名 parameter：为传递过来的参数，在html中叫做对象，到OC我们这里就是字典

举个例子：

window.webkit.messageHandlers.actionName.postMessage('parameter'); actionName：为方法名 parameter：为传递过来的参数，在html中叫做对象，到OC我们这里就是字典

这里我们没有带参数，要是需要参数，就让前端加上，你不会没关系，也不需要你会，前端知道该怎么做。

4、OC端添加JS方法处理器：

  WKUserContentController *userContentController = _webView.configuration.userContentController;
        [userContentController addScriptMessageHandler:self name:@"callPhone"]; [userContentController addScriptMessageHandler:self name:@"add"]; [userContentController addScriptMessageHandler:self name:@"edit"]; [userContentController addScriptMessageHandler:self name:@"delete"];

这里我们添加了了四个方法，切记着四个方法的名称无比与JS端一致。

5、实现WKScriptMessageHandler代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"ScriptMessage 传递的消息内容 : %@",message.body); if ([message.name isEqualToString:@"callPhone"]) { } if ([message.name isEqualToString:@"add"]) { } if ([message.name isEqualToString:@"edit"]) { } if ([message.name isEqualToString:@"delete"]) { } }

6、在界面消失的时候清除JS方法

- (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated];  [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"callPhone"]; [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"add"]; [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"edit"];
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"delete"];

 }

到这里就结束了，当你点击 webView 上的按钮时，就能够进入我们的OC方法里。
总结起来就三点内容：
1.前端和苹果移动端的方法名必须一致，且前端要以固定的格式来写方法，否则移动端收不到事件反馈；
2.通过 WKUserContentController 添加html中预留的方法；
3.实现 WKScriptMessageHandler 的代理方法；