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/

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