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