由于 WeUI 0.4.x 到 1.x 版本更新改动较大，所以本文仅适用于 0.4.x 版本，适用于 1.x 版本的入门指南请查看 WeUI 1.0 简明入门指南。
之前做智慧校园的时候想找一个开源的移动端 UI 框架，找了好多个，比如淘宝的 SUI Mobile、QQ 的 FrozenUI 等，基本都没有满意的，这些框架要么过于庞杂，要么太像 iOS！最后无意间发现了 WeUI 这个框架，一眼就爱上了！ 加了 WeUI 官方 QQ 群后发现好多童鞋都不知道怎么用，那我就写个简明的入门教程吧！
WeUI 是什么
WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。
如何使用
- WeUI 官方 Github：https://github.com/weui/weui
- WeUI 官方 Demo：http://weui.github.io/weui
- WeUI 官方 Releases：https://github.com/weui/weui/releases
- WeUI 官方 Wiki：https://github.com/weui/weui/wiki
WeUI 是一个样式库，核心文件就是 weui.css，如果用于生产环境，建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可，CDN 地址可以在官方 Wiki 中找到，生产环境建议使用压缩后的 weui.min.css 。 来个简单的范例：
<!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 首页那个样式，九宫格不一定非要是九个，几个都可以的，看自己的需求了！
<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 栏，通过点击每个按钮切换页面的主体内容。
<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%; 就可以了！
html,body{height: 100%;}
表单
这个就不写代码了，去复制 Demo 或 Wiki 里面的代码就好了，不过有一点要注意：你会发现表单内可以输入日期、时间和数字等，但这并不是 WeUI 的组件，而是使用 HTML 5 的 input 属性，然后调用的浏览器自身的控件来输入日期、时间等的。 日期：
<input type="date" class="weui_input">
时间：
<input type="datetime-local" class="weui_input">
数字：
<input type="number" class="weui_input">
更多 HTML 5 Input 类型请参考：HTML5 Input 类型
网友评论