WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序開發量身設計，可以令用戶的使用感知更加統一。在微信網頁開發中使用WeUI有如下優勢。
·同微信客戶端一致的視覺效果，令所有微信用戶都能更容易地使用你的網站。
·便捷獲取快速使用，降低開發和設計成本。
·微信設計團隊精心打造，清晰明確，簡潔大方。
WeUI樣式庫目前包含Button、Cell、Dialog、Progress、Toast、Article、Icons等元素。元素列表如圖7-8所示。
1.ActionSheet
ActionSheet用於顯示包含一系列可交互的動作集合，包括說明、跳轉等。它由底部彈出，一般用於響應用戶對頁面的點擊。
<p>
<p></p>
<p>
<p>
<p>示例菜單</p>
<p>示例菜單</p>
<p>示例菜單</p>
<p>示例菜單</p>
</p>
<p>
<p>取消</p>
</p>
</p>
</p>
ActionSheet的效果如圖7-9所示。
圖7-8 WeUI元素
圖7-9 ActionSheet
2.Article
Article（文字視圖）用於顯示大段文字，這些文字通常是頁面上的主體內容。Article支持分段、多層標題、引用、內嵌圖片、有/無序列表等富文本樣式，並可響應用戶的選擇操作。
<article>
<h1>大標題</h1>
<section>
<h2>章標題</h2>
<section>
<h3>1.1 節標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute</p>
</section>
<section>
<h3>1.2 節標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</section>
</article>
Article的效果如圖7-10所示。
3.Button
Button（按鈕）可以使用a或者button標籤。WAP上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart=""進行全局觸發。
按鈕常見的操作場景有：確定、取消、警示，分別對應weui_btn_primary、weui_btn_default、weui_btn_warn，每種場景都有自己的置灰態（weui_btn_disabled），除此還有一種鏤空按鈕weui_btn_plain_xxx。客戶端webview裡的按鈕尺寸有兩類，默認寬度100%，小型按鈕寬度自適應，兩邊邊框與文本間距0.75em。
<a href="javascript:;">按鈕</a>
<a href="javascript:;">按鈕</a>
<a href="javascript:;">確認</a>
<a href="javascript:;">確認</a>
<a href="javascript:;">按鈕</a>
<a href="javascript:;">按鈕</a>
<p>
<a href="javascript:;">按鈕</a>
<a href="javascript:;">按鈕</a>
<a href="javascript:;">按鈕</a>
<a href="javascript:;">按鈕</a>
</p>
Button的效果如圖7-11所示。
4.Cell
Cell（列表視圖）用於將信息以列表的結構顯示在頁面上，是WAP上最常用的內容結構。Cell由多個section組成，每個section包括section headerweui_cells_title以及cellsweui_cells。
Cell由thumbnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft等3部分組成，採用自適應佈局，在需要自適應的部分加上classweui_cell_primary即可。
圖7-10 Article
圖7-11 Button
<p>帶圖標、說明、跳轉的列表項</p>
<p>
<a href="javascript:;">
<p>
<img src="" >
</p>
<p>
<p>cell standard</p>
</p>
<p>
說明文字
</p>
</a>
<a href="javascript:;">
<p>
<img src="" >
</p>
<p>
<p>cell standard</p>
</p>
<p>
說明文字
</p>
</a>
</p>
Cell的效果如圖7-12所示。
5.Dialog
Dialog又稱modal，表現為帶遮罩的彈框，可以分為Alert和Confirm兩種。
Alert是警告彈框，功能類似於瀏覽器自帶的alert彈框，用於提醒、警告用戶簡單扼要的信息，只有一個「確認」按鈕。點擊「確認」按鈕後，關閉彈框。
Confirm是確認彈框，功能類似於瀏覽器自帶的confirm和prompt的集合，可以用於讓用戶確認/取消，也可以讓用戶填寫表單。
<p>
<p></p>
<p>
<p>
<strong>彈窗標題</strong>
</p>
<p>自定義彈窗內容<br>...</p>
<p>
<a href="javascript:;">取消</a>
<a href="javascript:;">確定</a>
</p>
</p>
</p>
Dialog的效果如圖7-13所示。
圖7-12 Cell
圖7-13 Dialog
6.Form
Form（表單）可以分成「輸入型」和「選擇型」兩種。輸入型包括單行文本（文本、數值、電話、密碼等）、多行文本；選擇型包括下拉選擇、單選、多選、開關、日期時間等。在WeUI中，表單通常與Cell組件配合使用。
Label（表單字段），用於告知用戶該字段的含義，除了可以通過placeholder屬性實現外，還可以使用label。它放在表單元素左邊，明確說明表單的含義。
Input（輸入框），是表單中最常見的元素，表現為單行文本輸入框，可以指定輸入類型為文本（text）、數值（number）、電話（tel）、密碼（password）等。WebView默認的輸入框樣式不統一且不太美觀，所以WeUI通過類名.weui_input來設置單行輸入框的樣式，使其更符合微信風格，體驗更佳。
Textarea（文本域），用作輸入多行文本。不同於Input，在WeUI的設計中，文本域沒有label，在placeholder中提示用戶輸入信息即可。通常，輸入多行文本時都有字數限制，WeUI提供了相應的樣式配合使用。
Radio（單選框），在WeUI的設計中，單選框列表通常是獨立一組的，推薦左邊文字，右邊選中圖標，用戶只能選擇其中一個選項。默認通過label標籤的for屬性來關聯，無須額外編寫JavaScript代碼來實現切換選中的效果。
Checkbox（復選框），與Radio類似，默認也是通過label標籤的for屬性來關聯選擇。不同的是，Checkbox允許用戶同時選擇多個選項，推薦選中圖標放在左邊。
Select（選擇框），功能與Radio類似，用於提供一組選項，讓用戶選擇其中一個。不同的是，這些選項默認是隱藏的，當用戶點擊時，才會展開讓用戶選擇。它通常是在選項較多或選項不太重要，不需要展示時使用。
Switch（開關），只有兩個狀態，用於讓用戶選擇「開啟」或「關閉」。它使用起來很簡單，只需要給input標籤加上.weui_switch類即可。
Uploader（上傳組件），圖片的展示由background-image寫在.weui_uploader_file裡，默認是background-size:cover。上傳中的狀態需要為.weui_uploader_file添加.weui_uploader_status。icon或文字都可放到它的子元素.weui_uploader_status_content中，它是上下左右居中。
Form的效果如圖7-14所示。
7.Grid
Grid（九宮格），功能類似於微信錢包界面中的九宮格，用於展示有多個相同級別的入口。它包含功能的圖標和簡潔的文字描述。
<p>
<a href="javascript:;">
<p>
<img src="./images/icon_nav_button.png" >
</p>
<p>
Button
</p>
</a>
<a href="javascript:;">
<p>
<img src="./images/icon_nav_cell.png" >
</p>
<p>
Cell
</p>
</a>
</p>
Grid的效果如圖7-15所示。
8.Msg Page
Msg Page（結果頁）通常來說可以認為進行一系列操作步驟後，作為流程結束的總結性頁面。結果頁的作用主要是告知用戶操作處理結果以及必要的相關細節（可用於確認之前的操作是否有誤）等信息。若該流程用於開啟或關閉某些重要功能，可在結果頁增加與該功能相關的描述性內容。除此之外，結果頁也可以承載一些附加價值操作，如提供抽獎、關注公眾號等功能入口。
圖7-14 Form
圖7-15 Grid
<p>
<p><i></i></p>
<p>
<h2>操作成功</h2>
<p>內容詳情，可根據實際需要安排</p>
</p>
<p>
<p>
<a href="javascript:;">確定</a>
<a href="javascript:;">取消</a>
</p>
</p>
<p>
<a href="">查看詳情</a>
</p>
</p>
Msg Page的效果如圖7-16所示。
9.Navbar
Navbar，頂部tab，當需要在頁面頂部展示tab導航時使用，用法與Tabbar類似。
<p>
<p>
<p>
選項一
</p>
<p>
選項二
</p>
<p>
選項三
</p>
</p>
<p>
</p>
</p>
Navbar的效果如圖7-17所示。
圖7-16 Msg Page
圖7-17 Navbar
10.Panel
weui_panel由head（可選）、body、foot（可選）等3部分組成，主要承載了圖文組合列表weui_media_appmsg、文字組合列表weui_media_text以及小圖文組合列表weui_media_text。
body部分根據不同業務可自定義不同的內容。foot部分默認支持「查看更多」的樣式，需要在weui_panel擴展一個weui_panel_access的類。
<p>
<p>圖文組合列表</p>
<p>
<a href="javascript:void(0);">
<p>
<img src="" >
</p>
<p>
<h4>標題一</h4>
<p>由各種物質組成的巨型球狀天體，叫做星球。星球有
一定的形狀，有自己的運行軌道。</p>
</p>
</a>
<a href="javascript:void(0);">
<p>
<img src="" >
</p>
<p>
<h4>標題二</h4>
<p>由各種物質組成的巨型球狀天體，叫做星球。星球有
一定的形狀，有自己的運行軌道。</p>
</p>
</a>
</p>
<a href="javascript:void(0);">查看更多</a>
</p>
Panel的效果如圖7-18所示。
11.Progress
Progress（進度條）用於上傳、下載等耗時且需要顯示進度的場景，用戶可以隨時中斷該操作。
<p>
<p>
<p>
<p ></p>
</p>
<a href="javascript:;">
<i></i>
</a>
</p>
</p>
以下代碼模擬改變進度條的值。
$(function{
var progress = 0;
var $progress = $('.weui_progress_inner_bar');
function uploading{
$progress.width(++progress % 100 + '%');
setTimeout(uploading, 20);
}
setTimeout(uploading, 20);
});
Progress的效果如圖7-19所示。
12.Tabbar
Tabbar（底部導航）通常用作Web應用的主界面底部導航，類似於微信主界面底部「微信」、「通訊錄」、「發現」和「我」的導航區。每個功能包含一個圖標和該功能簡潔的文字描述。
<p>
<p>
</p>
<p>
<a href="javascript:;">
<p>
<img src="path/to/images/icon_nav_button.png" >
</p>
<p>微信</p>
</a>
<a href="javascript:;">
<p>
<img src="path/to/images/icon_nav_msg.png" >
</p>
<p>通訊錄</p>
</a>
<a href="javascript:;">
<p>
<img src="path/to/images/icon_nav_article.png" >
</p>
<p>發現</p>
</a>
<a href="javascript:;">
<p>
<img src="path/to/images/icon_nav_cell.png" >
</p>
<p>我</p>
</a>
</p>
</p>
圖7-18 Panel
圖7-19 Progress
Tabbar的效果如圖7-20所示。
13.Toast
Toast用於臨時顯示某些信息，並且會在數秒後自動消失。這些信息通常是輕量級操作的成功信息。
<p >
<p></p>
<p>
<i></i>
<p>已完成</p>
</p>
</p>
Toast的效果如圖7-21所示。
14.SearchBar
SearchBar（搜索欄）類似於微信原生的搜索欄，應用於常見的搜索場景。
<p>
<form>
<p>
<i></i>
<input type="search" place
holder="搜索" required/>
<a href="javascript:"></a>
</p>
<label for="search_input">
<i></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:">取消</a>
</p>
SearchBar的效果如圖7-22所示。
圖7-20 Tabbar
圖7-21 Toast
圖7-22 SearchBar