WeUI 简明入门指南

之前做智慧校园的时候想找一个开源的移动端 UI 框架,找了好多个,比如淘宝的 SUI Mobile、QQ 的 FrozenUI 等,基本都没有满意的,这些框架要么过于庞杂,要么太像 iOS!最后无意间发现了 WeUI 这个框架,一眼就爱上了!

由于 WeUI 0.4.x 到 1.x 版本更新改动较大,所以本文仅适用于 0.4.x 版本,适用于 1.x 版本的入门指南请查看 WeUI 1.0 简明入门指南

加了 WeUI 官方 QQ 群后发现好多童鞋都不知道怎么用,那我就写个简明的入门教程吧!

WeUI 是什么

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库,你可以把它理解为一个前端框架,类似于 Bootstrap 的那种。

由于是微信官方出品,所以对微信的兼容性基本没有太大问题,而且各组件的样式和微信一样,能够和微信很好的融合在一起,给用户较好的体验。

如何使用

WeUI 是一个样式库,核心文件就是 weui.css,如果用于生产环境,建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可,CDN 地址可以在官方 Wiki 中找到,生产环境建议使用压缩后的 weui.min.css

来个简单的范例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
</head>
<body ontouchstart>
<!-- 使用 WeUI -->
<a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
</body>
</html>

注意:

  • viewport 那个 meta 标签不要忘了加
  • body 标签内有个 ontouchstart 属性也不要忘了

这样就搞定了,你可以任意使用各种组件了,关于组件怎么使用,去看官方 Wiki 就好了,或者 F12 去扒官方 Demo 把他们的代码复制过来就行了,就是这么简单粗暴!

组件

WeUI 的组件目前不是很多,但是也基本能满足大部分需求了。

官方 Demo 里面使用了前端路由,但这并不是 WeUI 的一部分,并且 Demo 内也写了一些自定义的 CSS 样式,也不是 WeUI 的一部分,所以我们使用的时候只有组件的样式可以直接复制来,其他的比如路由、逻辑操作、图片上传等都需要自己来搞定!

下面来几个组件的 Demo 方便需要的童鞋直接复制:

九宫格

九宫格就是官方 Demo 首页那个样式,九宫格不一定非要是九个,几个都可以的,看自己的需求了!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="weui_grids">
<a href="" class="weui_grid">
<div class="weui_grid_icon">
<img src="" alt="">
</div>
<p class="weui_grid_label"></p>
</a>
<a href="" class="weui_grid">
<div class="weui_grid_icon">
<img src="" alt="">
</div>
<p class="weui_grid_label"></p>
</a>
</div>

weui_grids 是整个九宫格组件的样式,weui_grid 是一个一个宫格,我这里只写了两个,你需要几个就写几遍,weui_grid_icon 是一个宫格的图标,weui_grid_label 就是图标下面那个字咯!

图标最好使用矢量图,以保证在不同设备上的清晰度,图片的尺寸不需要自己写上,WeUI 已经帮你搞定了!

Tabbar

Tabbar 是位于页面底部的导航,相当于 App 的Dock 栏,通过点击每个按钮切换页面的主体内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="weui_tab">
<div class="weui_tab_bd"></div>
<div class="weui_tabbar">
<a href="" class="weui_tabbar_item weui_bar_item_on">
<div class="weui_tabbar_icon">
<img src="" alt="">
</div>
<p class="weui_tabbar_label">1</p>
</a>
<a href="" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="" alt="">
</div>
<p class="weui_tabbar_label">2</p>
</a>
<a href="" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="" alt="">
</div>
<p class="weui_tabbar_label">3</p>
</a>
<a href="" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="" alt="">
</div>
<p class="weui_tabbar_label">4</p>
</a>
</div>
</div>

Tabbar 的 class 为weui_tabbar, 一般嵌套在 weui_tab 内,weui_tab_bd 为 Tab 页面的主体内容,weui_tabbar_item 为 Tabbar 的一个一个的按钮,建议为 3~5 个,weui_tabbar_icon 为每个按钮的图标,weui_tabbar_label 为图标下面的字,Active 状态可以使用 weui_bar_item_on 样式。

注意,你这样写完后会发现 Tabbar 位于页面最顶端,这是因为 WeUI 没有定义 html, body 的高度,所以给其定义个 height: 100%; 就可以了!

1
html,body{height: 100%;}

表单

这个就不写代码了,去复制 Demo 或 Wiki 里面的代码就好了,不过有一点要注意:你会发现表单内可以输入日期、时间和数字等,但这并不是 WeUI 的组件,而是使用 HTML 5 的 input 属性,然后调用的浏览器自身的控件来输入日期、时间等的。

日期:

1
<input type="date" class="weui_input">

时间:

1
<input type="datetime-local" class="weui_input">

数字:

1
<input type="number" class="weui_input">

更多 HTML 5 Input 类型请参考:HTML5 Input 类型