網易新聞客戶端iOS版本中新聞詳情頁（UIWebView）技術實現的分析探討

本篇博客背景：
1：本人是網易新聞app的忠實用戶，大約天天有2~3個小時的使用時間。
2：在如此頻繁且長時間的使用過程當中，幾乎沒有遇到過閃退的狀況。
不得不佩服人家優化的效果之好，也不得不感嘆本身和大牛之間的差距之大。（不是作廣告。。是真愛。。）
3：一直都以爲網易新聞app的詳情頁作的特別好。前段時間，看到網上有很多人說網易新聞的詳情頁是用coreText（富文本）實現的。以爲很好笑，只是一個複製文字的功能，coreText便沒法實現，便能排除coreText的可能性了。
但是這些錯誤的言論在網上殘留傳播，毒害新手，這裏但願你們注意，互聯網上的信息是須要你們辨而識之，思然後取。不要盲目相信。實際上，新聞詳情頁明顯是經過UIWebView實現的。
4：基於以上三點，決定寫篇博客分析一下。
5：本文謝絕轉載，若是轉載，請註明源地址：
http://386502324.blog.163.com/blog/static/11346937720154293438399/

技術實現分析
一：接口分析
如下是我抓取的網易新聞的接口，若是有人想本身抓，推薦使用Charles或者paros（如何使用，自行百度）
1：全文字示例接口
http://c.3g.163.com/nc/article/AQ76LHPS00963VRO/full.html
2：圖文混排，輕鬆一刻（典型含有大量的圖包含動圖）。
http://c.3g.163.com/nc/article/AQ4RPLHG00964LQ9/full.html
3：包含有圖集（nba）（實際上只有一張圖）
http://c.3g.163.com/nc/article/AQ72N9QG00051CA1/full.html

結論：詳情頁返回的接口是json串。因而排除webview直接加載url的狀況。

二：Data+模板生成html
經過接口分析，咱們排除了webview直接加載url的可能性。那是如何實現的呢？答案是，加載本地的html。

經過處理接受到的json數據+本地的html模板，生成能夠顯示又內容的html串，而後webView加載便可。
在這裏，推薦一個第三方的開源html模板項目 MGTemplateEngine：
https://github.com/nxtbgthng/MGTemplateEngine
具體用法能夠自行google。

三：JS（javascript）和OC的通訊
簡單來講，就是oc能給JS發消息，JS也能夠給OC發消息去讓OC調用某個接口。
經過通訊，咱們生成的Html文件實現了和oc的協同合做。爲接下來的問題四打下基礎。
對於這個問題。推薦你們使用WebViewJavascriptBridge：
https://github.com/marcuswestin/WebViewJavascriptBridge
簡單配置後，便能高效優雅的實現js和oc的通訊。強烈推薦。
網上有不少博客介紹使用方法， 具體用法能夠自行google。

四：圖片的處理
常 使用網易新聞的用戶能夠發現，app是提供移動網絡下，圖片默認不顯示的功能，以幫助你們節省流量。固然，在移動網絡下，有個別你很是想看的圖片，點擊空 白圖片處，便可下載顯示。webview自帶的圖片下載，明顯是沒法控制的。那麼，我們如何去實現這個功能呢?此次不賣關子了，直接說明：
1：html字符串處的圖片預先加載一張空白圖或者本地佔位圖
2：收到的json串中很容易拿到盛放全部圖片的數組
3：檢查圖片是否已經存在，若是圖片已經存在，將圖片信息經過字符串的形式發送給JS，JS收到該類型消息後，將img的src進行替換，替換爲圖片本地路徑。
若是圖片還未存在，先去下載，下載完成後，給JS發消息，完成img替換，並增長點擊進入相冊事件。
若是圖片下載失敗，一樣給JS發消息。img指向帶有從新下載事件的圖片，點擊從新下載。
這裏，圖片的緩存鄭重推薦你們使用 SDWebImage：很是高效。
https://github.com/rs/SDWebImage

五：其餘
一些其餘功能的現實還請你們本身思考。

六：本文demo
本身簡單的寫了一個demo，可是沒有使用 SDWebImage和 MGTemplateEngine
過幾天我修改以後，會傳到個人github上，到時候再放上下載連接。
若是有什麼問題，歡迎在個人博客留言探討。

 

 七：更新於6月2日。增長demo下載鏈
粗略整理了一下代碼。使用了第三方SDWebImage,完成了demo。
PS:兩篇新聞有一個大量圖片的輕鬆一刻。還有一篇是普通的僅有一張圖片的NBA新聞。
https://github.com/JokerXu/webViewDemo