大家好！

这一章我们继续讲小程序的常见组件——富文本标签

富文本标签可以将字符串解析成对应标签，类似 vue中 v-html 功能。

rich-text 富文本标签，是通过nodes 属性来实现的。它⽀持标签字符串、对象数组两种数据类型

接下来，我们还是分两部分来演示该标签的使用

(一)标签字符串

1、新建页面demo12

2、打开demo12.wxml 文件，删除原先的内容。

在demo12.wxml 中，写入rich-text 标签，加入nodes 属性

双括号内是一个值，这个值通过设置一个变量来实现，这里的变量我们先使用标签字符串的类型。

3、打开demo12. js 文件，只保留data 部分，在data中放变量，名为html，它的值这里设置的是一些标签字符串。

我们直接复制淘宝首页轮播图下方的代码，粘贴至html内。

步骤如下：

(1)打开网址：

https://main.m.taobao.com/index.html

(2)f12键打开淘宝网触屏版的源代码

(3)我们要复制的是下方轮播图的代码

(4)右键选中的代码，选择“copy”，选择“cpoy outerHTML”，复制代码

(5)粘贴代码至demo12.js 文件内，data部分，html变量内，如下所示：

Page({  data: {html:'

天猫新品

充值中心

今日爆款

机票酒店

天猫国际

金币庄园

饿了么

阿里拍卖

天猫超市

淘宝吃货

分类

闲鱼

天猫美食

会员中心

阿里健康

造点新货

口碑生活

土货鲜食

4、将html 复制至demo12.wxml 中，进行渲染。代码如下：

5、点击保存，页面显示淘宝的轮播图。

(二)对象数组

第一部分我们将html的值是用标签字符串来表示的，第二部分我们换成对象数组。

使用对象数组时，有规定的格式要求。

1、删除demo12.js文件中，html的内容，加入如下代码：

Page({  data:{html:[  {// div标签，name 属性来指定    name:"div",//标签上的属性，class、style    attrs:{      class:"my_div",      style:"color:red;" },//子节点：要接收的数据类型和nodes第二种渲染方式的数据类型一致    chliden:[ {        name:"p",        attrs:{},//放文本        children:[ {            type:"text",            text:"hello" }]  }    ] }] }})

2、点击保存，页面上出现”hello“字样。

总结来看：

第一种和第二种相比，还是第一种是比较简单的，第二种方式是很繁琐的。

所以，我们在平常的使用中，富文本标签的数据类型多使用标签字符串。

点击下方链接至小程序官方文档，自行查看其他属性的使用吧。

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！