新聞詳情頁面第晰，算是UI中較為復(fù)雜一種碱茁，因為其中不乏會包括以下的功能：
1裸卫、HTML的內(nèi)容展示
2、夜間模式切換
3纽竣、字體大小變更
4墓贿、評論回復(fù)功能
5、評論列表的更新
在iOS中關(guān)于新聞詳情這類需求的解決方案有很多：
1蜓氨、native
開發(fā)上難度比較大聋袋，而且也需要后臺來配合樣式協(xié)議的制定，優(yōu)點是原生的東西穴吹，在體驗以及各個方面都會很好幽勒，缺點也同樣的,原生的這種做法開發(fā)成本很大。
2港令、Hybrid
使用webView先顯示HTML頁面內(nèi)容啥容，通過與JS的通信來控制HTML頁面中的DOM，優(yōu)點：幾乎不用太多去考慮布局的問題顷霹，使用模板的形式將要顯示的數(shù)據(jù)塞進(jìn)HTML模板中即可咪惠，通過OC和JS中通信來達(dá)到JS調(diào)用OC，或者OC調(diào)用JS泼返；缺點：在H5出來這么久的今天硝逢，用戶體驗上依然不及原生，并且一些系統(tǒng)級的功能組件調(diào)用比較麻煩。
今天主要說的是<code>Hybrid</code>這種解決方案渠鸽，在iOS8以前叫乌，iOSApp中使用的是UIWebView來加載web頁面，iOS8以后徽缚，Apple推出了新的框架<code>WebKit</code>憨奸，其中將 UIWebViewDelegate 與 UIWebView 重構(gòu)成了 14 個類和 3 個協(xié)議，引入了不少新的功能和接口凿试。
WKWebView 有以下幾大主要進(jìn)步：
1排宰、將瀏覽器內(nèi)核渲染進(jìn)程提取出 App，由系統(tǒng)進(jìn)行統(tǒng)一管理那婉，這減少了相當(dāng)一部分的性能損失板甘。
2、js 可以直接使用已經(jīng)事先注入 js runtime 的 js 接口給 Native 層傳值详炬，不必再通過苦逼的 iframe 制造頁面刷新再解析自定義協(xié)議的奇怪方式盐类。
3、支持高達(dá) 60 fps 的滾動刷新率呛谜，內(nèi)置了手勢探測在跳。
以上特性摘自別人的話，說白了就是使用WKWebView比UIWebView性能和內(nèi)存占用上都會好很多隐岛，如果要進(jìn)行Hybrid開發(fā)猫妙，在iOS8之后，強烈推薦使用
WKWebView聚凹，因為同樣的內(nèi)容割坠，在使用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];
//設(shè)置代理
[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接收J(rèn)S的消息】
[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象浑，可以引用遠(yuǎn)程的蔫饰。<br/>
2、在iOS8中愉豺，使用一些遠(yuǎn)程的cdn的css或者js文件篓吁，必須注意在引用標(biāo)簽上加上charset屬性，不然css和js庫將會亂碼<br/>
3蚪拦、WKWebView性能比UIViewView性能好很多杖剪，誰用誰知道冻押。<br/>
</div>
<br/>
####演示和demo查看
<i class="fa fa-github"></i>[WKWebViewDemo Github地址](https://github.com/MethodName/WKWebViewDemo)
>換個心情去思考問題，也許很多難題就會迎刃而解盛嘿。