不能直接用rich-text渲染后端html，因其仅支持白名单标签和极简结构，会过滤style、class、table、video等，导致样式丢失、结构塌陷、图片不显示；wxparse通过html→ast→节点树完整解析，保留内联样式与class，支持图片自适应、表情替换及markdown一键转换。
小程序原生不支持直接渲染 HTML 字符串，rich-text 组件虽能解析部分标签，但对 table、video、内联样式穿透、自定义表情等支持弱；wxParse 是更可控、可定制的替代方案，适合 CMS 内容、资讯页、商品详情等真实业务场景。
为什么不能直接用 rich-text 渲染后端 HTML？
rich-text 表面简单，实则限制多：它只接受结构化的 nodes 数组或极简 HTML 字符串（如无 style、无嵌套、无自定义 class），且会过滤掉大部分属性。后端返回的 CMS 富文本（含 style="color:#333"、class="article-img"、ul>li>span 嵌套）一贴进去就丢样式、塌结构、图片不缩放、列表错位。
常见错误现象包括：
-
rich-text里图片全显示为“图片未加载”，因为 src 不是 HTTPS 或没配域名白名单 - 带
style的span标签被忽略，文字颜色/大小失效 -
table标签直接消失，video标签被静默过滤 - 换行、空格、
wxParse 怎么把 HTML 转成可渲染节点？
它不是简单替换标签，而是走完整解析链：html → AST → 小程序节点树 → WXML 模板渲染。关键在中间两步：AST 保留了原始结构和属性（包括 style 和 class），节点树则把 img 映射为带 bindtap 的 image、把 p 映射为带默认 margin 的 view。
调用时只需一行：
WxParse.wxParse('content', 'html', htmlStr, this, 5);
其中：
-
'content'是绑定到this.data的字段名，WXML 里用{{content.nodes}}取值 -
'html'可换成'md'直接解析 Markdown，无需额外转 HTML -
5是图片左右 padding（单位 rpx），不传默认为 0 - 必须确保
htmlStr是字符串，不是对象或 null —— 后端字段为空时要兜底htmlStr = htmlStr || ''
图片、样式、表情这些细节怎么处理？
这些恰恰是业务最常卡住的地方，wxParse 都有对应机制，但需要手动启用或配置：
- 图片自适应：内部会读取原始
img的width属性，对比屏幕宽度自动缩放；若后端没给宽高，需提前用正则补上width="100%"，否则可能撑破容器 - class 和 style 穿透：解析后节点仍带
class和style字段，但 WXSS 必须显式写对应选择器，比如 HTML 有<p class="lead"></p>，就得在 WXSS 里加.lead { font-size: 32rpx; } - 表情替换：启用
emojis需在调用时传第 6 个参数，如WxParse.wxParse(..., { emojis: wxParse.emojis })，且 HTML 中得是[01]这类固定格式 - 链接跳转：默认不处理
a标签，需在 WXML 模板里给a节点加bindtap="wxParseTagATap"，并在 JS 里补充该方法
别漏掉这三处硬性依赖
拷文件不是复制一个 wxParse.js 就完事。以下 7 个文件缺一不可，少一个就会报 Cannot find module 'xxx' 或解析中断：
-
wxParse.js（主入口） -
html2json.js（HTML 转 AST） -
htmlparser.js（词法分析） -
showdown.js（仅当用 md 模式时需要） -
wxDiscode.js（字符解码） -
wxParse.wxml（模板） -
wxParse.wxss（基础样式）
路径引用必须严格匹配，比如 require('../../wxParse/wxParse.js')，而 WXML 中 <import src="/wxParse/wxParse.wxml"></import> 的斜杠开头表示从根目录起算——这两处路径写错，控制台不会报错，但页面空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
