WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、进度条progress、提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。

一、项目地址

https://github.com/weui/weui-wxss/

二、如何使用

1、下载程序代码，解压后可以看到如下目录：

2、我们只需要将weui-wxss-masterdiststyleweui.wxss文件导入到小程序项目的根目录下：

1.

3、新建微信小程序项目，将weui.wxss文件导入到小程序项目的根目录下：

4、在项目中引用：在app.wxss中加入weui.wxss的引用-@import‘weui.wxss’;

5、使用示例如下：

2.

三、使用WeUI样式说明：

3.

1、根组件使用class"page"：

2、页面骨架组件使用class"page__xxx"(注意是两个下划线)

3、其他组件都已weui-开头后接组件名称，例如class"weui-footer"

4.

4、组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。

5.

四、WeUI标签预览（具体应以WeUI样式标签为准）：

红色表示出现次数比较多的标签

6.

1、表单：

Button：

weui-btn：按钮

weui-btnmini-btn：小按钮

list：

weui-cells__title：列表组件标题

weui-cell__bd：标题文字

weui-cell__ft：说明文字

Input：

weui-cells__title：列表组件标题

weui-check：单选

weui-icon-radio：单选图标

weui-cell__bd：标题文字说明

weui-label：列表

weui-input：输入

weui-vcode-btn：获取验证码按钮

weui-vcode-img：验证码图片

weui-textarea：请输入文本

weui-select：选择

Slider：滑动（参考小程序文档）

Uploader：

weui-uploader：上传

weui-uploader__title：图片上传

weui-uploader__info：上传个数

weui-uploader__file：上传文件

weui-uploader__img：上传图片

7.

2、基础组件

Article：

weui-article：文章标签

weui-article__h1：标题

weui-article__title：章标题

weui-article__section：文章区域

weui-article__h3：节标题

weui-article__p：文字

weui-article__img：图片

Badge：徽章

weui-cells__title：列表组件标题

weui-cell__bd：组件列表行

weui-badge：徽章

Flex：布局

weui-flex：布局区域

weui-flex__item：布局选项

Footer：页脚

weui-footer：页脚名称

weui-footer__text：页脚内容

weui-footer__links：页脚链接

Gallery：画廊（参考小程序文档）

Grid：九宫格

weui-grids：九宫格区域

weui-grid__icon：九宫格图标

weui-grid__label：九宫格列表

Icons：图标

icon-box：图表区域

icon-box__title：图标标题

icon-box__desc：图标说明

Loadmore：加载更多

weui-loading：加载更多标签

weui-loadmore__tips：正在加载

Panel：面板

weui-panel__hd：面板页头

weui-panel__bd：面板主体

weui-media-box__title：面板标题

weui-media-box__desc：面板说明

weui-media-box__info__meta：面板底部文字说明

Preview：表单预览

weui-form-preview：表单预览区域

weui-form-preview__hd：表单预览页头

weui-form-preview__bd：表单预览主体

weui-form-preview__item：表单预览列表区域

weui-form-preview__label：表单预览列表标题

weui-form-preview__value_in-hd：表单预览页头内容

weui-form-preview__value：表单预览列表内容

Progress：进度条

weui-progress：进度条标签

weui-progress__bar：进度条

weui-progress__opr：进度条图标

8.

3、操作反馈

ActionSheet：弹出式菜单

weui-btn-area：按钮标签区域

Dialog：对话框

weui-btn-area：按钮标签区域

weui-btn：按钮

Msg：提示页

weui-btn-area：按钮标签区域

weui-btn：按钮

weui-msg__icon-area：提示图标

weui-msg__text-area：提示区域

weui-msg__title：提示标题

weui-msg__desc：提示说明

weui-msg__opr-area：提示后操作区域

weui-msg__extra-area：额外区域

Picker：选择器

weui-btn-area：按钮区域

Toast：弹出式提示

weui-btn-area：按钮标签区域

weui-btn：按钮

9.

4、导航相关：

Navbar：头部导航

weui-navbar：导航标签

weui-navbar__title：导航标题

weui-navbar__slider：导航滑块

weui-tab__panel：导航面板

weui-tab__content：导航内容

Tabbar：底部导航（参考小程序文档）

10.

5、搜索相关

Searchbar：搜索栏

weui-search-bar：搜索栏区域

weui-search-bar__form：搜索栏表单

weui-search-bar__label：搜索栏列表

weui-icon-search：搜索栏图标

weui-search-bar__text：搜索栏文字

weui-cell__bd：搜索栏文本