小程序-uniapp：vue3-typescript项目使用mp-html实现展示富文本
2026/4/6 10:15:00
网站建设
项目流程
1、mp-html 和 rich-text 相比 有什么优势
| 对比维度 | rich-text | mp-html |
|---|
| 标签支持 | 基础标签，不支持复杂元素 | 全HTML标签支持，包括video、table等 |
| 交互功能 | 仅整体点击，功能有限 | 图片预览、链接跳转、代码高亮等丰富交互 |
| 跨平台兼容 | 仅微信小程序 | 多平台+uni-app，一套代码适配全端 |
| 性能表现 | 复杂内容渲染卡顿 | 轻量化设计，性能提升300% |
| 安全控制 | 无法过滤恶意标签 | 支持禁用危险标签，样式隔离 |
| 扩展能力 | 功能单一，需自行开发 | 插件生态丰富，支持按需扩展 |
2、安装 mp-html
pnpm install mp-html
![]()
3、pages.json easycom 配置
"^mp-html(.*)": "mp-html/dist/uni-app/components/mp-html/mp-html.vue"
![]()
4、使用
<mp-html :content="richText"/>
![]()
成功
5、mp-html 核心属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| content | String | - | 需渲染的 HTML 字符串，支持复杂标签（如table、video、svg）。 |
| container-style | String | - | 容器样式（如padding: 10px;），自定义渲染区域外观。 |
| copy-link | Boolean | true | 外部链接点击时是否自动复制链接地址（H5/App 平台直接跳转）。 |
| domain | String | - | 主域名，用于拼接相对路径的链接（如img的src）。 |
| error-img | String | - | 图片加载失败时的占位图路径。 |
| lazy-load | Boolean | false | 是否启用图片懒加载，优化长页面性能。 |
| loading-img | String | - | 图片加载中的占位图路径。 |
| pause-video | Boolean | true | 播放一个视频时是否自动暂停其他视频（避免同时播放）。 |
| preview-img | Boolean | true | 图片点击是否自动预览（支持左右滑动查看所有图片）。 |
| scroll-table | Boolean | false | 表格是否添加横向滚动层（解决宽表格显示问题）。 |
| selectable | Boolean | false | 是否允许长按复制文本（iOS 端需设为"force"解决兼容问题）。 |
| set-title | Boolean | true | 是否将 HTML 中的title标签内容设置为页面标题。 |
| show-img-menu | Boolean | true | 图片长按是否显示菜单（如保存、分享）。 |
| tag-style | Object | - | 自定义标签默认样式（如{ p: 'margin: 10px;' }）。 |
| use-anchor | Boolean | false | 是否启用锚点跳转（可设置偏移量）。 |
6、mp-html 核心方法
| 方法名 | 参数 | 说明 |
|---|
| setContent(content, append) | content（String）：HTML 字符串
append（Boolean）：是否追加内容 | 动态设置富文本内容（append=false时覆盖原有内容）。 |
| navigateTo(id, offset) | id（String）：锚点 ID
offset（Number）：跳转偏移量（px） | 滚动至指定锚点位置（需启用use-anchor）。 |
| getText() | - | 获取富文本中的纯文本内容。 |
| imgList | - | 获取所有图片的数组（含src、original-src等属性）。 |
| pauseMedia() | - | 暂停所有正在播放的音视频。 |
7、欢迎交流指正