小程式中富文字解決方案

肉很多發表於2018-12-26

 微信小程式提供的rich-text在實際工作上根本不能滿足我們的需求。

正好專案中需要用到這個,就自己查下資料,網上說wxParse這個外掛可以使用。

好的!就決定使用這個了,但是實際情況並沒有想象中那麼簡單。


下面是後臺返回的資料,也就是需要處理的資料,看到這些資料真的是很無奈,但沒辦法還得處理。小程式中富文字解決方案

wxParse這個外掛提供的方法也很簡單處理簡單的資料還是可以的。

只好看他的原始碼了,並且做了修改。不多說了,直接貼程式碼了



這是修改外掛wxParse.js裡面的方法

小程式中富文字解決方案


這是請求資料後的處理

小程式中富文字解決方案



這是渲染時的處理

小程式中富文字解決方案


這是最終的結果

小程式中富文字解決方案


最近還遇到一個bug

在部分安卓手機上,解析會出問題。

主要原因是 外掛裡面的html2json.JS檔案裡面的console.dir

註釋掉就可以了


小程式中富文字解決方案

看看這個外掛的有序列表是怎麼顯示的


小程式中富文字解決方案

這顯示賊醜,沒辦法只能自己做做修改了


這是新增的css程式碼

小程式中富文字解決方案


之後顯示的結果



小程式中富文字解決方案


這是之前h5的頁面效果


小程式中富文字解決方案


對比起來還是有差異的,但沒有辦法,看看裡面的巢狀就知道了


小程式中富文字解決方案


要修改的話現在只能改原始碼了。


相關文章