根本原因是rich-text组件仅支持nodes数组结构且忽略大部分css样式，导致段落挤在一起、图片溢出等；应优先使用mp-html自动转换html为合规节点并处理自适应、预览等功能。
小程序里不能直接用 v-html 或 innerHTML 渲染 HTML，必须转成平台可识别的结构，否则内容不显示、图片不加载、样式全丢。
为什么富文本在小程序里排版错乱？
常见现象：段落挤在一起、图片超宽溢出、空行消失、字体大小不一致、列表缩进丢失。
根本原因不是“写法不对”，而是小程序的 rich-text 组件只认节点数组（nodes），不解析原始 HTML 字符串；且它对 CSS 的支持极弱——style 属性基本被忽略，margin/padding 不生效，text-align 仅部分标签支持。
- 后端返回的 HTML 带内联
style="width:600px; margin:10px;"→ 小程序直接丢弃 -
<p><br></p>或连续<p></p>→ 渲染为零高度，视觉上“没空行” -
<img src="xxx">没加style="max-width:90%"→ 默认按原图尺寸渲染，极易撑破容器
怎么把 HTML 字符串转成 rich-text 能用的 nodes？
手动解析 HTML 字符串写 AST 是高危操作，容易漏标签、崩递归、不防 XSS。推荐用成熟转换库，而非正则替换。
- 首选
mp-html：适配 uni-app 全平台，自动处理img自适应、点击预览、链接跳转、代码块高亮，内置 XSS 过滤 - 次选
u-parse：如果项目已用 uView，集成轻量，但对嵌套表格、复杂样式支持较弱 - 避免
wxParse：停止维护多年，微信基础库 2.25+ 后频繁出现nodes渲染为空、img加载失败问题
安装后直接用：
<mp-html :content="htmlContent"></mp-html>
不用自己调 parse、不用手动拼 nodes 数组 —— 它内部已处理好标签映射、属性清洗、图片宽高重设。
图片和空行怎么强制统一适配？
即使用了 mp-html，仍可能遇到 CDN 图片未配置白名单、或服务端返回的 HTML 里 img 缺 alt 导致审核不通过。此时需在传入前做轻量预处理：
- 用正则统一补
img样式：htmlContent.replace(/<img>]*)/gi, '<img style="max-width:90%"> - 把多个
<p><br></p>或空<p></p>替换为带 margin 的占位节点（如<div style="height:32rpx;"></div>） - 禁用所有
style中的float、position、z-index—— 这些在rich-text里完全无效，留着反而干扰解析
注意：mp-html 的 useAnchor 和 lazyLoad 配置要显式开启，否则图片滚动时不会懒加载，首屏卡顿明显。
样式定制到底在哪写？
别在 HTML 字符串里塞 style，也别指望 rich-text 支持 class 选择器。所有样式必须走组件级 WXSS（小程序）或 scoped CSS（uni-app）。
-
mp-html提供classPrefix配置，会为每个标签加前缀类名（如mp-h1、mp-p），你只需在页面样式里写：
.mp-p {
margin-bottom: 24rpx;
line-height: 1.6;
}
.mp-img {
border-radius: 8rpx;
}
真正麻烦的是表格、代码块、自定义容器这类非标准结构 —— 它们不会被转成 nodes，得提前和服务端约定：这类内容改用 JSON 结构返回，前端用原生 view + text 组合渲染，绕过 rich-text 限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
