├── README.md ├── components ├── article.md ├── badge.md ├── button.md ├── flex.md ├── footer.md ├── form.md ├── gallery.md ├── grid.md ├── icon.md ├── list.md ├── loadmore.md ├── panel.md ├── preview.md ├── progress.md ├── slider.md └── uploader.md ├── faq └── README.md ├── getting-started └── README.md └── images ├── badge-1.jpg ├── button-1.jpg ├── button-2.jpg ├── button-3.jpg ├── button-4.jpg ├── flex-1.jpg ├── footer-1.jpg ├── footer-2.jpg ├── footer-3.jpg ├── form-1.jpg ├── form-10.jpg ├── form-11.jpg ├── form-2.jpg ├── form-3.jpg ├── form-4.jpg ├── form-5.jpg ├── form-6.jpg ├── form-7.jpg ├── form-8.jpg ├── form-9.jpg ├── gallery-1.jpg ├── grid-1.jpg ├── icon-1.jpg ├── icon-10.jpg ├── icon-11.jpg ├── icon-2.jpg ├── icon-3.jpg ├── icon-4.jpg ├── icon-5.jpg ├── icon-6.jpg ├── icon-7.jpg ├── icon-8.jpg ├── icon-9.jpg ├── list-1.jpg ├── loadmore-1.jpg ├── loadmore-2.jpg ├── loadmore-3.jpg ├── panel-1.jpg ├── panel-2.jpg ├── panel-3.jpg ├── panel-4.jpg ├── preview-1.jpg ├── progress-1.jpg ├── slider-1.jpg └── uploader-1.jpg /README.md: -------------------------------------------------------------------------------- 1 | ## WeUI 简明入门指南 2 | 3 | WeUI 是由微信官方设计团队为微信内网页和微信小程序开发的基础样式库，目的是为了微信内网页和微信小程序的用户视觉和交互体验与微信保持一致。 4 | 5 | 之前写过一篇 WeUI 入门指南，但是仅适用于 0.4.x 版本。前段时间 WeUI 发布了 1.0 版本，代码改动较大，所以重写入门指南。 6 | 7 | > 此入门指南非微信官方文档！ 8 | 9 | 喜欢或对您有帮助请 star，帮助完善文档请 pull request。:blush: 10 | 11 | ### 目录 12 | 13 | * [快速上手](getting-started/README.md) 14 | - [1.0 改动](getting-started/README.md#10-改动) 15 | - [相关链接](getting-started/README.md#相关链接) 16 | - [下载](getting-started/README.md#下载) 17 | - [基本模板](getting-started/README.md#基本模板) 18 | * 组件 19 | - 表单 20 | + [按钮](components/button.md) 21 | + [表单](components/form.md) 22 | + [列表](components/list.md) 23 | + [滑块](components/slider.md) 24 | + [上传组件](components/uploader.md) 25 | - 基础组件 26 | + [文章](components/article.md) 27 | + [Flex 布局](components/flex.md) 28 | + [页脚](components/footer.md) 29 | + [相册](components/gallery.md) 30 | + [九宫格](components/grid.md) 31 | + [图标](components/icon.md) 32 | + [加载更多](components/loadmore.md) 33 | + [面板](components/panel.md) 34 | + [表单预览](components/preview.md) 35 | + [进度条](components/progress.md) 36 | + [徽章](components/badge.md) 37 | * [常见问题](faq/README.md) -------------------------------------------------------------------------------- /components/article.md: -------------------------------------------------------------------------------- 1 | ## 文章 2 | 3 | 文章是用于页面内大段文字或一篇文章的样式，只需要在一个 `article` 标签上加上 `weui-article` 样式类即可。 4 | 5 | ```html 6 | 7 |

8 |

大标题

9 |

章标题

10 |

11 |

节标题

12 |

段落

13 |

14 |

