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 |
是否启用锚点跳转（可设置偏移量）。 开启后会显示id，如下图，知识前面多了个类似id的字符串 哈希前缀是正常现象 ，是 mp-html 为避免 id 冲突设计的机制 跳转时直接用原始 id，组件会自动处理匹配。 无需手动修改或关注前缀，专注于业务逻辑即可。  |
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、设置锚点
TypeScript
// <view> 不能设置固定高度，否则锚点导航不生效
<view :style={height: auto}>
<mp-html
ref="mpHtmlRef"
:content="renderedFullText"
:use-anchor="true"
/>
</view>
// 定义ref
const mpHtmlRef = ref<any>(null);
// 导航到锚点位置
const navigateTo= (item: any) => {
if (mpHtmlRef.value) {
mpHtmlRef.value.navigateTo('div4', 50);
}
};
// mpHtmlRef.value.navigateTo 内部核心方法用的是
uni.pageScrollTo({
scrollTop,
duration: 300
})测试成功