如何基於WKWebView開發一個功能完善的資訊內容頁

時間 2019-12-08

標籤如何基於 wkwebview 開發一個功能完善資訊內容简体版

原文原文鏈接

前言

對於資訊類的APP來講良好的閱讀體驗是必不可少的, 那麼如何去開發一個功能完善的資訊文章頁面就是本文要說的重點.
相信本文會對不少在作同類功能開發的道友們有很大的幫助 , 若是某隻大佬路過也歡迎指點一二.css

廢話很少說開講(chui)~html

分析

數據

對於圖文混排的富文本形式 , 最好最通用的數據格式當屬 HTML , 再加上 CSS 和 JS 的配合, 能夠爲所欲爲的展現出成百上千在不一樣的樣式.
固然 , 除了 HTML 也不排除有使用其餘規則的數據格式來表示.
但這裏咱們仍是選擇使用 HTML 的數據格式 , 畢竟主流嘛.jquery

展現

咱們常見的有幾種方式來實現富文本的展現git

UIWebView
對於這個控件咱們並不陌生, 基於UIKit框架, 使用方式簡單, 可是任何東西都有缺點, 無解的內存問題一直讓人很頭疼, 並且由於接口限制能夠作的東西也很少, 他更適合作一些普通的Web瀏覽操做.github
WKWebView
iOS8後的強大Web控件, 基於WebKit框架, 有豐富的API, 更高的性能, 更小的內存更小的內存更小的內存等, 固然缺點也是必不可少, 例如Cookie問題白屏問題樣式異常問題等等, 不過這些問題隨着時間的推移固然難不倒偉大的猴子們, 其實我我的認爲 iOS9以後的WebKit纔是真正的WebKit (iOS8的是假的) , 在克服了重重奇葩的BUG後我仍是決定使用WKWebView來做爲HTML的展現控件 , 這裏很少說後面再談.web
CoreText
強大的核心文本框架 , iOS中幾乎全部文字的東東都是經過它來實現的. 這麼強大的框架實現一個圖文混排固然不在話下, 但是重點是如何解析HTML的樣式來讓CoreText知道該怎麼作! 這一點的表明我以爲非 DTCoreText 莫屬了, 它能夠解析HTML中的大部分樣式經過CoreText繪製出來固然例如一些圖片和視頻等元素能夠經過UIImageView等原生控件來顯示, 灰常666 , 可是! 這種強行的轉換對於不少複雜的HTML來講確定力不從心的, 對於HTML的支持確定是不如WebView的, 不過簡單的仍是應對自如 , 這裏很少說 , 之後我會抽時間寫一個基於它來展現文章的Demo.緩存

功能

那麼肯定了數據格式和展示方式 , 如今咱們來講一說功能.
一個文章頁面應該包含哪些功能呢?網絡

字號調節
因每一個人的閱讀習慣不一樣字號調節這個功能固然也是必不可少 , 動態的改變字體大小.app
離線閱讀
這個功能的目的在於用戶對於收藏過的或者加載過的文章可以在網絡不佳或無網絡的狀況下繼續閱讀 , 實現的重點在於文章數據的持久化緩存.框架
日夜間模式(黑白主題樣式)
我我的以爲日夜間的閱讀模式是最基本的兩種 , 更好的是能夠動態改變字體樣式和背景顏色或背景圖 , 以知足不一樣用戶的體驗 , 固然這也是分產品的 , 讀書類的產品固然是要有的由於長時間的沉浸式閱讀對於這方面的體驗需求是很細膩的 , 但是對於資訊新聞類的產品卻並非必須的由於這類產品的用戶偏向於溫馨快速的閱讀 .
實現重點在於動態改變文字大小和背景的顏色以及優雅天然的過渡.
圖片瀏覽
固然這個必不可少, 用戶在對感興趣的圖片能夠進行放大等方式查看 , 而且能夠保存到相冊等等.
圖片狀態
這個不得不說一下 , 每一個圖片的顯示從無到有都是分爲不一樣的狀態例如: 初始加載 - 加載中 - 加載完成 - 加載失敗 - 點擊加載等等 , 對於每一個狀態的處理我相信不少人都會忽略掉 , 就拿加載失敗來講 , 我見過太多APP的文章圖片加載失敗了顯示出來一個裂圖或是問號圖 , 真的噁心 , 若是就想看這個圖只能退出這個頁面重新進來看能不能出來 , 這樣的體驗是灰常糟糕的 , 在開發時你可能不會在乎畢竟一個圖片加載失敗的機率並不高可能從開發開始到結束髮版都沒遇到過一次 , 可是我想說細節決定成敗, 有良好的提示對於那些網絡不佳的用戶們來講無疑是最貼心的.
流量優化
這個很重要 , 用戶們灰常在乎本身的流量問題 (由於流量 == 錢) , 對於縮略圖的處理是必不可少的 , 合理的控制能夠節省大量沒必要要的流量消耗 , 對於省流量模式(僅Wifi網絡加載圖片)的控制的確是某些用戶的剛需 , 這點對於動輒幾MB的GIF圖尤其重要 , 沒有哪一個用戶喜歡用幾十分鐘就花掉100MB流量的APP , 若是這樣的APP還沒被卸載說明用戶可能一直沒用過. 實現重點在於如何區分該加載的類型如何有效的利用已經加載過的圖片.
橫豎屏適配
這點並非必需的 , 仍是若是能支持固然是最好了, 實際需不須要仍是要看產品自己 , 由於對於某些產品來講橫屏並非一個好的選擇.

開發思路

咱們分析完了所包含的功能和要使用的展示形式 , 如今就該整理一下開發的思路了.

首先咱們要了解所使用的控件的特性以及要注意的問題 , 根據控件的特性找出最佳的實現方法 , 結合上面咱們所提到的功能我來敘述一下個人開發思路:

文章內容的數據格式是HTML , 使用WKWebView 來加載HTML展示內容.

一般來講服務端的接口數據並不會把一個完整的HTML字符串給咱們 , 而是隻有內容部分的HTML字符串 , 基本上是這樣的格式:

<p>女友和她姐姐是雙胞胎，老是分不清!</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/6eee549a554b1d66409)
<p>貓：喜歡猴子養一個唄，在這折騰我幹嗎？</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_3/19/a3b81ed6cff11fa4658.gif)
<p>一看就知道是隻痛快狗！</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_3/19/99c786d4b149effb163.gif)
<p>被這個槍電一下不知道會不會死</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/8bff874e8d875c75083.gif)
<p>今天咱們要練習帶球撞人</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/6280e10eeeca7e28181.gif)
<p>竟然翻車了，必定不是純血的阿三</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/0a594d192a861b94511.gif)
<p>能夠吹一生了，那麼我看你怎麼拿下來</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/da49d9ad2345eb34986.gif)
<p>藍翔畢業典禮</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/86e383fac9e24d15935.gif)
<p>請問這鎖有何用？</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/987a7cab7cfe1e79269.gif)
<p>兄弟你有毛病啊~有話直說何須要動手動腳呢~</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/5c11b1c7185d2141335.gif)
<p>一秒就擊倒了……不會是演戲吧？</p>
![](http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/17eeea5639b2f31b856.gif)
<p><span>開心一刻</span></p>
<p>帶女友回家見家長：「媽，這是我女友。」媽打量了女友一番說:「你咋找個這樣的?」女友瞬間臉色就變了，我趕忙打圓場。「媽，她是我女友，說話客氣點，咱們是真心相愛的。」沒想到，媽拉過女友說：「閨女你那麼漂亮，你咋找個這樣的，這讓我咋跟你爸媽交待……」</p>

這樣作的好處是可讓咱們更方便的擴展和調整 , 拿到這些後咱們首先要處理這些字符串根據須要替換修改 , 最後組裝成一個完整的HTML , 而後交給WKWebView顯示 , 完整的HTML格式大體以下:

<html>
<head>
<meta http-equiv ="Content-Type" content="text/html;charset=utf-8"/>
<meta name = "viewport" content="width = device-width, initial-scale = 1, user-scalable=no"/>                           
<title></title>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div class="content">
<!-- 內容 -->
</div>                           
</body>                        
</html>

爲了實現離線閱讀那麼就要作到圖片下載的可控, 這裏咱們能夠將頁面圖片的加載放到原生端來作, 也就是說不經過WebView加載圖片, 而是經過原生加載圖片的方式來加載頁面中的圖片, 這樣作有幾點好處:

原生加載可控性更高能夠更好掌控下載進度以及下載完成後對圖片的其餘處理.
圖片緩存的利用率更好, 圖片下載完成之後 Web頁面可使用原生的圖片瀏覽頁也可使用.
圖片緩存的大小更方便統計以及清理等等.

雖然好處多多 , 可是這樣作法並不適用於任何Web頁面, 由於別人的HTML寫法天知道什麼樣子, 你很難去處理, 因此說這種方法僅僅適用於固定樣式固定HTML寫法的狀況.

優勢和缺點講完了, 我如今簡單闡述一下實現Web頁面圖片原生加載的大體流程.

首先在HTML給WebView加載以前, 要將全部須要使用原生加載的<img>標籤過濾出來 , 而且獲得每一個<img>標籤的真實圖片地址, 也就是src屬性的值, 而後在<img>標籤中添加一個自定義屬性data-original將真實圖片地址設置爲它的值, 同時將src的屬性值設置爲默認的佔位圖本地圖片地址...

<img>標籤修改完成後 , 就能夠交給WebView去加載了, 這樣一來沒有圖片要加載的頁面加載速度會大幅度提升, 在頁面加載完成後, 就能夠開始下載圖片了.

經過JS獲取到全部須要下載的<img>標籤的data-original屬性值 (真實的圖片地址), 而後經過原生加載圖片的方式進行下載, 下載完成後將圖片緩存到本地(沙盒), 最後使用JS將每一個圖片對應的 <img>標籤的src屬性設置成本地的圖片緩存地址. 此時WebView頁面中就會顯示本地的緩存圖片了.

大體思路就是這樣 , 具體實現起來會涉及到不少細節, 例如WKWebView控件的特性問題, 例如縮略圖的處理, 圖片加載的控制, Gif圖片加載的進度等等 , 這裏很少囉嗦, Demo已經完成, 內附有比較完善的流程圖, 你們能夠結合這個思路去閱讀代碼運行Demo 自行體會.