WeUI 详细介绍
WeUI 是由微信官方設計團隊專為微信移動 Web 應用設計的 UI 庫。
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。
使用
方法一：
使用bower進行安裝
bower?install?--save?weui方法二：
使用npm進行安裝
npm?install?--save?weui開發
git?clone?https://github.com/weui/weui.git
cd?weui
npm?install?-g?gulp
npm?install
gulp?-ws
運行gulp -ws命令，會監聽src目錄下所有文件的變更，并且默認會在8080端口啟動服務器，然后在瀏覽器打開?http://localhost:8080/example。
手機預覽
請用微信掃碼?
http://weui.github.io/weui/
Button
按鈕可以使用a或者button標簽。wap上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart=""全局觸發。
按鈕常見的操作場景：確定、取消、警示，分別對應class：weui_btn_primary、weui_btn_default、weui_btn_warn，每種場景都有自己的置灰態weui_btn_disabled，除此外還有一種鏤空按鈕weui_btn_plain_xxx，客戶端webview里的按鈕尺寸有兩類，默認寬度100%，小型按鈕寬度自適應，兩邊邊框與文本間距0.75em：
<a?href="javascript:;"?class="weui_btn?weui_btn_primary">按鈕</a>
<a?href="javascript:;"?class="weui_btn?weui_btn_disabled?weui_btn_primary">按鈕</a>
<a?href="javascript:;"?class="weui_btn?weui_btn_warn">確認</a>
<a?href="javascript:;"?class="weui_btn?weui_btn_disabled?weui_btn_warn">確認</a>
<a?href="javascript:;"?class="weui_btn?weui_btn_default">按鈕</a>
<a?href="javascript:;"?class="weui_btn?weui_btn_disabled?weui_btn_default">按鈕</a>
<div?class="button_sp_area"><a?href="javascript:;"?class="weui_btn?weui_btn_plain_default">按鈕</a><a?href="javascript:;"?class="weui_btn?weui_btn_plain_primary">按鈕</a><a?href="javascript:;"?class="weui_btn?weui_btn_mini?weui_btn_primary">按鈕</a><a?href="javascript:;"?class="weui_btn?weui_btn_mini?weui_btn_default">按鈕</a>
</div>Cell
Cell，列表視圖，用于將信息以列表的結構顯示在頁面上，是wap上最常用的內容結構。Cell由多個section組成，每個section包括section headerweui_cells_title以及cellsweui_cells。
cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分組成，cell采用自適應布局，在需要自適應的部分加上classweui_cell_primary即可：
帶說明的列表項
<div?class="weui_cells_title">帶說明的列表項</div>
<div?class="weui_cells"><div?class="weui_cell"><div?class="weui_cell_bd?weui_cell_primary"><p>標題文字</p></div><div?class="weui_cell_ft">說明文字</div></div>
</div>Cell可根據需要進行各種自定義擴展，包括輔助說明、跳轉、單選、復選等。下面以帶圖標、說明、跳轉的列表項，其他情況可以直接參考example下的代碼：
<div?class="weui_cells_title">帶圖標、說明、跳轉的列表項</div>
<div?class="weui_cells?weui_cells_access"><a?class="weui_cell"?href="javascript:;"><div?class="weui_cell_hd"><img?src=""?alt="icon"?style="width:20px;margin-right:5px;display:block"></div><div?class="weui_cell_bd?weui_cell_primary"><p>cell?standard</p></div><div?class="weui_cell_ft">說明文字</div></a><a?class="weui_cell"?href="javascript:;"><div?class="weui_cell_hd"><img?src=""?alt="icon"?style="width:20px;margin-right:5px;display:block"></div><div?class="weui_cell_bd?weui_cell_primary"><p>cell?standard</p></div><div?class="weui_cell_ft">說明文字</div></a>
</div>Dialog
若系統的alert窗體無法滿足網頁的臨時視圖內容需求，則可以自定義實現與alert形式相似的dialog，并且在dialog中可以自定義地使用各種控件，來滿足需求。
<div?class="weui_dialog_confirm"><div?class="weui_mask"></div><div?class="weui_dialog"><div?class="weui_dialog_hd"><strong?class="weui_dialog_title">彈窗標題</strong></div><div?class="weui_dialog_bd">自定義彈窗內容<br>...</div><div?class="weui_dialog_ft"><a?href="javascript:;"?class="weui_btn_dialog?default">取消</a><a?href="javascript:;"?class="weui_btn_dialog?primary">確定</a></div></div>
</div><div?class="weui_dialog_alert"><div?class="weui_mask"></div><div?class="weui_dialog"><div?class="weui_dialog_hd"><strong?class="weui_dialog_title">彈窗標題</strong></div><div?class="weui_dialog_bd">彈窗內容，告知當前頁面信息等</div><div?class="weui_dialog_ft"><a?href="javascript:;"?class="weui_btn_dialog?primary">確定</a></div></div>
</div>Toast
toast用于臨時顯示某些信息，并且會在數秒后自動消失。這些信息通常是輕量級操作的成功、失敗或等待狀態信息。
<div?id="toast"?style="display:?none;"><div?class="weui_mask_transparent"></div><div?class="weui_toast"><i?class="weui_icon_toast"></i><p?class="weui_toast_content">已完成</p></div>
</div><div?id="loadingToast"?class="weui_loading_toast"?style="display:none;"><div?class="weui_mask_transparent"></div><div?class="weui_toast"><div?class="weui_loading">????????????<!--?:)?--><div?class="weui_loading_leaf?weui_loading_leaf_0"></div><div?class="weui_loading_leaf?weui_loading_leaf_1"></div><div?class="weui_loading_leaf?weui_loading_leaf_2"></div><div?class="weui_loading_leaf?weui_loading_leaf_3"></div><div?class="weui_loading_leaf?weui_loading_leaf_4"></div><div?class="weui_loading_leaf?weui_loading_leaf_5"></div><div?class="weui_loading_leaf?weui_loading_leaf_6"></div><div?class="weui_loading_leaf?weui_loading_leaf_7"></div><div?class="weui_loading_leaf?weui_loading_leaf_8"></div><div?class="weui_loading_leaf?weui_loading_leaf_9"></div><div?class="weui_loading_leaf?weui_loading_leaf_10"></div><div?class="weui_loading_leaf?weui_loading_leaf_11"></div></div><p?class="weui_toast_content">數據加載中</p></div>
</div>Msg Page
結果頁通常來說可以認為進行一系列操作步驟后，作為流程結束的總結性頁面。結果頁的作用主要是告知用戶操作處理結果以及必要的相關細節（可用于確認 之前的操作是否有誤）等信息；若該流程用于開啟或關閉某些重要功能，可在結果頁增加與該功能相關的描述性內容；除此之外，結果頁也可以承載一些附加價值操 作，例如提供抽獎、關注公眾號等功能入口。
<div?class="weui_msg"><div?class="weui_icon_area"><i?class="weui_icon_success?weui_icon_msg"></i></div><div?class="weui_text_area"><h2?class="weui_msg_title">操作成功</h2><p?class="weui_msg_desc">內容詳情，可根據實際需要安排</p></div><div?class="weui_opr_area"><p?class="weui_btn_area"><a?href="javascript:;"?class="weui_btn?weui_btn_primary">確定</a><a?href="javascript:;"?class="weui_btn?weui_btn_default">取消</a></p></div><div?class="weui_extra_area"><a?href="">查看詳情</a></div>
</div>Article
文字視圖顯示大段文字，這些文字通常是頁面上的主體內容。Article支持分段、多層標題、引用、內嵌圖片、有/無序列表等富文本樣式，并可響應用戶的選擇操作。
在微信客戶端webview中使用Article，必須保證文字有足夠的可讀性和可辨識性、使用規范字體、保證足夠的段間距、段首無縮進。
<article?class="weui_article"><h1>大標題</h1><section><h2?class="title">章標題</h2><section><h3>1.1?節標題</h3><p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmodtempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam,quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodoconsequat.?Duis?aute</p></section><section><h3>1.2?節標題</h3><p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmodtempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam,cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?nonproident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum.</p></section></section>
</article>Icon
原文網址：https://www.oschina.net/p/weui
<i?class="weui_icon_msg?weui_icon_success"></i>
<i?class="weui_icon_msg?weui_icon_info"></i>
<i?class="weui_icon_msg?weui_icon_warn"></i>
<i?class="weui_icon_msg?weui_icon_waiting"></i>
<i?class="weui_icon_safe?weui_icon_safe_success"></i>
<i?class="weui_icon_safe?weui_icon_safe_warn"></i>
<div?class="icon_sp_area"><i?class="weui_icon_success"></i><i?class="weui_icon_success_circle"></i><i?class="weui_icon_success_no_circle"></i><i?class="weui_icon_info"></i><i?class="weui_icon_waiting"></i><i?class="weui_icon_waiting_circle"></i><i?class="weui_icon_circle"></i><i?class="weui_icon_warn"></i><i?class="weui_icon_download"></i>
</div>
總結
- 上一篇： 电商发货业务序列图
- 下一篇： ThinkPHP 详细介绍