WeUI for 小程序使用教程文档总结
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含按鈕button、組件cell、彈框dialog、 進度條progress、 提示toast、文章article、彈出菜單actionsheet、圖標icon等各式元素。
?
一、項目地址
https://github.com/weui/weui-wxss/
二、如何使用
1、下載程序代碼，解壓后可以看到如下目錄：
2、我們只需要將weui-wxss-master\dist\style\weui.wxss文件導入到小程序項目的根目錄下：
?
3、新建微信小程序項目，將weui.wxss文件導入到小程序項目的根目錄下：
?
4、在項目中引用：在app.wxss中加入weui.wxss的引用- @import ‘weui.wxss’;
5、使用示例如下：
三、使用WeUI樣式說明：
1、根組件使用class="page"：
2、頁面骨架組件使用class="page__xxx"(注意是兩個下劃線)
3、其他組件都已weui-開頭后接組件名稱，例如class="weui-footer"
?
4、組件的子組件樣式，例如view.weui-footer組件還有鏈接和版權信息。
?
四、WeUI標簽預覽（具體應以WeUI樣式標簽為準）：
紅色表示出現次數比較多的標簽
?
1、表單：
Button：
weui-btn：按鈕
weui-btn?mini-btn：小按鈕
?
list：
weui-cells__title：列表組件標題
weui-cell__bd：標題文字
weui-cell__ft： 說明文字
?
Input：
weui-cells__title：列表組件標題
weui-check： 單選
weui-icon-radio： 單選圖標
weui-cell__bd： 標題文字說明
weui-label： 列表
weui-input： 輸入
weui-vcode-btn： 獲取驗證碼按鈕
weui-vcode-img： 驗證碼圖片
weui-textarea：請輸入文本
weui-select： 選擇
?
Slider：滑動（參考小程序文檔）
?
Uploader：
weui-uploader：上傳
weui-uploader__title：圖片上傳
weui-uploader__info： 上傳個數
weui-uploader__file： 上傳文件
weui-uploader__img：上傳圖片
?
2、基礎組件
Article：
weui-article：文章標簽
weui-article__h1：標題
weui-article__title：章標題
weui-article__section：文章區域
weui-article__h3：節標題
weui-article__p：文字
weui-article__img：圖片
?
Badge：徽章
weui-cells__title：列表組件標題
weui-cell__bd：組件列表行
weui-badge：徽章
?
Flex：布局
weui-flex：布局區域
weui-flex__item：布局選項
?
Footer：頁腳
weui-footer：頁腳名稱
weui-footer__text：頁腳內容
weui-footer__links：頁腳鏈接
?
Gallery：畫廊（參考小程序文檔）
?
Grid：九宮格
weui-grids：九宮格區域
weui-grid__icon：九宮格圖標
weui-grid__label：九宮格列表
?
Icons：圖標
icon-box：圖表區域
icon-box__title：圖標標題
icon-box__desc：圖標說明
?
Loadmore：加載更多
weui-loading：加載更多標簽
weui-loadmore__tips：正在加載
?
Panel：面板
weui-panel__hd：面板頁頭
weui-panel__bd：面板主體
weui-media-box__title：面板標題
weui-media-box__desc：面板說明
weui-media-box__info__meta：面板底部文字說明
?
Preview：表單預覽
weui-form-preview：表單預覽區域
weui-form-preview__hd：表單預覽頁頭
weui-form-preview__bd：表單預覽主體
weui-form-preview__item：表單預覽列表區域
weui-form-preview__label：表單預覽列表標題
weui-form-preview__value_in-hd：表單預覽頁頭內容
weui-form-preview__value：表單預覽列表內容
?
Progress：進度條
weui-progress：進度條標簽
weui-progress__bar：進度條
weui-progress__opr：進度條圖標
?
3、操作反饋
ActionSheet：彈出式菜單
weui-btn-area：按鈕標簽區域
?
Dialog：對話框
weui-btn-area：按鈕標簽區域
weui-btn：按鈕
?
Msg：提示頁
weui-btn-area：按鈕標簽區域
weui-btn：按鈕
weui-msg__icon-area：提示圖標
weui-msg__text-area：提示區域
weui-msg__title：提示標題
weui-msg__desc：提示說明
weui-msg__opr-area：提示后操作區域
weui-msg__extra-area：額外區域
?
Picker：選擇器
weui-btn-area：按鈕區域
?
Toast：彈出式提示
weui-btn-area：按鈕標簽區域
weui-btn：按鈕
?
4、導航相關：
Navbar：頭部導航
weui-navbar：導航標簽
weui-navbar__title：導航標題
weui-navbar__slider：導航滑塊
weui-tab__panel：導航面板
weui-tab__content：導航內容
?
Tabbar：底部導航（參考小程序文檔）
?
5、搜索相關
Searchbar：搜索欄
weui-search-bar：搜索欄區域
weui-search-bar__form：搜索欄表單
weui-search-bar__label：搜索欄列表
weui-icon-search：搜索欄圖標
weui-search-bar__text：搜索欄文字
weui-cell__bd：搜索欄文本
?
?
?
總結
以上是生活随笔為你收集整理的WeUI for 小程序使用教程文档总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： A tutorial video for
- 下一篇： usb 驱动