介紹：
WeUI是微信設計團隊為微信網站開發量身定做的微信類UI界面，旨在改善和規范微信用戶體驗。包括組分如button，cell，dialog，progress，toast，article，actionsheet，icon。
?
使用舉例：
一、下載WeUI：
https://github.com/Tencent/weui
? ? ?下載完畢后解壓，在dist/style目錄下找到weui.min.css文件
二、使用WeUI：
創建一個index.html文件，引用weui.min.css文件
打開https://weui.io界面，選擇button，根據它對應的代碼找到如下代碼，粘貼到index.html中
<div class="page__bd page__bd_spacing"><a href="javascript:;" class="weui-btn weui-btn_primary">頁面主操作 Normal</a><a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>頁面主操作 Loading</a><a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">頁面主操作 Disabled</a><a href="javascript:;" class="weui-btn weui-btn_default">頁面次要操作 Normal</a><a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>頁面次操作 Loading</a><a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">頁面次要操作 Disabled</a><a href="javascript:;" class="weui-btn weui-btn_warn">警告類操作 Normal</a><a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告類操作 Loading</a><a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告類操作 Disabled</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-default weui-btn_plain-disabled">按鈕</a><a href="javascript:;" class="weui-btn weui-btn_plain-primary">按鈕</a><a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按鈕</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><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按鈕</a></div>
</div>
?
? 打開該index.html文件，可以看到button樣式
?三、WeUI組件
1、button
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <a href="" class="weui-btn weui-btn_plain-default">默認</a> <a href="" class="weui-btn weui-btn_primary">確定</a> <a href="" class="weui-btn weui-btn_plain-primary">鏤空</a> <a href="" class="weui-btn weui-btn_mini weui-btn_warn">迷你</a> <a href="" class="weui-btn weui-btn_mini weui-btn_disabled weui-btn_primary">不能點擊</a> <div class="weui-btn-area"><a href="" class="weui-btn weui-btn_primary">確定</a> </div> </body> </html>
2、List列表視圖
List 列表視圖，用于將信息以列表的結構顯示在頁面上，是wap上最常用的內容結構
每個列表視圖包含weui-cells_title weui-cells兩部分，weui-cells內可以包括一個或多個列表項，每個列表項由縮略圖weui-cell__hd ?主體內容weui-cell__db ?輔助說明weui-cell__ft三部分組成
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body ontouchstart><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><div class="weui-cells__title">帶圖標、說明的列表項</div><div class="weui-cell"><div class="weui-cell__hd"><img src="./images/1.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>標題文字</p></div><div class="weui-cell__ft">說明文字</div></div><div class="weui-cell"><div class="weui-cell__hd"><img src="./images/1.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>標題文字</p></div><div class="weui-cell__ft">說明文字</div></div> </body> </html>l
3、Input
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="weui-cells__title">單選列表項</div> <label class="weui-cell weui-check__label" for="x11"><div class="weui-cell__bd"><p>cell standard</p></div><div class="weui-cell__ft"><input type="radio" class="weui-check" name="radio1" id="x11"><span class="weui-icon-checked"></span></div> </label> <label class="weui-cell weui-check__label" for="x12"><div class="weui-cell__bd"><p>cell standard</p></div><div class="weui-cell__ft"><input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"><span class="weui-icon-checked"></span></div> </label> </body> </html>
4、Dialog對話框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog樣式一</a> <div class="js_dialog" id="iosDialog1" style="opacity: 0; display: none;"><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-dialog__btn weui-dialog__btn_default">輔助操作</a><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a></div></div> </div> <script src="./js/zepto.min.js"></script> <script>$('body').on('click','#showIOSDialog1', function () {$('#iosDialog1').show().on('click', '.weui-dialog__btn', function () {$('#iosDialog1').hide()})}) </script> </div> </body> </html>
?
5、toast浮層提示
Toast用于臨時顯示某些信息，并且會在數秒后自動消失，這些信息通常是輕量級操作的成功、失敗或等待信息
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="page__bd page__bd_spacing"><a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a><a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加載中提示</a><div id="toast" style="opacity: 0; display: none;"><div class="weui-mask_transparent"></div><div class="weui-toast"><i class="weui-icon-success-no-circle weui-icon_toast"></i><p class="weui-toast__content">已完成</p></div></div><div id="loadingToast" style="opacity: 0; display: none;"><div class="weui-mask_transparent"></div><div class="weui-toast"><i class="weui-loading weui-icon_toast"></i><p class="weui-toast__content">數據加載中</p></div></div> </div> <script src="./js/zepto.min.js"></script> <script>$('body').on('click','#showToast',function () {$('#toast').show()setTimeout(function () {$('#toast').hide()},2000)})$('body').on('click','#showLoadingToast',function () {$('#loadingToast').show()setTimeout(function () {$('#loadingToast').hide()},2000)}) </script> </body> </html>
6、Icons組件
<i class="weui-icon-success weui-icon_msg"></i>
?
7、Msg Page結果頁
結果頁通常來說可以認為進行一系列操作步驟后，作為流程結束的總結性頁面
結果頁作用主要是告知用戶操作處理結果以及必要的相關細節（可用于確認之前的操作是否有誤）等結果
??
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="page msg_success js_show"><div class="weui-msg"><div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div><div class="weui-msg__text-area"><h2 class="weui-msg__title">操作成功</h2><p class="weui-msg__desc">內容詳情，可根據實際需要安排，如果換行則不超過規定長度，居中展現<a href="javascript:void(0);">文字鏈接</a></p></div><div class="weui-msg__opr-area"><p class="weui-btn-area"><a href="javascript:history.back();" class="weui-btn weui-btn_primary">推薦操作</a><a href="javascript:history.back();" class="weui-btn weui-btn_default">輔助操作</a></p></div><div class="weui-msg__extra-area"><div class="weui-footer"><p class="weui-footer__links"><a href="javascript:void(0);" class="weui-footer__link">底部鏈接文本</a></p><p class="weui-footer__text">Copyright ? 2008-2016 weui.io</p></div></div></div> </div> </body> </html>
?
8、Article 文字視圖
支持分段、多層標題、引用、內嵌圖片、有/無序列列表等富文本樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body><div class="container"><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.</p><p><img src="./images/2.png" alt=""><img src="./images/2.png" alt=""></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></div> </div> </body> </html>
?
9、Panel?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="container"><a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="./js/3.png" alt=""></div><div class="weui-media-box__bd"><h4 class="weui-media-box__title">標題一</h4><p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p></div></a><a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="./js/3.png" alt=""></div><div class="weui-media-box__bd"><h4 class="weui-media-box__title">標題一</h4><p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p></div></a> </div> </body> </html>
??
10、 navbar
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="container"><div class="navbar"><div class="weui-tab"><div class="weui-navbar"><div class="weui-navbar__item weui-bar__item_on">選項一</div><div class="weui-navbar__item">選項二</div><div class="weui-navbar__item">選項三</div></div><div class="weui-tab__panel"><div class="weui-tab__content">內容一</div><div class="weui-tab__content">內容二</div><div class="weui-tab__content">內容三</div></div></div></div> </div> <script src="./js/zepto.min.js"></script> <script>$('body').on('click', '.weui-navbar__item', function () {$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');}) </script> </body> </html>
?
? ? 11、tabbar
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/weui.min.css"><link rel="stylesheet" href="./css/example.css"> </head> <body> <div class="container"><div class="page tabbar js_show"><div class="page__bd" style="height: 100%;"><div class="weui-tab"><div class="weui-tab__panel"></div><div class="weui-tabbar"><a href="javascript:;" class="weui-tabbar__item weui-bar__item_on"><span style="display: inline-block;position: relative;"><img src="./images/4.png" alt="" class="weui-tabbar__icon"><span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span></span><p class="weui-tabbar__label">微信</p></a><a href="javascript:;" class="weui-tabbar__item"><img src="./images/4.png" alt="" class="weui-tabbar__icon"><p class="weui-tabbar__label">通訊錄</p></a><a href="javascript:;" class="weui-tabbar__item"><span style="display: inline-block;position: relative;"><img src="./images/4.png" alt="" class="weui-tabbar__icon"><span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span></span><p class="weui-tabbar__label">發現</p></a><a href="javascript:;" class="weui-tabbar__item"><span style="display: inline-block;position: relative;"><img src="./images/4.png" alt="" class="weui-tabbar__icon"><span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span></span><p class="weui-tabbar__label">我</p></a></div></div></div></div> </div> <script src="./js/zepto.min.js"></script> <script></script> </body> </html>
備注： www.iconfont.cn ? 圖標庫
? ? ? ? ? ? ? ?表單驗證控件 : ?https://github.com/efri-yang/mobileValidate
?
?
![[UE4]C++中extern關鍵字淺談](http://pic.xiahunao.cn/[UE4]C++中extern關鍵字淺談)
