本文實例講述了微信小程序rich-text富文本用法。分享給大家供大家參考，具體如下：

rich-text是一個新增的微信小程序插件,從基礎(chǔ)庫1.4.0開始,低版本需要做兼容處理

nodes屬性可為Array和String類型,但推薦使用Array.由于String類型最終也會轉(zhuǎn)為Array類型

nodes分為支持兩種節(jié)點,分別為元素節(jié)點(type=node ,默認為元素節(jié)點)和文本節(jié)點(type=text)

元素節(jié)點

<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text><!--{{nodes}}其中的變量名與data中名字相同--><!--支持默認事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->

// rich-text.jsPage({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'width : 100px; height : 100px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') }})

如果頁面中存在多個富文本,富文本中存在多個孩子,請看下例:

<!-- rich-text.wxml --><rich-text nodes="{{nodes}}"></rich-text><rich-text nodes="{{nodes1}}"></rich-text>

// rich-text.jsPage({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'width : 100px; height : 100px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }], nodes1: [{ name: 'p', attrs: { class: 'p_class', style: 'text-align : center; color: green;' }, children: [{ type: 'text', text: '我是p標簽!!!' },{ name: "span", attrs: {  style: "color:red",  class: "span_class" }, children: [{  type: "text",  text: '我是span標簽,哈哈哈哈' }] }] }] },})

文本節(jié)點

<!-- rich-text.wxml --><rich-text nodes="{{nodes}}"></rich-text>

// rich-text.jsPage({ data: { nodes: "我是文本節(jié)點,意外不?" },})