uni-app 中解析含 HTML 标签的富文本内容——小程序端最佳实践指南在使用 uni-app 开发跨平台应用（尤其

在使用 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: github.com/jin-yufeng/…
支持 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 的复杂内容，为用户提供更丰富的阅读体验。

uni-app 中解析含 HTML 标签的富文本内容——小程序端最佳实践指南