目錄
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日
閱讀更多 石橋碼農 的文章