微信小程序如何把 HTML 和 Markdown 渲染成富文本：wxParse 完整上手指南

微信小程序如何把 HTML 和 Markdown 渲染成富文本wxParse 完整上手指南【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse后台或爬虫给你一堆 HTML / Markdown 内容小程序原生组件却不知道往页面上画什么。wxParse 是一个微信小程序富文本解析组件把 HTML 和 Markdown 转成可直接展示的 WXML适合做资讯、博客、商品详情类页面的开发者。先看效果解析后的页面长什么样资讯文章页CMS 吐出的带标题、加粗、图片的文章正文一行解析调用就能变成可读排版。商品详情运营用 HTML 写的电商详情页直接渲染到商品页不用每个 SKU 手写一套模板。Markdown 博客用 Markdown 写的个人博客先转 HTML 再解析和 HTML 内容走同一套展示逻辑。下图是仓库自带的演示页面展示文本标签、内联样式、图片和小表情的实际解析效果wxParse 富文本解析开箱能用的能力解析 CMS 常用的 HTML 标签转换层覆盖了 span、strong、p、img、video 等富文本里最常用的标签大部分后台富文本编辑器的产物都能直接解析展示。文本标签和媒体标签都有table 标签还在 README 的 ToDo 列表里别把它当依赖项。同一套渲染路径转 Markdown 文章内置的 showdown 转换器先把 Markdown 转成 HTML再走和 HTML 完全相同的渲染流程两类内容共用一套展示逻辑。type 参数传md即可模板层不需要关心内容原本是什么格式。️ 让图片自适应屏幕并点击预览图片加载时wxParse 会取原图尺寸和屏幕宽度对比超宽就按比例缩小避免大图撑破版面。点图片还能触发系统级多图预览内部流程见下图 把 [00] 格式小表情变成 gif 图配置固定格式如[00]的表情标签后评论、聊天里的这类标签会被渲染成内置表情图文本更生动。仓库自带 wxParse/emojis/ 目录下 130 多张表情图。内联 style 与 class 名穿透HTML 里的 style 属性和 class 名都会被保留小程序侧再定义对应 CSS就能调整富文本外观不必用默认样式。5 步跑起来不用 npm install前置条件一个已用微信开发者工具打开的小程序项目即可组件是纯 JS 实现拷文件就能用。获取仓库git clone https://gitcode.com/gh_mirrors/wx/wxParse把wxParse/整个目录复制到项目根目录wxParse.js、html2json.js 等 7 个文件缺一不可。页面 JS 里引入模块var WxParse require(../../wxParse/wxParse.js);页面 wxss 或 app.wxss 里引入样式import /wxParse/wxParse.wxss;调用解析函数type 传 html 或 mdWxParse.wxParse(article, html, article, this)wxml 里引入模板并渲染解析结果template iswxParse data{{wxParseData:article.nodes}}/适合什么项目什么情况别用适合资讯、博客、电商详情这类内容照原样展示的场景内容来自 CMS、后台或用户提交你只负责渲染。不建议富文本里要嵌交互表单、复杂表格布局或需要对渲染像素级微调时不如自己写自定义组件。注意README 开头已声明项目停止维护它适合快速落地的小中型项目长期主力产品先评估现有能力是否够用。想深入实现可以从 wxParse/html2json.js 的转换逻辑读起。如果你的页面只需要把服务端 HTML 原样画出来现在拷进项目试一下5 步之后就能看到效果。【免费下载链接】wxParsewxParse-微信小程序富文本解析自定义组件支持HTML及markdown解析项目地址: https://gitcode.com/gh_mirrors/wx/wxParse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考