微信小程序rich-text富文本用法實(shí)例分析

更新時(shí)間：2019年05月20日 09:52:33 作者：我叫陳小皮。

這篇文章主要介紹了微信小程序rich-text富文本用法,結(jié)合實(shí)例形式分析了微信小程序rich-text富文本插件的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

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

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

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

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

元素節(jié)點(diǎn)

name	標(biāo)簽名	String	是	支持部分受信任的HTML節(jié)點(diǎn)
attrs	屬性	Object	否	支持部分受信任的屬性，遵循Pascal命名法
children	子節(jié)點(diǎn)列表	Array	否	結(jié)構(gòu)和nodes一致

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

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

如果頁(yè)面中存在多個(gè)富文本,富文本中存在多個(gè)孩子,請(qǐng)看下例:

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

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

文本節(jié)點(diǎn)

text

文本

String

是

支持entities

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

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

注意:

全局支持class和style屬性，不支持id屬性。
nodes 不推薦使用 String 類型，性能會(huì)有所下降
rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。
name 屬性大小寫不敏感
如果使用了不受信任的HTML節(jié)點(diǎn)，該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除,受信任的html節(jié)點(diǎn)請(qǐng)看官方文檔
img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

您可能感興趣的文章: