由于 WeUI 0.4.x 到 1.x 版本更新改動(dòng)較大，所以本文僅適用于 0.4.x 版本，適用于 1.x 版本的入門指南請(qǐng)查看 WeUI 1.0 簡(jiǎn)明入門指南。
之前做智慧校園的時(shí)候想找一個(gè)開源的移動(dòng)端 UI 框架，找了好多個(gè)，比如淘寶的 SUI Mobile、QQ 的 FrozenUI 等，基本都沒有滿意的，這些框架要么過于龐雜，要么太像 iOS！最后無意間發(fā)現(xiàn)了 WeUI 這個(gè)框架，一眼就愛上了！ 加了 WeUI 官方 QQ 群后發(fā)現(xiàn)好多童鞋都不知道怎么用，那我就寫個(gè)簡(jiǎn)明的入門教程吧！
WeUI 是什么
WeUI 是微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身打造的一個(gè) UI 樣式庫(kù)，你可以把它理解為一個(gè)前端框架，類似于 Bootstrap 的那種。 由于是微信官方出品，所以對(duì)微信的兼容性基本沒有太大問題，而且各組件的樣式和微信一樣，能夠和微信很好的融合在一起，給用戶較好的體驗(yàn)。
如何使用
- 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 是一個(gè)樣式庫(kù)，核心文件就是 weui.css，如果用于生產(chǎn)環(huán)境，建議使用官方提供的 CDN 或下載官方最新的 Releases 引入即可，CDN 地址可以在官方 Wiki 中找到，生產(chǎn)環(huán)境建議使用壓縮后的 weui.min.css 。 來個(gè)簡(jiǎn)單的范例：
<!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" >
</head>
<body ontouchstart>
<!-- 使用 WeUI -->
<a href="" class="weui_btn weui_btn_primary">綠色按鈕</a>
</body>
</html>
注意：
- viewport 那個(gè) meta 標(biāo)簽不要忘了加
- body 標(biāo)簽內(nèi)有個(gè) ontouchstart 屬性也不要忘了
這樣就搞定了，你可以任意使用各種組件了，關(guān)于組件怎么使用，去看官方 Wiki 就好了，或者 F12 去扒官方 Demo 把他們的代碼復(fù)制過來就行了，就是這么簡(jiǎn)單粗暴！
組件
WeUI 的組件目前不是很多，但是也基本能滿足大部分需求了。 官方 Demo 里面使用了前端路由，但這并不是 WeUI 的一部分，并且 Demo 內(nèi)也寫了一些自定義的 CSS 樣式，也不是 WeUI 的一部分，所以我們使用的時(shí)候只有組件的樣式可以直接復(fù)制來，其他的比如路由、邏輯操作、圖片上傳等都需要自己來搞定！ 下面來幾個(gè)組件的 Demo 方便需要的童鞋直接復(fù)制：
九宮格
九宮格就是官方 Demo 首頁(yè)那個(gè)樣式，九宮格不一定非要是九個(gè)，幾個(gè)都可以的，看自己的需求了！
<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 是整個(gè)九宮格組件的樣式，weui_grid 是一個(gè)一個(gè)宮格，我這里只寫了兩個(gè)，你需要幾個(gè)就寫幾遍，weui_grid_icon 是一個(gè)宮格的圖標(biāo)，weui_grid_label 就是圖標(biāo)下面那個(gè)字咯！ 圖標(biāo)最好使用矢量圖，以保證在不同設(shè)備上的清晰度，圖片的尺寸不需要自己寫上，WeUI 已經(jīng)幫你搞定了！
Tabbar
Tabbar 是位于頁(yè)面底部的導(dǎo)航，相當(dāng)于 App 的Dock 欄，通過點(diǎn)擊每個(gè)按鈕切換頁(yè)面的主體內(nèi)容。
<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 內(nèi)，weui_tab_bd 為 Tab 頁(yè)面的主體內(nèi)容，weui_tabbar_item 為 Tabbar 的一個(gè)一個(gè)的按鈕，建議為 3~5 個(gè)，weui_tabbar_icon 為每個(gè)按鈕的圖標(biāo)，weui_tabbar_label 為圖標(biāo)下面的字，Active 狀態(tài)可以使用 weui_bar_item_on 樣式。 注意，你這樣寫完后會(huì)發(fā)現(xiàn) Tabbar 位于頁(yè)面最頂端，這是因?yàn)?WeUI 沒有定義 html, body 的高度，所以給其定義個(gè) height: 100%; 就可以了！
html,body{height: 100%;}
表單
這個(gè)就不寫代碼了，去復(fù)制 Demo 或 Wiki 里面的代碼就好了，不過有一點(diǎn)要注意：你會(huì)發(fā)現(xiàn)表單內(nèi)可以輸入日期、時(shí)間和數(shù)字等，但這并不是 WeUI 的組件，而是使用 HTML 5 的 input 屬性，然后調(diào)用的瀏覽器自身的控件來輸入日期、時(shí)間等的。 日期：
<input type="date" class="weui_input">
時(shí)間：
<input type="datetime-local" class="weui_input">
數(shù)字：
<input type="number" class="weui_input">
更多 HTML 5 Input 類型請(qǐng)參考：HTML5 Input 類型
