今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
rich-text
基础库 1.4.0 开始支持，低版本需做兼容处理
富文本。
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| nodes | Array / String | [] | 节点列表 / HTML String | 1.4.0 |
支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap
nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降
nodes
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点
元素节点：type = node
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| name | 标签名 | String | 是 | 支持部分受信任的HTML节点 |
| attrs | 属性 | Object | 否 | 支持部分受信任的属性，遵循Pascal命名法 |
| children | 子节点列表 | Array | 否 | 结构和nodes一致 |
文本节点：type = text
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| text | 文本 | String | 是 | 支持entities |
受信任的HTML节点及属性
全局支持class和style属性，不支持id属性。
| 节点 | 属性 |
|---|---|
| a | |
| abbr | |
| b | |
| blockquote | |
| br | |
| code | |
| col | span，width |
| colgroup | span，width |
| dd | |
| del | |
| div | |
| dl | |
| dt | |
| em | |
| fieldset | |
| h2 | |
| h3 | |
| h4 | |
| h5 | |
| h6 | |
| h7 | |
| hr | |
| i | |
| img | alt，src，height，width |
| ins | |
| label | |
| legend | |
| li | |
| ol | start，type |
| p | |
| q | |
| span | |
| strong | |
| sub | |
| sup | |
| table | width |
| tbody | |
| td | colspan，height，rowspan，width |
| tfoot | |
| th | colspan，height，rowspan，width |
| thead | |
| tr | |
| ul |
示例：
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>// rich-text.jsPage({ 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
tip: nodes 不推荐使用 String 类型，性能会有所下降。tip:rich-text组件内屏蔽所有节点的事件。tip: attrs 属性不支持 id ，支持 class 。tip: name 属性大小写不敏感。tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。tip: img 标签仅支持网络图片。
以上就是“微信小程序内容组件rich-text怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
