好的！我來(lái)幫你快速搭建一個(gè)WeUI + 自定義樣式的基礎(chǔ)網(wǎng)頁(yè)項(xiàng)目結(jié)構(gòu)（適用于公眾號(hào)網(wǎng)頁(yè)、移動(dòng)端H5頁(yè)面），包含：
- ? 引入 WeUI 樣式
- ? 自定義樣式拓展結(jié)構(gòu)
- ? 示例頁(yè)面結(jié)構(gòu)（表單 + 按鈕）
- ? 組件式 CSS 文件拆分
?? 項(xiàng)目目錄結(jié)構(gòu)
weui-custom-project/
├── index.html // 首頁(yè)入口
├── css/
│ ├── weui.min.css // 官方 WeUI 樣式（推薦使用 CDN）
│ ├── custom/
│ │ ├── button.css // 自定義按鈕樣式
│ │ ├── form.css // 自定義表單樣式
│ │ └── global.css // 公共樣式（字體/顏色等）
│ └── main.css // 樣式入口文件（導(dǎo)入所有自定義樣式）
└── js/
└── main.js // 頁(yè)面交互腳本（可選）
?? 1. index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>WeUI + 自定義樣式項(xiàng)目</title>
<!-- WeUI CDN 引入 -->
<link rel="stylesheet" />
<!-- 自定義樣式引入 -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="page">
<div class="weui-cells__title">自定義表單</div>
<div class="weui-cells custom-form">
<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="請(qǐng)輸入姓名"/>
</div>
</div>
</div>
<div class="weui-btn-area">
<a class="custom-btn" href="javascript:;">自定義按鈕</a>
</div>
</div>
</body>
</html>
?? 2. css/main.css（樣式入口）
@import url('./custom/global.css');
@import url('./custom/form.css');
@import url('./custom/button.css');
?? 3. css/custom/global.css
body {
background-color: #f8f8f8;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
}
?? 4. css/custom/form.css
.custom-form .weui-cell {
background-color: #fffbe6;
border-left: 4px solid #ffc107;
}
?? 5. css/custom/button.css
.custom-btn {
display: block;
text-align: center;
padding: 12px 0;
border-radius: 6px;
background-color: #007aff;
color: white;
text-decoration: none;
font-weight: bold;
}
.custom-btn:active {
background-color: #005ecb;
}
?? 6. js/main.js（可選）
document.querySelector('.custom-btn').addEventListener('click', function () {
alert('按鈕點(diǎn)擊了！');
});
? 打開(kāi)效果
只需在本地瀏覽器打開(kāi) index.html 即可看到：
- 使用了 WeUI 風(fēng)格的表單
- 自定義了表單背景和按鈕樣式
? 提升建議（可選）
- 使用 SASS 管理樣式（將 custom/*.css 改為 .scss）
- 用 Webpack 或 Vite 構(gòu)建管理更復(fù)雜的頁(yè)面
- 用模板引擎（如 Nunjucks、Handlebars）做組件化開(kāi)發(fā)