15 | ``` 16 | 17 | 每个章节都可以放在一个 `section` 标签内以便增加章节之间的区分度，因为 `weui-article` 内的 `section` 会有一个 1.5em 的下边距。 18 | -------------------------------------------------------------------------------- /components/badge.md: -------------------------------------------------------------------------------- 1 | ## 徽章 2 | 3 | 徽章可用于新消息提示，样式为小红点或小红点内包含文字。 4 | 5 | ### 小红点 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | ### 带文字 12 | 13 | ```html 14 | New 15 | ``` 16 | 17 | 注意，徽章的位置和边距需要自己写 CSS 进行控制。 18 | 19 | ![](../images/badge-1.jpg) -------------------------------------------------------------------------------- /components/button.md: -------------------------------------------------------------------------------- 1 | ## 按钮 2 | 3 | 按钮样式可以用于 `a` 或 `button` 标签。 4 | 5 | 按钮常用的样式有 `weui-btn_default`、`weui-btn_primary` 和 `weui-btn_warn` 三种，分别是白色、绿色和红色，还有一种镂空的样式 `weui-btn_plain-xxx`，其中 `xxx` 可以是 `default` 或 `primary`。上述每种按钮都有置灰的禁用状态 `weui-btn_disabled`。 6 | 7 | 使用上述任意一种样式时都不要忘了加上 `weui-btn` 类。 8 | 9 | ```html 10 | 11 | 按钮 12 | 13 | 按钮 14 | 15 | 按钮 16 | 17 | 按钮 18 | 19 | 按钮 20 | 21 | 按钮 22 | 23 | 按钮 24 | 25 | 按钮 26 | 27 | 按钮 28 | 29 | 按钮 30 | ``` 31 | 32 | ![](../images/button-1.jpg) 33 | 34 | ![](../images/button-2.jpg) 35 | 36 | ![](../images/button-3.jpg) 37 | 38 | 按钮默认是 100% 的宽度，所以在页面上左右两侧是没有空隙的，如果想要两侧留有空隙，在按钮的父级元素添加 `weui-btn-area` 类即可。 39 | 40 | ```html 41 | 42 |

43 | 按钮 44 |

45 | ``` 46 | 47 | 除以上这些按钮样式，还有一种小尺寸的按钮，宽度为自适应，在上面的任意样式按钮添加 `weui-btn_mini` 类即可。 48 | 49 | ```html 50 | 51 | mini 按钮 52 | ``` 53 | 54 | ![](../images/button-4.jpg) -------------------------------------------------------------------------------- /components/flex.md: -------------------------------------------------------------------------------- 1 | ## Flex 布局 2 | 3 | Flex 布局是一种简便的、响应式的页面布局方式，可以用较简单的代码来实现较复杂的布局，并且目前大多数浏览器都已支持 Flex 布局。更多相关知识点请自行搜索学习。 4 | 5 | WeUI 提供了一种类似于栅格化的 Flex 布局方式，用法也比较简单。 6 | 7 | 其中 `weui-flex` 为一个 Flex 容器，`weui-flex__item` 为 Flex 容器内的项目，每个项目默认占满容器内可用的宽度。如果一个容器内有一个项目，则这一个项目占满所有宽度；如果一个容器内有两个项目，则两个项目平分所有的宽度；如果一个容器内有三个项目，则三个项目三等分所有的宽度；以此类推。 8 | 9 | ```html 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 | ``` 23 | 24 | ![](../images/flex-1.jpg) -------------------------------------------------------------------------------- /components/footer.md: -------------------------------------------------------------------------------- 1 | ## 页脚 2 | 3 | 页脚主要用于在页面底部显示相关版权信息和相关链接等。 4 | 5 | WeUI 提供的页脚主要有三种样式。 6 | 7 | ### 样式一 8 | 9 | 只有一行文字，无链接。 10 | 11 | ```html 12 | 15 | ``` 16 | 17 | ![](../images/footer-1.jpg) 18 | 19 | ### 样式二 20 | 21 | 一行文字和一个链接。 22 | 23 | ```html 24 | 30 | ``` 31 | 32 | ![](../images/footer-2.jpg) 33 | 34 | ### 样式三 35 | 36 | 一行文字和多个链接，链接数建议不要过多，以免影响页面美观度。 37 | 38 | ```html 39 | 46 | ``` 47 | 48 | ![](../images/footer-3.jpg) 49 | 50 | 如果页面内容不足以撑起整个屏幕高度，又想让页脚在屏幕最底部，可以添加一个 `weui-footer_fixed-bottom` 样式类使页脚固定在屏幕底部。 51 | 52 | ```html 53 | 59 | ``` 60 | -------------------------------------------------------------------------------- /components/form.md: -------------------------------------------------------------------------------- 1 | ## 表单 2 | 3 | 和列表一样，每一组表单的样式类为 `weui-cells`，然后再添加相应类型的样式类，比如单选对应 `weui-cells_radio`，多选对应 `weui-cells_checkbox`，表单对应 `weui-cells_form` 等；列表内每一个条目的样式类为 `weui-cell`，再添加相应类型的样式类；一组表单内可有多个条目。 4 | 5 | 表单校验相关功能可使用 [weui.js（点击查看相关文档）](https://github.com/Tencent/weui.js/blob/master/docs/component/form.md) 6 | 7 | ### 单选 / radio 8 | 9 | ```html 10 | 11 |

