由于 WeUI 0.4.x 到 1.x 版本更新改動較大观蜗，所以本文僅適用于 0.4.x 版本央星，適用于 1.x 版本的入門指南請查看 WeUI 1.0 簡明入門指南雷袋。
之前做智慧校園的時候想找一個開源的移動端 UI 框架梆惯，找了好多個，比如淘寶的 SUI Mobile劫樟、QQ 的 FrozenUI 等痪枫，基本都沒有滿意的，這些框架要么過于龐雜毅哗，要么太像 iOS听怕！最后無意間發(fā)現(xiàn)了 WeUI 這個框架，一眼就愛上了虑绵！ 加了 WeUI 官方 QQ 群后發(fā)現(xiàn)好多童鞋都不知道怎么用，那我就寫個簡明的入門教程吧闽烙！
WeUI 是什么
WeUI 是微信官方設(shè)計團(tuán)隊為微信 Web 開發(fā)量身打造的一個 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法挨，如果用于生產(chǎn)環(huán)境，建議使用官方提供的 CDN 或下載官方最新的 Releases 引入即可幅聘，CDN 地址可以在官方 Wiki 中找到凡纳，生產(chǎn)環(huán)境建議使用壓縮后的 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" >
</head>
<body ontouchstart>
<!-- 使用 WeUI -->
<a href="" class="weui_btn weui_btn_primary">綠色按鈕</a>
</body>
</html>
注意：
- viewport 那個 meta 標(biāo)簽不要忘了加
- body 標(biāo)簽內(nèi)有個 ontouchstart 屬性也不要忘了
這樣就搞定了帝蒿，你可以任意使用各種組件了荐糜，關(guān)于組件怎么使用，去看官方 Wiki 就好了葛超，或者 F12 去扒官方 Demo 把他們的代碼復(fù)制過來就行了暴氏，就是這么簡單粗暴！
組件
WeUI 的組件目前不是很多绣张，但是也基本能滿足大部分需求了答渔。 官方 Demo 里面使用了前端路由，但這并不是 WeUI 的一部分胖替，并且 Demo 內(nèi)也寫了一些自定義的 CSS 樣式研儒，也不是 WeUI 的一部分豫缨，所以我們使用的時候只有組件的樣式可以直接復(fù)制來，其他的比如路由端朵、邏輯操作好芭、圖片上傳等都需要自己來搞定！ 下面來幾個組件的 Demo 方便需要的童鞋直接復(fù)制：
九宮格
九宮格就是官方 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 是一個宮格的圖標(biāo)，weui_grid_label 就是圖標(biāo)下面那個字咯营勤！ 圖標(biāo)最好使用矢量圖灵嫌，以保證在不同設(shè)備上的清晰度，圖片的尺寸不需要自己寫上葛作，WeUI 已經(jīng)幫你搞定了寿羞！
Tabbar
Tabbar 是位于頁面底部的導(dǎo)航，相當(dāng)于 App 的Dock 欄赂蠢，通過點擊每個按鈕切換頁面的主體內(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 頁面的主體內(nèi)容玖院，weui_tabbar_item 為 Tabbar 的一個一個的按鈕，建議為 3~5 個量瓜，weui_tabbar_icon 為每個按鈕的圖標(biāo)司恳，weui_tabbar_label 為圖標(biāo)下面的字，Active 狀態(tài)可以使用 weui_bar_item_on 樣式绍傲。 注意扔傅，你這樣寫完后會發(fā)現(xiàn) Tabbar 位于頁面最頂端，這是因為 WeUI 沒有定義 html, body 的高度烫饼，所以給其定義個 height: 100%; 就可以了猎塞！
html,body{height: 100%;}
表單
這個就不寫代碼了，去復(fù)制 Demo 或 Wiki 里面的代碼就好了杠纵，不過有一點要注意：你會發(fā)現(xiàn)表單內(nèi)可以輸入日期荠耽、時間和數(shù)字等，但這并不是 WeUI 的組件比藻，而是使用 HTML 5 的 input 屬性铝量，然后調(diào)用的瀏覽器自身的控件來輸入日期倘屹、時間等的。 日期：
<input type="date" class="weui_input">
時間：
<input type="datetime-local" class="weui_input">
數(shù)字：
<input type="number" class="weui_input">
更多 HTML 5 Input 類型請參考：HTML5 Input 類型
