在小程序开发中，为做出比较好的效果，通常我们会用一些已经开发好的CSS库，WeUI是其中比较常用的。WeUI 是由微信官方设计团队为微信内网页和微信小程序量身设计的一套同微信原生视觉体验一致的基础样式库，目标是令用户的使用感知更加统一。 本文就是记录如何在小程序开发中使用该样式库。
下载并配置 WeUI-WXSS
到官网, 选择”Download ZIP”,
解压以后将 dist/style 目录下的 weui.wxss 文件拷贝到小程序项目目录 sytle 中。如果是小程序云开发，要拷贝到 miniprogram/style 目录中。
然后在小程序的 app.wxss 文件顶端加入 import 指令，应用 weui.wxss。
1 | @import 'style/weui.wxss' |
这样就引入了所有 WeUI 中的组件。
使用 WeUI-WXSS
WeUI-WXSS 中的组件都包含 “weui” 前缀，比如 button, 在WeUI中就叫 weui-button, 注意：WeUI只是CSS样式，不是完全意义上的小程序的组件，因此，我们在使用的时候时间实际上实在原有小程序组件中加上 css 的类，如：加入一个微信分格的按钮在页面上，可以这样写
1 | <button class="weui-btn" type="primary" >Hello</button> |
当前 WeUI-WXSS 的版本主要包含以下一些组件样式：
- weui-agree
- weui-animate
- weui-button
- weui-cell
- weui-flex
- weui-footer
- weui-grid
- weui-loading
- weui-media-box
- weui-page
- weui-panel
- weui-progress
- weui-searchbar
- weui-tab
- weui-tips