12 | 13 |

14 |

单选项文字

15 |

16 |

17 | 18 | 19 |

20 | 21 | 22 |

23 |

单选项文字

24 |

25 |

26 | 27 | 28 |

29 | 30 | 31 |

添加更多

32 | 33 |

34 | ``` 35 | 36 | ![](../images/form-1.jpg) 37 | 38 | ### 多选 / checkbox 39 | 40 | ```html 41 | 42 |

43 | 44 |

45 | 46 | 47 |

48 |

49 |

多选项文字

50 |

51 | 52 | 53 |

54 | 55 | 56 |

57 |

58 |

多选项文字

59 |

60 | 61 | 62 |

添加更多

63 | 64 |

65 | ``` 66 | 67 | ![](../images/form-2.jpg) 68 | 69 | ### 输入框 / input 70 | 71 | 使用输入框，注意每一组表单除了 `weui-cells` 类，还需要 `weui-cells_form` 类。 72 | 73 | ```html 74 | 75 |

76 |

77 |

标题

78 |

79 | 80 |

81 |

82 |

83 | ``` 84 | 85 | 注意 input 的 type 属性值可以为 text、number、email、date、time 等，属性值为 date、time 时可用来输入日期或时间，WeUI 本身本没有日期选择器和时间选择器，更多关于 input 的 type 属性值可参考[这里](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)。 86 | 87 | ![](../images/form-3.jpg) 88 | 89 | ### 带按钮的输入框 / input 90 | 91 | 带按钮的输入框的使用场景可以为用户输入手机号获取验证码等。 92 | 93 | 注意不要忘记 `weui-cell_vcode` 类 94 | 95 | ```html 96 | 97 |

98 |

99 |

100 | 手机号 101 |

102 |

103 | 104 |

105 |

106 | 获取验证码 107 |

108 |

109 |

110 | ``` 111 | 112 | ![](../images/form-4.jpg) 113 | 114 | ### 带图片的输入框 / input 115 | 116 | 带图片的输入框的使用场景可以为验证码输入。 117 | 118 | ```html 119 | 120 |

121 |

122 |

123 | 验证码 124 |

125 |

126 | 127 |

128 |

129 | 130 |

131 |

132 |

133 | ``` 134 | 135 | ![](../images/form-5.jpg) 136 | 137 | ### 带选择的输入框 / input & select 138 | 139 | ```html 140 | 141 |

142 |

143 |

144 | 150 |

151 |

152 | 153 |

154 |

155 |

156 | ``` 157 | 158 | ![](../images/form-6.jpg) 159 | 160 | ### 警告样式的输入框 / input 161 | 162 | 警告样式用于表单验证错误时提醒用户，在出错的表单元素上添加 `weui-cell_warn` 类即可，此时字体会变为红色，输入框后也会出现警告样式图标。 163 | 164 | ```html 165 | 166 |

167 |

168 |

169 | 卡号 170 |

171 |

172 | 173 |

174 |

175 | 176 |

177 |

178 |

