WeUI · 微信设计团队官方出品的微信风格 UI 框架｜为微信 Web 服务量身设计的部署与使用全指南
项目仓库： https://github.com/Tencent/weui
开源协议：MIT · 出品：微信设计团队 · 定位：为微信 Web 开发量身设计的 UI 框架 · 组件：button / cell / dialog / progress / toast / article / actionsheet / icon · 在线 Demo：weui.io
1 项目简介
WeUI 是由微信设计团队官方设计的微信风格 UI 框架，为微信 Web 开发量身打造，用于提升并标准化微信用户的使用体验。包含 button、cell、dialog、progress、toast、article、actionsheet、icon 等组件。
1.1 核心信息一览
| 项目项 | 内容 |
|---|---|
| 项目名称 | WeUI |
| 仓库地址 | github.com/Tencent/weui |
| 项目定位 | 微信官方设计的 Web UI 框架 |
| 出品方 | 微信设计团队 |
| 开源协议 | MIT |
| 在线 Demo | weui.io |
| 文档 Wiki | github.com/Tencent/weui/wiki |
1.2 适用场景
- 在微信内打开的 Web 页面（公众号、H5 活动页）保持与微信原生一致的视觉体验。
- 小程序场景另有 weui-wxss 版本。
1.3 能力边界（官方口径）
- 这是 Web 版 WeUI；小程序版见 weui-wxss，企业微信版见官方文档，另有 weui.js、react-weui。
2 功能特性
- 微信原生风格：与微信客户端视觉一致。
- 组件齐全：button / cell / dialog / progress / toast / article / actionsheet / icon。
- 官方设计：微信设计团队出品。
3 官方界面预览
开头封面为 WeUI 官方移动端 Demo 截图（weui.io）。
4 官方跳转链接汇总
| 类别 | 链接 | 说明 |
|---|---|---|
| 仓库主页 | https://github.com/Tencent/weui | 源码 |
| 在线 Demo | https://weui.io | 在线预览 |
| Wiki 文档 | github.com/Tencent/weui/wiki | 使用文档 |
| 设计参考 | github.com/weui/weui-design | 设计稿 |
| 小程序版 | github.com/Tencent/weui-wxss | 小程序版 |
| weui.js | github.com/weui/weui.js | JS 组件 |
5 前置要求与服务器配置
5.1 软件前提
- 普通 Web 项目；引入 WeUI 的 CSS 即可。
5.2 硬件建议
- 无服务器运行时；纯前端 CSS 框架。
5.3 端口与资源
- 无。
6 方式一：npm 安装
npm install weui7 方式二：CDN / 直接引入 CSS
在页面引入 weui.css，按官方 Wiki 使用各组件 class。
8 配置项说明
- 通过 class 名组合使用组件，无需配置。
9 常用运维命令
- 升级：
npm update weui。
10 常见故障排查
- 查官方 Wiki。
11 风险与合规说明
- 许可证：MIT。
- 本文整理自官方 README，组件以 Wiki 最新说明为准；不包含 star 数等动态数据。