WeUI WXSS：微信官方小程序样式库 weui-wxss 下载与使用指南
WeUI 是微信官方设计团队为微信内网页和微信小程序量身设计的基础样式库，与微信原生视觉体验一致。weui-wxss 是其纯样式版本，提供 button、cell、dialog、progress、toast、article、actionsheet、icon 等基础元素的 WXSS 样式。
一、项目官方信息
| 项目 | 信息 |
|---|---|
| GitHub 仓库 | https://github.com/weui/weui-wxss |
| 上游 WeUI | https://github.com/weui/weui |
| 小程序组件版 WeUI | https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ |
| 开源协议 | MIT |
| 主要语言 | Less（82%） |
| Star 数 | 15k+ |
| npm 包 | https://www.npmjs.com/package/weui-wxss |
二、官方图片
WeUI for 小程序组件预览：
WeUI 示例截图：
三、环境要求
- 微信开发者工具；
- 一个小程序工程；
- 若希望用逻辑封装版本，建议直接使用官方小程序组件库 WeUI（见跳转链接）。
四、部署/接入步骤
1. 下载或克隆仓库
git clone https://github.com/weui/weui-wxss.git
2. 引入样式文件
样式文件可直接在 app.wxss 或页面 WXSS 中引用：
@import 'dist/style/weui.wxss';
也可以单独引用 dist/style/widget 下某个组件的 wxss，按需加载。
3. 编写 WXML 结构
各组件的 WXML 结构可参考 dist/example/ 目录下的示例。
4. 预览示例
用微信开发者工具打开 dist 目录（注意：是 dist 目录，不是整个项目），即可预览全部组件。
五、使用方法
px 与 rpx 版本
- 默认版本使用
px； - 仓库另提供
rpx版本，位于dist-rpx-mode目录，按设备自适应。
暗色模式
在根节点增加属性 data-weui-theme="dark"：
<view data-weui-theme="dark">
...
</view>
包含组件
button、cell、dialog、progress、toast、article、actionsheet、icon 等各式基础元素，与微信原生视觉一致。
纯样式 vs 组件库
本仓库是纯 UI 样式库；如果想要带逻辑封装的组件版本，直接使用微信官方小程序组件库 WeUI（地址见跳转链接），不需要自己拼 WXML。
六、常见问题 FAQ
Q1：weui-wxss 是什么？ WeUI 的小程序纯样式版本，提供与微信原生一致的基础组件 WXSS 样式。
Q2：怎么引入？
在 WXSS 中 @import 'dist/style/weui.wxss'，或单独引用 dist/style/widget 下组件样式。
Q3：预览要打开哪个目录？
用开发者工具打开 dist 目录（不是整个仓库）。
Q4：有 rpx 版本吗？
有，dist-rpx-mode 目录下提供 rpx 自适应版本。
Q5：支持暗色模式吗？
支持，在根节点加 data-weui-theme="dark"。
Q6：想要带逻辑的组件怎么办？ 用官方小程序组件库 WeUI，而不是这个纯样式仓库。
七、跳转链接
- GitHub 仓库：https://github.com/weui/weui-wxss
- 上游 WeUI：https://github.com/weui/weui
- 小程序组件版 WeUI：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
- npm 包：https://www.npmjs.com/package/weui-wxss