好的！我来帮你快速搭建一个WeUI + 自定义样式的基础网页项目结构（适用于公众号网页、移动端H5页面），包含：
- ✅ 引入 WeUI 样式
- ✅ 自定义样式拓展结构
- ✅ 示例页面结构（表单 + 按钮）
- ✅ 组件式 CSS 文件拆分
📁 项目目录结构
weui-custom-project/
├── index.html // 首页入口
├── css/
│ ├── weui.min.css // 官方 WeUI 样式（推荐使用 CDN）
│ ├── custom/
│ │ ├── button.css // 自定义按钮样式
│ │ ├── form.css // 自定义表单样式
│ │ └── global.css // 公共样式（字体/颜色等）
│ └── main.css // 样式入口文件（导入所有自定义样式）
└── js/
└── main.js // 页面交互脚本（可选）
📄 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 + 自定义样式项目</title>
<!-- WeUI CDN 引入 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.5.0/weui.min.css" />
<!-- 自定义样式引入 -->
<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="请输入姓名"/>
</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('按钮点击了！');
});
✅ 打开效果
只需在本地浏览器打开 index.html 即可看到：
- 使用了 WeUI 风格的表单
- 自定义了表单背景和按钮样式
✅ 提升建议（可选）
- 使用 SASS 管理样式（将 custom/*.css 改为 .scss）
- 用 Webpack 或 Vite 构建管理更复杂的页面
- 用模板引擎（如 Nunjucks、Handlebars）做组件化开发