179 | ``` 180 | 181 | ![](../images/form-7.jpg) 182 | 183 | ### 文本框 / textarea 184 | 185 | 文本框用于输入篇幅较长的文本。 186 | 187 | ```html 188 |

189 |

190 |

191 | 192 |

0/200

193 |

194 |

195 |

196 | ``` 197 | 198 | 注意右下角的文字计数器功能需自行实现，WeUI 仅提供样式。 199 | 200 | ![](../images/form-8.jpg) 201 | 202 | ### 开关 / radio 203 | 204 | ```html 205 | 206 |

207 |

208 |

标题文字

209 |

210 | 211 |

212 |

213 |

214 | ``` 215 | 216 | ![](../images/form-9.jpg) 217 | 218 | ### 选择 / select 219 | 220 | 选择有带标题和不带标题两种样式。 221 | 222 | ```html 223 | 224 |

225 | 226 |

227 |

228 | 233 |

234 |

235 | 236 |

237 |

238 | 国家/地区 239 |

240 |

241 | 246 |

247 |

248 |

249 | ``` 250 | 251 | ![](../images/form-10.jpg) 252 | 253 | ### 底部文字和勾选框 / checkbox 254 | 255 | 使用场景为表单填写完成后用户同意服务条款的勾选框，其位于 `weui-cells` 之外，与列表中的底部说明文字 `weui-cells__tips` 位置相同。 256 | 257 | ```html 258 | 259 | 260 | 261 | 阅读并同意《相关条款》 262 | 263 | 264 | ``` 265 | 266 | 样式见上图 267 | 268 | ### 图片上传 269 | 270 | WeUI 仅提供样式，具体功能请根据自己的业务需求自行实现。 271 | 272 | ```html 273 | 274 |

275 |

276 |

277 |

278 |

279 | 280 |

图片上传

281 | 282 |

0/2

283 |

284 |

285 |

290 |
291 | 292 |
293 |
296 |
50%
297 |

299 | 300 |

301 | 302 |

303 |

304 |

305 |

306 |

307 |

308 | ``` 309 | 310 | ![](../images/form-11.jpg) -------------------------------------------------------------------------------- /components/gallery.md: -------------------------------------------------------------------------------- 1 | ## 相册 2 | 3 | Gallery 用于上传图片的预览或展示、幻灯片播放等。 4 | 5 | JS 相关部分可使用 [weui.js（点击查看相关文档）](https://github.com/Tencent/weui.js/blob/master/docs/component/gallery.md) 实现，主要配合图片上传使用。 6 | 7 | > 注意，`weui-gallery` 的 `display` 属性默认为 `none` 8 | 9 | ```html 10 | 11 |

12 | 13 | 14 | 15 |

16 | 17 | 18 | 19 |

20 |

21 | ``` 22 | 23 | ![](../images/gallery-1.jpg) -------------------------------------------------------------------------------- /components/grid.md: -------------------------------------------------------------------------------- 1 | ## 九宫格 2 | 3 | 九宫格是移动端常见的一种布局，常见的有微信钱包。 4 | 5 | 九宫格布局最外层是一个样式类为 `weui-grids`，然后每一个宫格均为 `weui-grid`。当然，九宫格不一定非要是九个，多少个都行，建议至少三个。 6 | 7 | ```html 8 | 9 |

10 | 11 | 12 | 13 |

14 | 15 |

16 | 17 |

标签文字

18 | 19 | 20 | 21 | 22 |

23 | 24 |

25 | 26 |

标签文字

27 | 28 |

29 | ``` 30 | 31 | ![](../images/grid-1.jpg) -------------------------------------------------------------------------------- /components/icon.md: -------------------------------------------------------------------------------- 1 | ## 图标 2 | 3 | WeUI 提供了几种常用的图标。 4 | 5 | 图标使用空的 `i` 标签加上相应的样式类即可，所有图标的默认大小为 23px，在 `i` 标签上追加 `weui-icon_msg` 类，大小变为 93px。 6 | 7 | 较大尺寸的图标可用于操作提示页面，图标居中显示。 8 | 9 | ### 成功 10 | 11 | 用于表示操作成功完成。 12 | 13 | ```html 14 |