电商类的应用在做商品详情页时经常使用富文本编辑器

    微信小程序里展示的商品数据往往是从后端请求来的，包含div等标签结构和样式的富文本数据

    那么，如何在微信小程序里直接展示这些数据呢？微信小程序从1.4.0版本开始支持富文本组件，就可以解决这个问题

    rich-text有一个nodes属性，支持数组和字符串类型的数据

    • 当nodes的值为数组时，是一组HTML节点的列表
    • 当nodes值是字符串时，则是HTML字符串

    代码如下所示

    1. <view>
    2.     <rich-text node="<div>这是一个富文本节点</div>"></rich-text>
    3. </view>

    rich-text支持两种节点，通过type区分，分别是元素节点和文本节点，默认是元素节点

    （1）元素节点：type = node，如表3.2所示

    属性名 说明 类型 必填 备注
    name 标签名 String 是 支持部分受信任的HTML节点
    attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法
    children 子节点列表 Array 否 结构和nodes一致

    （2）文本节点：type = text，如表3.3所示

    属性名 说明 类型 必填 备注
    text 文本 String 是 支持entities

    展示了如何使用rich-text组件

    1. index.wxml
    3. <view class='container'>
    4.   <view>
    5.     <view>传入HTML字符串</view>
    6.     <view>
    7.       <rich-text nodes="{{html}}"></rich-text>
    8.     </view>
    9.   </view>
    10.   <view>
    11.     <view>传入节点列表</view>
    12.     <view>
    13.       <rich-text nodes="{{nodes}}"></rich-text>
    14.     </view>
    15.   </view>
    16. </view>
    17. ---------------------------------------------------------------------------------------
    18. index.js
    20. Page({
    21.   data: {
    22.     html: '<div style="line-height: 60px; color: red;">Hello&nbsp;World!<p style="font-size: 50px;
    23. color: green;">ho ho </p ></div>',
    24.     nodes: [{
    25.       name: 'div',
    26.       attrs: {
    27.         style: 'line-height: 60px; color: red;'
    28.       },
    29.       children: [{
    30.                 type: 'text',
    31.         text: 'Hello&nbsp;World!'
    32.       },
    33.       {
    34.         name: 'p',
    35.         attrs: {
    36.           style: 'font-size: 50px; color: green;'
    37.         },
    38.         children: [{
    39.           type: 'text',
    40.           text: 'ho&nbsp;ho'
    41.         }]
    42.       }]
    43.     }]
    44.   }
    45. })

    image.png
    在示例3-3中，用两种方式使用rich-text

    第一个rich-text组件的nodes属性值为HTML节点字符串
    第二个rich-text组件的nodes属性值为数组，数组的每个元素都是一个节点