微信小程序内容组件rich-text怎么使用
发表于:2025-11-09 作者:千家信息网编辑
千家信息网最后更新 2025年11月09日,今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获
千家信息网最后更新 2025年11月09日微信小程序内容组件rich-text怎么使用
今天小编给大家分享一下微信小程序内容组件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.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怎么使用"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。
节点
属性
支持
类型
内容
组件
文本
知识
篇文章
元素
程序
事件
备注
性能
版本
部分
推荐
不同
很大
最低
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
吴中区提供网络技术服务电话
互联网科技改变世界作文
同一用户导入两个数据库
oa服务器维修价格收费标准
华为遭到美国制裁网络安全
网络技术是编程吗
想买软件开发工具如何写呈报
服务器过载怎么回事
我的世界国际版服务器有中文的吗
佛山用友软件开发
超声影象xp 数据库
数据库连接错误15405
未转变者如何快速开服务器
新的软件开发
数据库查消费
青岛银行软件开发工资
剑三的服务器
服务器素质是什么意思
细化和量化数据库
网吧无盘系统服务器
国家社会科学期刊数据库
xml数据库产品
数据库执行界面
网络技术ip地址聚合计算
台式机主板插服务器内存
软件开发能力考试科目
rust无法解析服务器
万里红 万里数据库
nsc第七届网络安全大会
了解眼镜行业软件开发商