新闻详情页面，算是UI中较为复杂一种，因为其中不乏会包括以下的功能：
1、HTML的内容展示
2、夜间模式切换
3、字体大小变更
4、评论回复功能
5、评论列表的更新
image
在iOS中关于新闻详情这类需求的解决方案有很多：
1、native
开发上难度比较大，而且也需要后台来配合样式协议的制定，优点是原生的东西，在体验以及各个方面都会很好，缺点也同样的,原生的这种做法开发成本很大。
2、Hybrid
使用webView先显示HTML页面内容，通过与JS的通信来控制HTML页面中的DOM，优点：几乎不用太多去考虑布局的问题，使用模板的形式将要显示的数据塞进HTML模板中即可，通过OC和JS中通信来达到JS调用OC，或者OC调用JS；缺点：在H5出来这么久的今天，用户体验上依然不及原生，并且一些系统级的功能组件调用比较麻烦。
今天主要说的是<code>Hybrid</code>这种解决方案，在iOS8以前，iOSApp中使用的是UIWebView来加载web页面，iOS8以后，Apple推出了新的框架<code>WebKit</code>，其中将 UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议，引入了不少新的功能和接口。
WKWebView 有以下几大主要进步：
1、将浏览器内核渲染进程提取出 App，由系统进行统一管理，这减少了相当一部分的性能损失。
2、js 可以直接使用已经事先注入 js runtime 的 js 接口给 Native 层传值，不必再通过苦逼的 iframe 制造页面刷新再解析自定义协议的奇怪方式。
3、支持高达 60 fps 的滚动刷新率，内置了手势探测。
以上特性摘自别人的话，说白了就是使用WKWebView比UIWebView性能和内存占用上都会好很多，如果要进行Hybrid开发，在iOS8之后，强烈推荐使用
WKWebView，因为同样的内容，在使用UIWebView时比WKWebView要慢很多，这在体验上是很致命的。
使用
<i class="fa fa-github"></i>WKWebViewJavascriptBridge GitHub地址
Objective-C
引用库
<pre><code class='objc hljs'>
#import <WebKit/WebKit.h>
#import "WKWebViewJavascriptBridge.h"
```</code></pre>
初始化
<pre><code class='objc hljs'>
WKWebView* webView = [[WKWebView alloc] init];
webView.navigationDelegate = self;
webView.UIDelegate = self;
[self.view addSubview:webView];
self.webView = webView;
//打开WKWebViewJavascriptBridge 的log
[WKWebViewJavascriptBridge enableLogging];
self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView];
//设置代理
[self.bridge setWebViewDelegate:self];
</code></pre>
加载本地的HTML文件
<pre><code class='objc hljs'>
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"Test" ofType:@"html"];
NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[webView loadHTMLString:[self replaceWithModelAppHemlString:appHtml] baseURL:baseURL];
</code></pre>
绑定Handler
<pre><code class='objc hljs'>
//registerHandler 【OC接收JS的消息】
[self.bridge registerHandler:@"ClickTest" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"%@",data);
}];
//callHandler【OC向JS发生消息】
id data = @{ @"test": @"news" };
[self.bridge callHandler:@"ClickTest" data:data responseCallback:^(id response) {
}];
</code></pre>
>JavaScirpt
初始化
<pre><code class='objc hljs'>
// WebViewJavascriptBridge 初始化
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
//WebViewJavascriptBridge 绑定事件
setupWebViewJavascriptBridge(function(bridge) {
//registerHandler【JS接收OC的消息】
bridge.registerHandler('ClickTest', function(data, responseCallback) {
//改变背景颜色为黑色【Jquery操作DOM】
$("body").css("backgroundColor","#000000");
})
//callHandler【JS向OC发送消息】
bridge.callHandler('ClickTest', {'test': 'value'}, function responseCallback(responseData) {
})
}
</code></pre>
<p style = 'color:orange;font-size:30px;margin-top:20px;'><i class="fa fa-info-circle"></i>注意事项</p>
<div style = 'color:red;font-size:18px;'>
1、使用WKWebView加载本地的HTML，在iOS8不能在HTML文件中引用本地的css或者js或者图片文件，只能在iOS9中这么做，iOS8需要将文件copy到temp文件夹中才行，所有不建议使用外部的css和js，可以引用远程的。<br/>
2、在iOS8中，使用一些远程的cdn的css或者js文件，必须注意在引用标签上加上charset属性，不然css和js库将会乱码<br/>
3、WKWebView性能比UIViewView性能好很多，谁用谁知道。<br/>
</div>
<br/>
####演示和demo查看
<i class="fa fa-github"></i>[WKWebViewDemo Github地址](https://github.com/MethodName/WKWebViewDemo)
>换个心情去思考问题，也许很多难题就会迎刃而解。
网友评论