rich-text是什么

rich-text是微信小程序的富文本组件，可以渲染部分html标签，全局支持class和style属性，但不支持id属性。rich-text弥补了text组件在文本渲染上的不足。如代码1-1所示，是rich-text组件的声明方式。

代码1-1

rich-text组件支持默认事件，包括tap、touchstart、touchmove、touchcancel、touchend和longtap。

以数组方式定义rich-text的nodes

rich-text组件是渲染上支持两种方式，种是使用数组，如代码1-2所示，省略号上方的是逻辑层代码，采用的是json结构；省略号下方的是标签代码，直接将nodes数组绑定于rich-text渲染。

代码1-2

nodes1是一个数组，node是其元素类型。每一个node元素都有一个name、一个type属性、一个attrs属性。默认type等于node，当type等于node时，可以有子节点，此时有一个children属性。

当type等于text时，仅有一个text属性，此时不包含任何子节点，是叶节点。

在代码1-2中，外围标签是div，内部子标签是text。

如代码1-2所示，这种定义nodes的方式是给机器用的，人为手动编写这样的nodes是很麻烦的。但如果小程序是一个Html有限标签编辑器，动态生成nodes标签，那么这样的定义方式是必须的。从这个意义上讲，微信小程序成为一个微型浏览器也未可知了。

如图1-1，是代码1-2的运行效果。

图1-1

直接使用html字符串定义rich-text的nodes

另一种方式是直接使用html字符串，如代码1-3所示。

Month Savings third January $100 $100 January1 $1001 $1001 Coffee Tea Milk del style,ins style 下标,上标 em标签 Coffee Tea Milk

这是标题 1

这是标题 2

这是标题 3

这是标题 4 这是标题 5 这是标题 6 health information height: weight:

some text.some other text.

代码1-3

这个html字符串几乎包括了所有rich-text组件目前可以渲染的html富文本标签，如图1-2所示，是其渲染效果。

图1-2

对于table、img标签，支持width、height属性，所以可以将它们设置为与屏等宽。都支持style样式，class样式。

4.在wxss文件中定义class给rich-text使用

在rich-text.wxss文件中定义一个div_class样式，如代码1-4所示。

代码1-4

再次测试1-2的代码，运行效果如图1-3所示。由于可见，在wxss文件中定义的样式，可以作用于rich-text组件的node标签。

图1-3

本文结束，祝修行进步。所有源码及本文地址，可在艺术思维回复微信小程序26得到。

学习过程中如遇到困难，可添加笔者微信，回复”小程序”进作者微信群。

欢迎参加作者的live课程

免费领券方法：关注微信公号艺述思维，回复礼券二字，获取免费礼券。每人限领一张，数量有限，先到先得。