rich-text是一個新增的微信小程式外掛,從基礎庫1.4.0開始,低版本需要做相容處理

nodes屬性可為Array和String型別,但推薦使用Array.由於String型別最終也會轉為Array型別

nodes分為支援兩種節點,分別為元素節點(type=node ,預設為元素節點)和文字節點(type=text)

元素節點

name        標籤名     String   是  支援部分受信任的HTML節點
attrs       屬性       Object   否 支援部分受信任的屬性，遵循Pascal命名法
children    子節點列表  Array    否   結構和nodes一致
 

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!--{{nodes}}其中的變數名與data中名字相同-->
<!--支援預設事件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 World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

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

<!-- 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 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標籤,哈哈哈哈'
        }]
      }]
    }]
  },
})

文字節點

text    文字      String       是      支援entities

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

// rich-text.js
Page({
  data: {
    nodes: "我是文字節點,意外不?"
  },
})

注意:

• 全域性支援class和style屬性，不支援id屬性。
• nodes 不推薦使用 String 型別，效能會有所下降
• rich-text 元件內遮蔽所有節點的事件。
• name 屬性大小寫不敏感
• 如果使用了不受信任的HTML節點，該節點及其所有子節點將會被移除,受信任的html節點請看官方文件
• img 標籤僅支援網路圖片