Hybrid App—— WKWebView demo
2017-10-29 本文已影响0人
牛程程
市场现有3类主流APP类型，分别为：Web App、Hybrid App、 Native App。
Hybrid App综合了Web APP和Native App的优点，开发效率高、跨平台、低层本，用户体验良好。现在有很多开发平台就选择了这样的开发模式，如淘宝，简书等。
OC和JS之间的交互，有二种方式：使用JavaScriptCore、WebKit。
iOS8之后，苹果公司推出了WebKit框架，用WKWebView来代替UIWebView。
与UIWebView相比：
1.WKWebView的访问速度更快，稳定性更好，占内存更小。
2.WKWebView支持手势。
3.提供了更多的接口和新功能。
4.优化了和H5的交互方式。
1、创建WKWebView实例，配置实例。加载本地的html。
- (WKWebViewConfiguration *)webConfig
{
if(_webConfig == nil)
{
_webConfig = [WKWebViewConfiguration new];
}
return _webConfig;
}
- (WKUserContentController *)userViewController
{
if(_userViewController == nil)
{
_userViewController = [WKUserContentController new];
}
return _userViewController;
}
self.webConfig.userContentController = self.userViewController;
self.webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:self.webConfig];
NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[self.webView loadRequest:request];
JS -> OC
self.userViewController 注入新对象，用来和JS交互。可以注入多个对象，通过对象名称，来判断执行。
注意：addScriptMessageHandler容易引起循环引用，导致控制器无法被释放。
- (void)viewWillAppear:(BOOL)animated
{
[self.userViewController addScriptMessageHandler:self name:@"Native"];
}
- (void)viewWillDisappear:(BOOL)animated
{
[self.userViewController removeScriptMessageHandlerForName:@"Native"];
}
JS发送数据给OC。
window.webkit.messageHandlers.Native.postMessage('changeText');
加入WKScriptMessageHandler 。当JS调用OC时，下面的方法就会被执行。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if ([@"Native" isEqualToString:message.name])
{
if ([@"changeText" isEqualToString:message.body])
{
[self changeText];
}
if([@"pushVC" isEqualToString:message.body])
{
[self pushToVC];
}
}
}
OC -> JS
使用- evaluateJavaScript:completionHandler: 调用JS
- (void)changeText
{
NSString *changeStr = @"changeButtonWithText('这是一个测试')";
[self.webView evaluateJavaScript:changeStr completionHandler:^(id _Nullable result, NSError * _Nullable error)
{
NSLog(@"%@----%@",result, error);
}];
}
html 部分代码
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2></h2>
<input type="button" value="改变下面的语言" onclick="changeText()">
<p id="Id1">It is test .</p>
</div>
<div>
</div>
<a onclick = "pushToVC()" href="">点击跳转</a>
<script>
var changeText = function()
{
window.webkit.messageHandlers.Native.postMessage('changeText');
}
var changeButtonWithText = function(str)
{
document.getElementById("Id1").innerText = str;
}
var alertShow = function(str)
{
alert(str);
}
var changeColor = function ()
{
document.getElementById("Id1").style.color = '#ff9900';
}
var pushToVC = function()
{
window.webkit.messageHandlers.Native.postMessage('pushVC');
}
</script>
</body>
</html>
