wxParse 快速实现微信小程序富文本解析：完整上手指南

wxParse 快速实现微信小程序富文本解析：完整上手指南

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

wxParse 是一个微信小程序富文本解析组件，把后台返回的 HTML 或 Markdown 直接转成 WXML 可渲染的结构。如果你在开发资讯、博客或商品详情页，它能解决「接口给了一坨 HTML，小程序却显示不出来」的问题。

当后台丢给你一段 HTML

常见场景：内容后台把文章存成 HTML 或 Markdown，接口返回一串字符串，而 WXML 没法直接渲染<div>、<p>这类标签，手写 WXML 还原排版又不现实。wxParse 的作用就是把这段 HTML/Markdown 解析成小程序能展示的 WXML 结构，顺带处理图片、表情、样式这些细节。

快速上手：四步跑通第一个效果 🔧

1. 获取源码：git clone https://gitcode.com/gh_mirrors/wx/wxParse，把wxParse/整个目录复制到你的小程序项目（内含 wxParse.js、html2json.js、htmlparser.js、showdown.js、wxDiscode.js、wxParse.wxml、wxParse.wxss 七个文件）
2. 页面 JS 中引入：var WxParse = require('../../wxParse/wxParse.js');
3. 页面 wxss 或 app.wxss 中引入样式：@import "/wxParse/wxParse.wxss";
4. 在 onLoad 里调用WxParse.wxParse('article', 'html', data, this, 5)，WXML 里写上<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

项目在pages/index/里带了一份可运行的示例，复制过去改改内容就能直接看效果。

能力拆解

一个组件同时解析 HTML 和 Markdown

解析方法第二个参数传 'html' 或 'md' 即可，同一套组件处理两种格式，Markdown 写作的博客文章不用再引第二个库。

图片自适应，点击可预览多图

会动态计算图片尺寸，避免大图撑破布局；点击可放大，一篇文章里的多张图还能左右滑动按序预览。

样式、class、小表情都支持

原 HTML 的内联 style 和 class 属性会被保留，[03]这类固定格式的小表情能转成 gif，wxParse/emojis/目录内置了 135 张。

免安装，复制即用

纯 JS + WXML 模版实现，没有依赖安装和构建步骤；模版层级可扩展，也支持多数据循环渲染，适合评论、回复这类多条富文本列表（pages/index/index.wxml里有现成写法）。

怎么选、怎么用

适合：

• 资讯、博客、商品详情等内容由后台 HTML/Markdown 产出的展示页
• 需要批量渲染多条富文本（评论、回复区）的场景

慎用：

• README 开头已声明项目停止维护，仅作参考使用，新项目选型前建议先对比替代方案
• table 支持有限，iframe 等复杂布局解析不了，数据展示重的页面不合适

完整参数看仓库 README 的基本使用方法；想验证效果，直接拿pages/index/的示例跑一遍即可。

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