众所周知，UIWebView存在内存问题，也就是当加载一个UIWebView时，内存会一直上升趋势无法得到释放。这样在使用UIWebView进行h5交互开发时会有很大的问题。
因而苹果增加了一个新的类WKWebView，WKWebView速度更快、占用内存低。当然也有一些问题，比如说在缓存问题上会有很多的坑，不想UIWebView一样很容易进行缓存。
下面简单研究一下WKWebView交互h5的方式。（http://www.cnblogs.com/markstray/p/5757264.html）
初始化WKWebView，并添加JS端需要调用的OC端的方法名
self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/2) configuration:config]; [self.view addSubview:self.wkWebView]; NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL *baseURL = [[NSBundle mainBundle] bundleURL]; [self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL]; WKUserContentController *userCC = config.userContentController; //JS调用OC 添加处理脚本 [userCC addScriptMessageHandler:self name:@"showMobile"]; [userCC addScriptMessageHandler:self name:@"showName"]; [userCC addScriptMessageHandler:self name:@"showSendMsg"];
OC端调用JS端方法：
if (!self.wkWebView.loading) { if (sender.tag == 123) { [self.wkWebView evaluateJavaScript:@"alertMobile()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO NSLog(@"%@ %@",response,error); }]; } if (sender.tag == 234) { [self.wkWebView evaluateJavaScript:@"alertName('小红')" completionHandler:nil]; } if (sender.tag == 345) { [self.wkWebView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil]; } } else { NSLog(@"the view is currently loading content"); }
OC端供JS端调用的方法：
#pragma mark - WKScriptMessageHandler - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { NSLog(@"%@",NSStringFromSelector(_cmd)); NSLog(@"%@",message.body); if ([message.name isEqualToString:@"showMobile"]) { [self showMsg:@"我是下面的小红 手机号是:18870707070"]; } if ([message.name isEqualToString:@"showName"]) { NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body]; [self showMsg:info]; } if ([message.name isEqualToString:@"showSendMsg"]) { NSArray *array = message.body; NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",array.firstObject,array.lastObject]; [self showMsg:info]; } }
网页端代码：
<html>
<!--描述网页信息-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小黄</title>
<style>
*{
font-size: 50px;
}
.btn{height:80px; 80%; padding: 0px 30px; background-color: #0071E7; border: solid 1px #0071E7; border-radius:5px; font-size: 1em; color: white}
</style>
<script>
function clear() {
document.getElementById('mobile').innerHTML = ''
document.getElementById('name').innerHTML = ''
document.getElementById('msg').innerHTML = ''
}
//OC调用JS的方法列表
function alertMobile() {
//这里已经调用过来了 但是搞不明白为什么alert方法没有响应
//alert('我是上面的小黄 手机号是:13300001111')
document.getElementById('mobile').innerHTML = '我是上面的小黄 手机号是:13300001111'
}
function alertName(msg) {
//alert('你好 ' + msg + ', 我也很高兴见到你')
document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'
}
function alertSendMsg(num,msg) {
//window.alert('这是我的手机号:' + num + ',' + msg + '!!')
document.getElementById('msg').innerHTML = '这是我的手机号:' + num + ',' + msg + '!!'
}
//JS响应方法列表
function btnClick1() {
window.webkit.messageHandlers.showMobile.postMessage(null)
}
function btnClick2() {
window.webkit.messageHandlers.showName.postMessage('xiao黄')
}
function btnClick3() {
window.webkit.messageHandlers.showSendMsg.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])
}
</script>
</head>
<!--网页具体内容-->
<body>
<br/>
<div>
<label>小黄：13300001111</label>
</div>
<br/>
<div id="mobile"></div>
<div>
<button class="btn" type="button" onclick="btnClick1()">小红的手机号</button>
</div>
<br/>
<div id="name"></div>
<div>
<button class="btn" type="button" onclick="btnClick2()">打电话给小红</button>
</div>
<br/>
<div id="msg"></div>
<div>
<button class="btn" type="button" onclick="btnClick3()">发短信给小红</button>
</div>
</body>
</html>