一介布衣

🧭 快速导航

WxParse HTML 解析与渲染 ​

项目地址：https://github.com/icindy/wxParse（注意：长期未更新，建议谨慎使用）
关联清单：https://github.com/justjavac/awesome-wechat-weapp

WxParse 是较早实现 HTML 渲染的小程序库，方案成熟但维护度较低。对新项目更推荐 Towxml 或官方 <rich-text> 能力；本篇面向存量项目与历史兼容。

🎯 文章目标 ​

  • 在项目中接入 WxParse
  • 渲染基本 HTML 内容
  • 处理图片、表格与长文性能

📦 引入方式 ​

  • 方式一：拷贝源码至项目（按 README 结构）
  • 方式二：通过 npm 引入后构建（依版本而定）

页面使用（示例）：

js
// pages/article/index.js
import WxParse from '../../libs/wxParse/wxParse.js'

Page({
  data: {},
  onLoad() {
    const html = '<h1>标题</h1><p>这是一段<b>HTML</b>内容。</p>'
    WxParse.wxParse('article', 'html', html, this, 5)
  }
})
xml
<!-- pages/article/index.wxml -->
<import src="../../libs/wxParse/wxParse.wxml"/>
<template is="wxParse" data="\{\{wxParseData:article.nodes\}\}"/>

🎨 样式适配 ​

  • 复制项目中的 wxParse.wxss 并按需覆盖
  • 为 img/table 等元素提供 max-width、边距与滚动方案，避免溢出
  • 调整字体与行高以提升可读性

🏗️ 工程实践 ​

  • 长文分页：对超长内容分段渲染，减少 setData 压力
  • 图片懒加载：可结合懒加载组件或占位图策略
  • 安全性：对 HTML 源做清洗，移除不安全标签与事件

🧪 常见问题 ​

  • 路径错误：确认 import 与资源路径
  • 编码/特殊字符：必要时做转义
  • 兼容性：技术债较多时，评估迁移 Towxml 的收益

✅ 适用场景 ​

  • 历史项目兼容与维护
  • 简单 HTML 片段渲染

🔗 参考 ​

📊 总结 ​

WxParse 作为历史方案仍有存量项目依赖。建议中长期考虑迁移到 Towxml 或官方能力，以降低维护与兼容风险。