WeUI 是微信官方提供的一套基于微信設(shè)計規(guī)范的前端樣式庫，適用于微信網(wǎng)頁、公眾號網(wǎng)頁、小程序等場景。你可以通過以下方式在微信環(huán)境中使用 WeUI 來開發(fā)樣式庫或界面。
一、WeUI 項目地址
官方開源地址（GitHub）：
?? https://github.com/Tencent/weui
官網(wǎng)文檔和樣例頁面：
?? https://weui.io
二、使用場景分類
| 場景 | 適用 WeUI 版本 | 使用方式 |
|---|---|---|
| 公眾號網(wǎng)頁/H5頁面 | 原生 WeUI（CSS/HTML） | 引入 CSS 文件 |
| 微信小程序 | WeUI for 小程序 | 引入 WXML/WXSS 組件庫 |
三、公眾號網(wǎng)頁/H5 項目中使用 WeUI（HTML + CSS）
1. 引入 WeUI 的 CSS 文件（CDN 或本地）
<head>
<link rel="stylesheet" />
</head>
2. 使用 WeUI 的組件（HTML 示例）
<div class="weui-cells__title">表單示例</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="請輸入姓名"/>
</div>
</div>
</div>
3. 樣式類說明
WeUI 使用大量 BEM 命名規(guī)范，如：
- weui-cell：一行表單或內(nèi)容單元
- weui-input：輸入框
- weui-btn：按鈕
四、微信小程序中使用 WeUI
方法一：使用「WeUI for 小程序」組件版本
項目地址：
?? https://github.com/Tencent/weui-wxss
步驟：
1. 下載 weui-wxss 代碼
git clone https://github.com/Tencent/weui-wxss.git
把 weui-wxss/dist 文件夾復(fù)制到你的小程序項目里，如：/miniprogram/styles/weui/
2. 引入樣式（如在 app.wxss 中）
@import "./styles/weui/weui.wxss";
3. 使用組件樣式（WXML 示例）
<view class="weui-btn-area">
<button class="weui-btn weui-btn_primary">確定</button>
</view>
五、自定義開發(fā) WeUI 風格組件庫
如果你想 在WeUI基礎(chǔ)上封裝自己的組件庫，可以這樣做：
1. 引入 WeUI 樣式為基礎(chǔ)
- 然后使用 SASS 或 LESS 擴展樣式
- 按 BEM 命名繼續(xù)拓展樣式庫
2. 組件庫目錄結(jié)構(gòu)建議（公眾號項目）
weui-custom/
├── base/
│ └── weui.min.css # 官方基礎(chǔ)樣式
├── components/
│ ├── button.css # 自定義按鈕
│ └── form.css
├── index.css # 總樣式入口
3. 自定義樣式封裝示例
/* components/button.css */
.custom-btn {
@extend .weui-btn;
background-color: #007aff;
border-radius: 8px;
}
六、推薦開發(fā)方式
| 場景 | 推薦做法 |
|---|---|
| 小程序 UI 快速開發(fā) | 用 weui-wxss，或直接用 UniUI/Vant Weapp |
| 微信網(wǎng)頁/輕應(yīng)用 | 引入 WeUI 的 CSS，通過組件化封裝復(fù)用 |
| 二次開發(fā)組件庫 | 用 WeUI 作為基礎(chǔ)樣式 + SASS 拓展 |
七、WeUI 替代/拓展組件庫推薦
| 名稱 | 適用場景 | 優(yōu)點 |
|---|---|---|
| Vant | 小程序/H5 | 組件豐富，易拓展 |
| NutUI | 多端 | 京東開源，支持 Vue |
| TDesign | H5/小程序 | 騰訊出品，視覺現(xiàn)代 |
