目錄
1）主要屬性
2）示例與最佳實踐
相關問題：
1）如何保存rich-text富文本組件中的圖片？
2）在富文本rich-text中，如何解決圖片之間的間距問題？
3）富文本rich-text裡面怎麼插入ad廣告標籤?如何將html文本直接解析呈現？
4）rich-text中的圖片能點擊放大嗎?
5）rich-text 解析富文本，圖片過大，如何自定義大小？
6）rich-text怎麼識別回車符？
7）rich-text不解析iframe標籤？
8）rich-text的文本支持selectable嗎？
9）如何使用rich-text處理視頻的問題？
10）使用rich-text如何處理特殊類型的圖片，例如data類型的url？
11）rich-text中如何顯示雲存儲中的圖片？
本文9840字，閱讀9分鐘，實踐30分鐘
文 / 石橋碼農
rich-text是富文本組件。
1）主要屬性
2）示例與最佳實踐
Wxml:
<rich-text>
js:
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 20px;padding:20px;'
},
children: [{
type: 'text',
text: '中文Hello World!'
},{
name: 'span',
attrs:{
style: 'color: green;'
},
children: [{
type: 'text',
text: 'message'
}]
},{
name:'img',
attrs:{
src:'//p2.ttnews.xyz/5e8375080d8c16be89ded459.jpg',
style:'width:30px'
}
},{
name:'img',
attrs:{
src:'https://www.yishulun.com/images/qrcode.png',
style:'width:100px'
}
}]
}]
使用rich-text組件，關鍵在於nodes的編寫。
nodes是一個數組，數組中每個元素可以是複合的node節點，也可以是末節的text節點。簡單分辨節點類型的方法，可以看節點有沒有name屬性，name代表標籤名稱，如果有name，代表是複合節點；如果沒有，並且有type屬性為”text”，代表是簡單的文本節點。
當是text節點時，例如這個：
{
type: 'text',
text: 'message'
}
它代表的是最基本的文本，沒有樣式，它所有的樣式都來自父節點的設定。在vue或wxml的模板中，類似於：
{{message}}
這樣的一個純文本節點，解析到虛擬DOM列表中，都是一個獨立的節點。在nodes列表裡的type為“text”的節點，與它們類似的，也是一個純文本節點。
當是非text節點，必有一個name屬性，例如：
{
name:'img',
attrs:{
src:'//p2.ttnews.xyz/5e8375080d8c16be89ded459.jpg',
style:'width:30px'
}
}
這相當於是一個img標籤，翻譯為html代碼相當於：
從mdn文檔上可以查到img標籤還有其它屬性，例如width、height、alt、ismap、longdesc、usemap等。這些html定義的屬性原則上都可以在nodes裡定義，但是在使用前，最好先查一下微信小程序rich-text組件的文檔：
developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
這裡有一個受信任的HTML節點及屬性列表，看看擬用的屬性在不在受支持的範圍。如果使用了不受信任的HTML節點，該節點及其所有子節點將會被移除。
下面看看相關問題：略
好了，我是石橋碼農，今天的分享就到這裡。有什麼問題歡迎留言，也歡迎群內討論。
2020年03月28日
閱讀更多 石橋碼農 的文章
