需求:利用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];
_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.callPhone.postMessage();
window.webkit.messageHandlers.add.postMessage();
window.webkit.messageHandlers.edit.postMessage();
window.webkit.messageHandlers.delete.postMessage();
这里我们没有带参数,要是需要参数,就让前端加上,你不会没关系,也不需要你会,前端知道该怎么做。
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"]) {
}
}
到这里就结束了,当你点击 webView
上的按钮时,就能够进入我们的OC
方法里。
总结起来就三点内容:
1.前端和苹果移动端的方法名必须一致,且前端要以固定的格式来写方法,否则移动端收不到事件反馈;
2.通过 WKUserContentController
添加htm
l中预留的方法;
3.实现 WKScriptMessageHandler
的代理方法;