← 返回项目库

WeUI 微信移动 Web 组件库

微信官方设计团队打造的移动 Web 基础样式库，提供中文组件演示与可直接构建的完整源码。

WeUI 是一套与微信原生视觉体验一致的移动 Web 基础样式库，由微信官方设计团队为微信网页和小程序场景设计。项目包含按钮、表单、列表、对话框、搜索栏、导航、提示、上传、进度和图标等丰富组件，并提供完整中文交互演示，适合学习微信风格界面规范、快速制作移动网页原型和开展前端组件二次开发。

真实界面

项目截图

共 6 张

WeUI 中文组件导航首页
按钮组件与布局样式
表单组件与交互类型
列表组件与滑动操作
对话框组件样式
搜索栏组件样式

Capabilities

核心功能

✓按钮、表单、列表和滑块等输入组件
✓对话框、Toast、ActionSheet 和消息反馈组件
✓搜索栏、导航栏、标签栏和侧边栏组件
✓文章、面板、宫格、图标和徽章展示组件
✓上传、进度、加载和步骤状态组件
✓完整中文组件导航与独立演示页面
✓适配移动网页和微信视觉规范
✓可生成压缩与未压缩 CSS 静态产物

适用场景

快速搭建微信风格移动 Web 原型
学习移动端组件设计和无障碍标记
为社群课程演示前端样式库工程化构建
二次开发活动页、服务页或小程序 Web 容器界面

适合谁

移动 Web 开发者、微信生态开发者、UI 设计师、产品经理和前端学习社群。

商业化思路

用于社群学习、研究和技术验证微信风格移动界面、组件规范及前端工程化构建。

你会拿到什么

  • ✓固定版本完整源码包与可复现 npm 锁文件
  • ✓六张真实运行组件界面截图
  • ✓MIT 及第三方依赖许可证完整声明
  • ✓中文项目说明、构建与验收记录

部署流程

  1. 1安装 Node.js 18 或更高版本并进入项目目录。
  2. 2执行 npm ci 安装锁定的构建依赖。
  3. 3执行 npm run build 生成 dist 静态产物。
  4. 4将 dist 部署到静态服务器，并访问 /example/ 查看组件演示。

真实验证结果

上游旧 package-lock 版本落后于 package.json 且包含失效的内部镜像地址，已依据当前 package.json 重新生成 npm lockfile；随后 npm ci 与 npm run build 均通过。生产运行依赖为空，npm audit --omit=dev --audit-level=high 报告 0 个漏洞；旧 Gulp 构建工具链的开发依赖告警作为披露信息，不影响静态交付物运行。首页、按钮、表单、列表、对话框和搜索栏六类真实界面均通过可见文字断言，控制台错误、坏图、404、登录页、横向溢出和重复截图均为 0。

部署前须知

项目是前端基础样式库和组件演示，不包含后端业务、数据库或账号系统；构建工具链包含历史开发依赖告警，生产静态产物不加载这些开发依赖。

部署难度

简单

最低配置

Node.js 18+、npm 9+；构建产物可部署到任意静态 Web 服务器。

开源许可证

MIT License（含第三方依赖许可声明）

最后验证

2026-08-21

技术栈

WeUI 2.6.25LessGulp 4ZeptoHTML5

授权说明

上游 WeUI 源码采用 MIT License，LICENSE.txt 同时列明构建依赖涉及的 ISC、Apache-2.0、BSD 等许可；源码包原样保留完整声明，收录用途为社群学习、研究和技术验证。

Release notes

版本记录

1 个已发布版本

v2.6.25-cn.1 当前推荐

首个社群学习收录版本；修复不可用的旧 npm 锁文件，补充演示页 favicon，并完成六类中文组件页面的真实运行验收。

部署要求：Node.js 18+、npm 9+；现代桌面或移动浏览器。

已知问题：构建工具链存在开发依赖历史告警；生产运行依赖为空，静态产物生产依赖审计为 0 个漏洞。

登录后领取