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 小程序使用教程文档总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。