微信小程序内容组件rich-text怎么使用

今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

rich-text

基础库 1.4.0 开始支持，低版本需做兼容处理

富文本。

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

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

nodes

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

元素节点：type = node

文本节点：type = text

受信任的HTML节点及属性

全局支持class和style属性，不支持id属性。

示例：

<!-- 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

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。

2. tip:rich-text组件内屏蔽所有节点的事件。

3. tip: attrs 属性不支持 id ，支持 class 。

4. tip: name 属性大小写不敏感。

5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。

6. tip: img 标签仅支持网络图片。

以上就是“微信小程序内容组件rich-text怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。