mp-html · 强大的小程序富文本组件｜多平台原生与 uni-app 接入全指南

项目仓库： https://github.com/jin-yufeng/mp-html

开源协议：MIT · 定位：小程序富文本渲染组件 · 体积：约 25KB（gzipped 9KB） · 支持：微信 / 支付宝 / 百度 / QQ / 头条等小程序 + uni-app · 官方文档：jin-yufeng.github.io/mp-html

1 项目简介

mp-html 是一个强大的小程序富文本组件：支持在多个主流小程序平台和 uni-app 中使用，支持丰富标签（table、video、svg 等）、丰富事件效果（自动预览图片、链接处理）、占位图、锚点跳转、长按复制，体积约 25KB（gzipped 9KB），效率高、容错性强。

1.1 核心信息一览

1.2 适用场景

• 小程序 / uni-app 中渲染后端富文本 / Markdown 转 HTML。
• 替代小程序原生 rich-text 组件以获得 table、video、svg、锚点等能力。

1.3 能力边界（官方口径）

• 1.x 升级到 2.x 需按更新指南。
• nvue 中使用需把 dist/uni-app/static 内容拷贝到项目 static 目录。

2 功能特性

• 丰富标签：table、video、svg 等。
• 事件效果：自动预览图片、链接处理、长按复制。
• 占位图：加载中、出错、预览时。
• 插件扩展：audio、editable、emoji、highlight、markdown、search、style、txv-video、img-cache、latex、card。
• 流式输出：差量更新解决闪烁。

3 官方界面预览

mp-html 是组件，无独立界面；嵌入页面渲染富文本。

4 官方跳转链接汇总

5 前置要求与服务器配置

5.1 软件前提

• 微信开发者工具或对应小程序 IDE；Node.js / npm。

5.2 硬件建议

• 普通开发机；组件库无服务器运行时。

5.3 端口与资源

• 无。

6 方式一：原生小程序 npm 引入

npm install mp-html

{ "usingComponents": { "mp-html": "mp-html" } }

<mp-html content="{{html}}" />

7 方式二：uni-app / 源码方式

npm install mp-html

<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default { components: { mpHtml } }
</script>

8 配置项说明

• 属性：content、copy-link、domain、error-img、lazy-load、loading-img、pause-video、preview-img、scroll-table、selectable、set-title、use-anchor 等。
• 事件：load、ready、error、imgtap、linktap、play、pause、fullscreenchange。

9 常用运维命令

• 升级：npm update mp-html。

10 常见故障排查

• nvue 不显示：拷贝 static 目录。
• CLI 项目编译失败：vue.config.js 配置 transpileDependencies。

11 风险与合规说明

• 许可证：MIT。
• 生产前请充分测试；插件 bug 造成的损失官方不负责。
• 本文整理自官方 README，命令以官方文档最新说明为准；不包含 star 数等动态数据。