wxParse教程五步把HTML与Markdown变成微信小程序富文本页面【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse当后台返回一段 HTML 字符串或一篇 Markdown 文章时微信小程序页面里往往只能显示一堆乱码文本。wxParse 就是为这种场景准备的它是一款富文本解析组件把 HTML 和 Markdown 转成小程序页面能直接展示的 WXML 节点顺手把图片尺寸适配、点击预览这类细节都处理了。做内容展示类小程序的话值得上手试试。图中是 wxParse 的实际解析效果内联样式、小表情、图片自适应都能正常渲染出来。 五步跑通 wxParse先看效果再接入自己的项目。拿代码git clone https://gitcode.com/gh_mirrors/wx/wxParse用微信开发者工具打开仓库根目录。仓库本身就是小程序示例pages/index/ 是一个现成的 Demo打开就能看到解析效果接入自己的项目时把整个 wxParse/ 目录拷进项目保留 wxParse.js、html2json.js、showdown.js、wxParse.wxml 等文件在页面 JS 里引入var WxParse require(../../wxParse/wxParse.js);在 app.wxss 或页面 wxss 里引样式import /wxParse/wxParse.wxss;之后一行调用加两行模板就够var article div你的HTML内容/div; WxParse.wxParse(article, html, article, this);import src../../wxParse/wxParse.wxml/ template iswxParse data{{wxParseData:article.nodes}}/注意第二个参数从 html 换成 md同一个接口就改解析 Markdown 了。功能拆解四个核心能力常见 HTML 标签基本够用wxParse 能解析约 70% 的常用标签文本类的 span、strong、p媒体类的 img、video 都在列。原 HTML 里的内联 style 和 class 属性会被保留解析后的观感和原文接近。拿它展示 CMS 里的文章内容覆盖度基本够。Markdown 文章直接转组件内置了 showdown 处理 Markdowntype 传 md 就行标题、列表、加粗这些常见语法都能渲染。写博客习惯用 Markdown 的话不用在服务端多做一步格式转换。图片自适应与点击预览图片尺寸会自动计算不会出现撑破屏幕或缩成一小块的情况。点击图片能进预览文章里有多张图时还可以左右滑动切换。wxParse 的第五个参数可以设图片左右留白图多的内容场景下这个细节挺重要。小表情与多数据循环渲染支持解析[00]这种固定格式的小表情标签需先用 emojisInit 初始化映射表。要同时渲染多段文本时比如评论区可以用 wxParseTemArray 批量循环渲染pages/index/index.js 里有可直接参考的循环示例。场景对号入座谁适合用它资讯阅读文章正文来自后端 HTML这是最典型的用法个人博客用 Markdown 写稿转成页面直接发电商详情商品描述里带图片、带样式社交社区解析用户发布的内容反过来页面只展示纯文本的不用引入它内容里有大量表格的先看看下面的避坑提示。⚠️ 上手前先看这三条坑项目已停止维护。README 里明确写了这一点代码仅做参考使用别指望有新功能和 bug 修复。新项目用它时留意一下与基础库版本的兼容性。table 支持有限。官方表述就是比较有限内容里表格多的话建议先贴一段进示例页看看渲染效果再决定。bindName 必须和模板数据对应。wxParse 里传 article模板里就要用article.nodes名字对不上页面会一片空白而且不会报任何错排查起来容易绕弯。收尾wxParse 虽已停止维护但功能覆盖普通富文本场景依然够用。最快的下一步克隆示例工程在开发者工具里打开 Demo把示例内容换成你自己的数据验证一遍。【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考