android 記一次富文本加載之路

文章連接：https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw

項目中常常涉及到富文本的加載，後臺管理端編輯器生成的一段html 代碼要渲染到移動端上面，一種方法是前端作成html頁面，放到服務器上，移動端這邊直接webView 加載url便可，還有一種後臺接口直接返回這段html富文本的，String類型的，移動端直接加載的；具體的需求按實際狀況而定，webview直接加載url的就不說了，這裏主要說說關於直接加載html的。

一段簡單的html代碼

private String txt = "<div>\n" +
            "<a style=\"font-size: 3s0px\" href=\"https://www.manjiexiang.cn/\">程序猿TX</a>\n" +
            "</div>\n" +
            "<img src=\"https://www.manjiexiang.cn/upload/file/2018/05/01/qrcode_for_gh_4185bf56352c_258_1.jpg\">\n";

原生webView 加載富文本

原生的webView 直接加載

webView.loadDataWithBaseURL(null,txt,"text/html","UTF-8",null);

若是是textView 有setText(Html.fromHtml(txt))方法，可是這種加載方式，圖片沒法在textView顯示。
若是非要使用textView 加載...

第三方庫加載富文本

這裏我使用的是RichText 第三方庫

implementation ('com.zzhoujay.richtext:richtext:3.0.7'){
        exclude group: 'com.android.support'
}

同時排除了support包的衝突，使用上

RichText.initCacheDir(this);

RichText.from(txt).into(tv);

更多的方法能夠去github上查看，這種方式圖片是能夠加載的，可是css的樣式是無法呈現的。

以上的兩種方式按本身的需求來進行使用的，試用於後臺接口直接返回數據給移動端進行加載的。

加載html文件

通常的webView直接加載url體驗上沒那麼流暢，相對的加載html文件會好點。後臺依舊返回html數據給移動端，前端負責寫html 文件模板，android將html文件放在assets 文件夾下面，經過webView.loadUrl("file:///android_asset/**.html")加載，至於數據，就是移動端與前端的交互了，以前推薦過一個三方庫 android與js的交互之jsbridge使用 ，經過這種方式將數據傳遞給前端，同時能夠監聽到js的方法調用。
這種方式更加適用於一個頁面模板能夠反覆使用的，後臺返回不一樣的數據進行加載。一個場景就是 viewpager裏面的每一個fragment頁面結構相同，若是使用url加載，每一個fragment裏的webview去加載一個url，這種在體驗上就不是很優雅，而使用html文件加載的方式，後臺能夠返回list 數據給移動端，對應的去用webview加載本地文件，把各項的數據傳給前端展現，加載渲染的速度上會快點。固然若是原生的能夠直接渲染頁面的，優先原生的。
若是是那種單頁面，只是瀏覽功能的，相似於 "關於咱們" 那種頁面能夠直接用url加載的。

這篇文章主要介紹的是關於html 加載的，目前咱們使用的是第三種方式的，不一樣的需求場景得根據各個項目來定的，關於第三種加載 html 文件的，後續再寫一篇文章介紹移動端與前端交互的，並且咱們加載的富文本內容相對的也不同。

歡迎關注個人我的博客：https://www.manjiexiang.cn/

更多精彩歡迎關注微信號：春風十里不如認識你
一塊兒學習，一塊兒進步，歡迎上車，有問題隨時聯繫，一塊兒解決！！！