在使用 uni-app 开发跨平台应用（尤其是微信小程序、支付宝小程序等）时，经常会遇到从后端接口获取带有 HTML 标签的富文本内容（如文章正文、商品详情等），需要在前端安全、高效地渲染出来。然而，小程序平台本身并不支持直接解析 HTML ，且 uni-app 的 <rich-text> 组件对 HTML 的兼容性有限。本文将系统讲解如何在 uni-app 中正确解析并展示含 HTML 标签的富文本内容，并提供适用于各小程序平台的可靠解决方案。
一、为什么不能直接用 innerHTML？
在 Web 端，我们可以使用 v-html 指令直接渲染 HTML 字符串：
<div v-html="htmlContent"></div>但在 小程序平台（如微信小程序）中，该指令会被忽略或报错，因为小程序的渲染层与逻辑层分离，且出于安全考虑禁止动态插入 HTML。
因此，必须将 HTML 字符串转换为小程序可识别的结构化数据，再通过 <rich-text> 或其他方式渲染。
二、官方推荐方案：使用 <rich-text> + 转换工具
1. <rich-text> 组件简介
<rich-text> 是 uni-app 提供的跨平台富文本组件，支持传入 nodes 数组（结构化节点）或纯文本字符串。
- ✅ 支持基本标签：
<p>,<div>,<span>,<strong>,<em>,<a>,<img>等 - ❌ 不支持
<script>,<style>,<iframe>等危险或复杂标签 - ⚠️ 微信小程序对
<img>的src要求是 HTTPS 且需配置域名白名单
2. 将 HTML 字符串转为 nodes 数组
由于 <rich-text> 无法直接解析原始 HTML 字符串，我们需要借助 HTML 解析库 将其转换为 nodes 格式。
推荐工具：mp-html（轻量、跨平台、功能强大）
GitHub: https://github.com/jin-yufeng/mp-html
支持 uni-app、微信/支付宝/百度/字节等小程序，以及 H5 和 App。
安装方式（HBuilderX 可视化导入）：
- 从插件市场搜索 "mp-html"
- 导入到项目
components/mp-html目录
使用示例：
<template>
<view class="container">
<mp-html :content="htmlContent" />
</view>
</template>
<script>
import mpHtml from '@/components/mp-html/mp-html.vue'
export default {
components: { mpHtml },
data() {
return {
htmlContent: '<h2>标题</h2><p>这是一段<strong>富文本</strong>内容。</p><img src="https://example.com/test.jpg" />'
}
}
}
</script>✅ 优势：
- 自动解析 HTML 并适配各平台
- 支持图片预览、链接跳转、代码高亮等扩展功能
- 内置 XSS 过滤，安全性较高
三、替代方案：使用 uniapp 自带 rich-text（适用于简单场景）
如果内容结构简单（无复杂嵌套、无样式），可手动或用轻量库转换 HTML 为 nodes。
示例：使用 wxParse（仅限微信小程序）或自定义解析函数
但注意：wxParse 不跨平台，在 uni-app 中不推荐。
更通用的做法（仅基础标签）：
// 简易 HTML 转 nodes（仅作演示，生产环境建议用 mp-html）
function htmlToNodes(html) {
// 实际开发中应使用成熟的解析器
return [{ type: 'text', text: html.replace(/<[^>]+>/g, '') }];
}然后在模板中：
<rich-text :nodes="htmlNodes"></rich-text>⚠️ 此方法难以处理嵌套、图片、链接等，仅适合极简文本。
四、安全注意事项
-
防止 XSS 攻击
后端返回的 HTML 可能包含恶意脚本。务必在前端或后端进行过滤。
mp-html默认开启标签白名单过滤- 可配置
tag-style、domain、onLinkPress等增强控制
-
图片域名配置
微信小程序需在 微信公众平台 → 开发管理 → 开发设置 → 服务器域名 中添加图片 CDN 域名。
-
性能优化
- 避免一次性渲染过长富文本（可分页或懒加载）
- 对于静态内容，可考虑在构建时预转换
五、完整推荐流程
- 后端：返回标准 HTML 字符串（建议已过滤危险标签）
- 前端 ：
- 安装
mp-html组件 - 在页面中引入并使用
<mp-html :content="htmlStr" /> - （可选）配置图片点击预览、链接跳转等交互
- 安装
- 测试：在 H5、微信小程序、App 等多端验证渲染效果
六、常见问题 FAQ
Q：为什么图片不显示？
A：检查是否为 HTTPS；是否在小程序后台配置了 downloadFile 合法域名。
Q：样式丢失怎么办？
A：mp-html 支持内联样式和部分 CSS，但小程序限制较多。建议后端返回结构化内容，或使用 class + 外部样式映射。
Q：能否支持视频、音频？
A：mp-html 支持 <video>、<audio> 标签（各平台能力不同），需测试兼容性。
结语
在 uni-app 中处理富文本，mp-html 是目前最成熟、跨平台兼容性最好的解决方案。它不仅解决了 HTML 解析难题，还提供了良好的扩展性和安全性。避免使用过时或非跨平台的方案（如 wxParse），能显著提升开发效率与应用稳定性。
📌 建议：对于新项目，直接集成
mp-html；对于已有项目，逐步替换原生rich-text以获得更好体验。
通过合理使用富文本组件，你的 uni-app 小程序将能优雅地展示来自 CMS、编辑器或第三方 API 的复杂内容，为用户提供更丰富的阅读体验。