mp-html

mp-html#

资源概述#

mp-html 是一款功能强大的 小程序富文本组件，由 jin-yufeng 个人维护（GitHub 3731 stars / 527 forks，MIT 协议）。它解决了小程序原生 rich-text 组件功能不足的问题，支持在微信、QQ、百度、支付宝、头条和 uni-app 等多个平台使用。

核心优势：

跨平台：一套代码，多平台运行（微信/QQ/百度/支付宝/头条/uni-app）
功能丰富：支持 table、video、svg 等复杂标签，官方 rich-text 不支持的内容可渲染
轻量化：≈25KB（9KB gzipped），对包体影响极小
插件生态：支持代码高亮、LaTeX 公式、搜索关键词、富文本编辑、emoji 等扩展插件
流式输出：支持 AI 场景的打字机效果（差量更新，无闪烁）

适用场景：

小程序中渲染后端返回的 HTML 内容（CMS、博客、商品详情）
AI 对话场景的 Markdown→HTML 渲染（支持流式输出）
需要表格、代码块、公式等复杂排版的场景

设计规范#

组件属性#

属性	类型	默认值	说明
content	String		用于渲染的 html 字符串
container-style	String		容器样式
copy-link	Boolean	true	是否允许外部链接点击时自动复制
domain	String		主域名（用于链接拼接）
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	文本长按复制
tag-style	Object		标签默认样式
use-anchor	Boolean	false	锚点链接

组件事件#

事件	触发时机
load	DOM 树加载完毕
ready	图片加载完毕
error	渲染错误
imgtap	图片被点击
linktap	链接被点击
play	音视频播放（v2.3.0+）
pause	音视频暂停（v2.5.2+）
fullscreenchange	视频全屏变化（v2.5.2+）

插件体系#

插件	作用
audio	音乐播放器
editable	富文本编辑
emoji	解析 emoji
highlight	代码块高亮
markdown	渲染 Markdown
search	关键词搜索高亮
style	匹配 style 标签样式
txv-video	腾讯视频
img-cache	图片缓存
latex	LaTeX 公式渲染
card	卡片展示

审核规范#

mp-html 是开源 UI 组件，无需平台审核。但需注意：

富文本内容来源：若从后端动态获取 HTML，需确保内容不含违规链接/脚本
图片安全：组件默认开启图片预览，若图片含敏感内容需关闭 preview-img
链接处理：默认 copy-link=true 会复制外部链接，部分小程序审核不允许引导跳转，需设为 false

开发指南#

快速上手（微信小程序 npm 方式）#

code

# 1. 安装
npm install mp-html

code

// 2. 页面 json 中引入
{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

code

<!-- 3. 页面 wxml -->
<mp-html content="{{html}}" />

code

// 4. 页面 js
Page({
  onLoad() {
    this.setData({
      html: '<div>Hello World!</div><p>支持 <b>富文本</b> 渲染</p>'
    })
  }
})

uni-app 使用#

code

<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 },
  data() {
    return { html: '<div>Hello uni-app!</div>' }
  }
}
</script>

AI 流式输出场景（v2.5.2+）#

code

// 支持 setContent 方法实现差量更新，避免闪烁
this.selectComponent('#mp-html').setContent(chunk)

常见陷阱#

npm 构建问题：微信小程序使用 npm 需在开发者工具中「构建 npm」
rich-text 不兼容：mp-html 是独立组件，不能直接替换 rich-text 标签
nvue 中使用需额外拷贝：uni-app nvue 模式需将 dist/uni-app/static 拷贝到项目 static 目录
cli 方式引入需配置：uni-app cli 项目需在 vue.config.js 中配置 transpileDependencies
包体影响小：≈25KB（9KB gzipped），对小程序包体限制几乎无影响

生态资源#

官方资源#

文档站：jin-yufeng.github.io/mp-html
GitHub：github.com/jin-yufeng/mp-html
npm：npmjs.com/package/mp-html
uni-app 插件市场：ext.dcloud.net.cn/plugin?id=805

项目	说明
mp-html-demo	官方示例项目
rich-text（原生）	小程序内置富文本组件（功能有限）
towxml	另一种 Markdown/HTML 渲染方案（更重）

版本更新#

版本历史#

v2.5.2（2025-12-14）：新增音视频 pause/fullscreenchange 事件；优化流式输出差量更新
v2.5.1（2025-04-20）：Bug 修复与性能优化
v2.5.0（2024-04-22）：大版本更新，新增多项功能
v2.4.0：新增 setPlaybackRate API
v2.3.0：新增 play 事件

维护状态#

活跃维护，最近 push 2026-04-19
MIT 协议，可免费商用
npm 最新版 v2.5.2

特性

详细文档

mp-html#

资源概述#

设计规范#

组件属性#

组件事件#

插件体系#

审核规范#

开发指南#

快速上手（微信小程序 npm 方式）#

uni-app 使用#

AI 流式输出场景（v2.5.2+）#

常见陷阱#

生态资源#

官方资源#

相关项目#

版本更新#

版本历史#

维护状态#