新聞詳情頁面，算是UI中較為復雜一種，因為其中不乏會包括以下的功能：
1、HTML的內容展示
2、夜間模式切換
3、字體大小變更
4、評論回復功能
5、評論列表的更新
在iOS中關于新聞詳情這類需求的解決方案有很多：
1、native
開發(fā)上難度比較大，而且也需要后臺來配合樣式協(xié)議的制定，優(yōu)點是原生的東西，在體驗以及各個方面都會很好，缺點也同樣的,原生的這種做法開發(fā)成本很大。
2、Hybrid
使用webView先顯示HTML頁面內容，通過與JS的通信來控制HTML頁面中的DOM，優(yōu)點：幾乎不用太多去考慮布局的問題，使用模板的形式將要顯示的數據塞進HTML模板中即可，通過OC和JS中通信來達到JS調用OC，或者OC調用JS；缺點：在H5出來這么久的今天，用戶體驗上依然不及原生，并且一些系統(tǒng)級的功能組件調用比較麻煩。
今天主要說的是<code>Hybrid</code>這種解決方案，在iOS8以前，iOSApp中使用的是UIWebView來加載web頁面，iOS8以后，Apple推出了新的框架<code>WebKit</code>，其中將 UIWebViewDelegate 與 UIWebView 重構成了 14 個類和 3 個協(xié)議，引入了不少新的功能和接口。
WKWebView 有以下幾大主要進步：
1、將瀏覽器內核渲染進程提取出 App，由系統(tǒng)進行統(tǒng)一管理，這減少了相當一部分的性能損失。
2、js 可以直接使用已經事先注入 js runtime 的 js 接口給 Native 層傳值，不必再通過苦逼的 iframe 制造頁面刷新再解析自定義協(xié)議的奇怪方式。
3、支持高達 60 fps 的滾動刷新率，內置了手勢探測。
以上特性摘自別人的話，說白了就是使用WKWebView比UIWebView性能和內存占用上都會好很多，如果要進行Hybrid開發(fā)，在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發(fā)生消息】
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發(fā)送消息】
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)
>換個心情去思考問題，也許很多難題就會迎刃而解。