五分钟在小程序里渲染 HTML 与 Markdown：wxParse 富文本解析完整实战

五分钟在小程序里渲染 HTML 与 Markdown：wxParse 富文本解析完整实战

【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse

wxParse 是微信小程序富文本解析组件，解决小程序无法直接渲染 HTML 和 Markdown 的问题。后端返回一段 HTML 或 Markdown 文稿，你贴进 WXML 只会看到一堆原始标签和换行。wxParse 把它转成小程序能渲染的节点结构，变成文字、图片和列表。

它到底帮你解决了什么问题

• WXML 不认识 HTML，贴进去只剩原始标签
• HTML 与 Markdown 都要处理，不想写两套代码
• 图片大小不一容易撑破版面，还要逐张算尺寸

wxParse 一句话定位：把 HTML 和 Markdown 解析成 WXML 节点树，富文本直接贴进页面就能显示。

五分钟跑通：从克隆到出效果 🚀

最小路径一共五步。

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/wx/wxParse
2. 把 wxParse/ 整个目录复制进自己的小程序项目
3. 页面 JS 引入wxParse.js，WXSS 引入wxParse.wxss
4. 在 JS 里调用解析函数，WXML 里引用模板：

var WxParse = require('../../wxParse/wxParse.js'); WxParse.wxParse('article', 'html', data, this);

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

5. 用开发者工具预览，查看渲染结果

图：wxParse 在小程序里解析 HTML 后的实际渲染效果

三个最值得关注的特性 ✨

wxParse 双格式解析：HTML 与 Markdown 通吃

两种格式都能解析，切换一个 type 参数即可。文章正文用 HTML，博客源用 Markdown，不用写两套逻辑。

图片自适应：不用手动算尺寸

按容器宽度动态计算图片展示大小。不同来源的图片不会撑破屏幕，也不会缩得太小，省去逐张处理的工作量。

wxParse 多数据渲染：评论与详情页同一套方法

支持循环渲染多段富文本，还能解析固定格式的表情标签。评论列表、商品详情页，用同一套方式处理。

适合什么样的项目 / 什么时候该换方案 🎯

• 资讯、博客类小程序：文章正文是后端返回的 HTML 字符串
• 电商类小程序：商品详情是长段富文本
• 社区类小程序：用户发布 HTML 或 Markdown 内容
• 不太适合：复杂表格排版和高保真页面还原，表格支持有限；且项目已停止维护，新项目建议仅参考思路

下次项目里要展示后端一段 HTML 的需求，不妨先把 wxParse 克隆下来，按上面的步骤五分钟跑通，看实际效果再决定留不留。

【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse