微信小程序富文本解析指南wxParse 让 HTML 和 Markdown 直接渲染【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse如果你在给小程序做文章详情页后端返回的是 HTML 或 Markdown大概体会过这种尴尬WXML 认不了这些格式直接渲染出来就是一团乱码文本。wxParse 就是为这种情况做的微信小程序富文本解析组件它把富文本内容转换成小程序能渲染的节点结构文字、图片、表情都能原样展示。三步装好并跑起来拿到代码git clone https://gitcode.com/gh_mirrors/wx/wxParse把 wxParse/ 文件夹整体拷进小程序根目录其中 wxParse.js、html2json.js、htmlparser.js、showdown.js、wxDiscode.js、wxParse.wxml、wxParse.wxss 缺一不可在目标页面的 js 里 require 该模块调用一次 wxParse 把 HTML 数据传进去同时 WXML 里引入 wxParse.wxml 模板、wxss 里引入样式文件页面就能出内容了能力拆解它替你处理了哪些脏活让后端返回的 HTML 原样渲染wxParse 解析了大多数常见标签span、strong、p、ul/li、blockquote、img、video 等并保留源内容里的内联 style 和 class。也就是说从 CMS 接口直接拿到的正文 HTML 可以原封不动丢进去不用自己剥标签、拼样式。实现 Markdown 到 wxml 的一键转换同一次 wxParse 调用只需把 type 参数从 html 换成 md组件就会把整篇 Markdown 转成和 HTML 一样的渲染节点。博客型内容如果是 Markdown 写的前端不需要再维护两套渲染逻辑。帮你搞定图片自适应与多图预览 wxParse 会按屏宽自动计算图片的展示尺寸图片不会被拉满屏幕或缩成一小坨同时把正文里的图片登记成数组点任意一张都能进入系统全屏多图预览阅读体验接近原生文章页。把表情码转成小动图通过 emojisInit 配置表情标签的格式和图片目录后固定格式的表情码会被解析成对应的 gif。组件自带一套表情示例图配好就能用。什么项目适合它 如果你的项目是资讯阅读类小程序可以用它直接渲染新闻和文章正文省掉前端拆字段、手工排版的活儿如果你的项目是博客或电商类小程序Markdown 文章和商品详情的富文本描述也能一套逻辑搞定如果你的项目是社交类小程序用户消息里带表情码或 HTML 片段的场景同样适用。它不太适合的场景是本项目已在 README 中声明停止维护如果你需要频繁扩展新标签或期望长期更新建议自行 fork 维护或关注社区里仍在活跃维护的替代方案。如果你正在做一个要展示后端富文本的小程序直接把组件拷进项目照着 pages/index/index.js 里的示例把解析流程跑一遍很快就能把详情页立起来后续要加功能时可以参考 README.md 里的二次开发说明。【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考