最近項目需要, 把公眾號的文章直接在小程序顯示, 頁面除了文章內容以外,還有其他組件.

小程序中渲染html, 解決方案有三個

使用wxParse把html轉化成小程序標簽

使用web-view組件

使用rich-text組件

第一個方案是由于小程序還沒有更新2,3的功能時的一個臨時解決辦法. 而使用web-view控件最大問題只能整屏顯示.

于是翻閱rich-text控件的文檔說明.也是坑滿滿的.

rich-text的控件使用很簡單, 只需要給nodes屬性賦值要渲染的html節點數組或者直接是html代碼即可.

一開始想偷懶, 直接在nodes重賦值html代碼. 發現基本無法使用. 因為rich-text不支持的標簽很多, 遇到不支持的標簽(比如section)會忽略解析.導致很多的html內容都會莫名消失.

只能乖乖的把html代碼變成節點數組,然后對每個節點進行判斷兼容.

于是有了we-rich這個庫.

we-rich 直接把html代碼轉化成小程序rich-text 可以渲染的nodes節點

<div class='post post-featured'><p>hello</p><section>world</section><img src="test.png" style="max-width:100%" /></div> 復制代碼[ {"type": "node","name": "div","attrs": {"class": "post post-featured"},"children": [ {"type": "node","name": "p","attrs": {},"children": [{"type": "text", "text": "hello"} ]}, {"type": "node","name": "div","attrs": {},"children": [{"type": "text", "text": "world"}]}, {"type": "node","name": "img","attrs": {"src": "test.png", "style": "max-width:100%"},"children": []}]} ] 復制代碼

使用辦法

npm install we-richvar weRich = require('we-rich'); var nodes = weRich.parse(html) 復制代碼

轉載于:https://juejin.im/post/5a4745b851882538650984c9

總結

以上是生活随笔為你收集整理的we-rich 小程序渲染富文本js库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。