微信小程序內(nèi)容組件rich-text,微信小程序富文本實(shí)例
2020-09-27
導(dǎo)讀:rich-text 基礎(chǔ)庫 1.4.0 開始支持,低版本需做兼容處理 富文本。 屬性 類型 默認(rèn)值 說明 最低版本 nodes Array / String [] 節(jié)點(diǎn)列表 / HTML String 1.4.0 支持默認(rèn)事件,包括: tap 、 touchstart 、 tou...
rich-text
基礎(chǔ)庫 1.4.0 開始支持,低版本需做兼容處理
富文本。
屬性 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
---|---|---|---|---|
nodes | Array / String | [] | 節(jié)點(diǎn)列表 / HTML String | 1.4.0 |
支持默認(rèn)事件,包括:tap
、touchstart
、touchmove
、touchcancel
、touchend
和longtap
nodes 屬性推薦使用 Array 類型,由于組件會(huì)將 String 類型轉(zhuǎn)換為 Array 類型,因而性能會(huì)有所下降
nodes
現(xiàn)支持兩種節(jié)點(diǎn),通過type來區(qū)分,分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn),默認(rèn)是元素節(jié)點(diǎn),在富文本區(qū)域里顯示的HTML節(jié)點(diǎn)
元素節(jié)點(diǎn):type = node
屬性 | 說明 | 類型 | 必填 | 備注 |
---|---|---|---|---|
name | 標(biāo)簽名 | String | 是 | 支持部分受信任的HTML節(jié)點(diǎn) |
attrs | 屬性 | Object | 否 | 支持部分受信任的屬性,遵循Pascal命名法 |
children | 子節(jié)點(diǎn)列表 | Array | 否 | 結(jié)構(gòu)和nodes一致 |
文本節(jié)點(diǎn):type = text
屬性 | 說明 | 類型 | 必填 | 備注 |
---|---|---|---|---|
text | 文本 | String | 是 | 支持entities |
受信任的HTML節(jié)點(diǎn)及屬性
全局支持class和style屬性,不支持id屬性。
節(jié)點(diǎn) | 屬性 |
---|---|
a | |
abbr | |
b | |
blockquote | |
br | |
code | |
col | span,width |
colgroup | span,width |
dd | |
del | |
div | |
dl | |
dt | |
em | |
fieldset | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
hr | |
i | |
img | alt,src,height,width |
ins | |
label | |
legend | |
li | |
ol | start,type |
p | |
q | |
span | |
strong | |
sub | |
sup | |
table | width |
tbody | |
td | colspan,height,rowspan,width |
tfoot | |
th | colspan,height,rowspan,width |
thead | |
tr | |
ul |
示例:
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
Bug & Tip
-
tip
: nodes 不推薦使用 String 類型,性能會(huì)有所下降。 -
tip
:rich-text
組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。 -
tip
: attrs 屬性不支持 id ,支持 class 。 -
tip
: name 屬性大小寫不敏感。 -
tip
: 如果使用了不受信任的HTML節(jié)點(diǎn),該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除。 -
tip
: img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片。
第二部分:如何開通一個(gè)小商店