微信列表生成器｜一键生成逼真的微信聊天列表长截图（在线体验 + 开源）

为什么做这个工具

公司老是让转发公众号文章给 36 个好友？与其尴尬群发，不如优雅演示。基于这个真实痛点，我做了一个微信聊天列表生成器：在线即可生成高度还原的微信聊天列表截图，适用于演示、教学、UI 原型与数据可视化，避免打扰真实用户。

一句话定位

为产品经理、设计师、讲师与运营团队提供的「微信聊天列表素材生成器」，主打高还原、可批量、可一键长截图。

核心亮点

• 逼真还原：完整还原微信 iOS 客户端列表界面，状态栏显示实时时间
• 多样头像：混合彩色、黑白灰度、模糊效果，随时切换
• 自定义生成：自由设置聊天数量（1-50 条）、统一消息内容，支持 链接、图片 占位
• 随机更真实：随机生成中文姓名与聊天时间，每 9 条共享相同时间，贴合“最多选 9 位好友分享”的真实场景
• 信号强度可调：Wi-Fi 弱/中/强随需展示
• 截图模式：一键进入纯净模式，背景暗化、居中展示，外部工具随手截
• 长截图一键导出：自动展开列表、等待头像加载、高清 PNG 自动下载，支持高分屏（自适配 devicePixelRatio）

在线体验与开源地址

• 在线演示：https://wechat.ronger.io
• GitHub 仓库：https://github.com/ronger-x/wechat-react

适用场景

• 数据可视化与报告配图
• 课堂讲解、培训教材
• UI/UX 原型/竞品还原
• 活动流程演示、创新提案、玩法说明

上手使用（3 步走）

1. 配置内容：在左侧面板输入统一消息内容；支持 链接、图片 占位符
2. 设定样式：选择头像风格、Wi-Fi 强度、生成条数
3. 导出图片：
   • 截图模式：点击“进入截图模式”，外部工具截图；点击任意处退出
   • 长截图：点击“生成长截图”，自动导出高清 PNG

本地与部署

• 本地开发：pnpm install → pnpm dev → 访问 http://localhost:5173
• 生产构建：pnpm build；本地预览：pnpm preview
• Docker Compose（推荐）：docker compose up -d → 访问 http://localhost:3000
• Dockerfile：docker build -t wechat-react .；docker run -d -p 3000:80 --name wechat-react wechat-react

实现细节与质量保证

• 随机姓名：常见中文姓氏 + 名字库，2-3 字组合，更贴近真实
• 智能时间分组：每 9 条共享时间戳，符合一次可选 9 位好友的真实行为
• 长截图质量：
  • 基于 html-to-image 将 DOM 转为高清 PNG
  • 自动移除圆角/阴影等干扰元素，生成后恢复
  • 适配高分屏，默认高画质（可在代码中调整）
• 头像来源：Picsum Photos 随机图片，支持灰度与模糊效果

技术栈

• React 19、Vite、Tailwind CSS 3、JavaScript (ES6+)
• html-to-image（长截图）
• Docker + Nginx（生产部署）

项目结构（要点）

• components：ChatList、ConfigPanel、PhoneSimulator、StatusBar、TabBar
• utils：generator（生成逻辑）、screenshot（长截图）、constants（样式常量）
• 一键容器化：Dockerfile、compose.yaml

使用建议

• 生成 20-50 条效果更佳
• 首次长截图建议等待头像全部加载
• 导出的 PNG 文件大小与条数相关，一般 100KB-2MB

许可证与共创

• 开源协议：MIT
• 欢迎 Star、Issue、PR，一起完善更多细节（如更多头像源、批量文案模板、导出 PDF 等）

合规与声明

本工具仅用于演示、教学、设计与研究等正当用途，请勿用于虚假宣传、仿冒、欺诈或误导性信息制作。在对外发布前，请明确标注“演示/示例/效果图”。

如果你也被“36 个好友转发截图”困扰，欢迎试用这款小工具，优雅演示，从容交付。在线体验地址：https://wechat.ronger.io