rich-text---组件，基础内容

• 支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

• nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

• nodes
  现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

包含三个属性
name
attrs
children

文本节点：type = text

包含一个属性
text

代码说明
wxml

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">传入html字符串</view>
    <view class="rich-text-wrp">
      <rich-text nodes="{{html}}" bindtap="tap"></rich-text>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">传入节点列表</view>
    <view class="rich-text-wrp">
      <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
    </view>
  </view>
</view>

wxss

rich-text {
  width: 700rpx;
  padding: 25rpx 0;
}

.rich-text-wrp {
  padding: 0 25rpx;
  background-color: #fff;
}

.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}

.page-section:last-child{
  margin-bottom: 0;
}

.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

js

Page({
  data: {
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

效果预览

image.png

控制台里面查看

image.png

分析,如果代码是这样，js里面多了一个attrs和children有什么影响

Page({
  data: {
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      }, 
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: green;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }],
      children: [{
        type: 'text',
        text: 'new Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

新的效果预览

image.png

Bug & Tip

• tip: nodes 不推荐使用 String 类型，性能会有所下降。
• tip: rich-text 组件内屏蔽所有节点的事件。
• tip: attrs 属性不支持 id ，支持 class 。
• tip: name 属性大小写不敏感。
• tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
• tip: img 标签仅支持网络图片。
• tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html