iOS开发 WKWebView实现JS交互

向日葵 2022-03-28 原文

需求：利用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 的代理方法；