文章連結：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/

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