用Claude Code 30分钟生成微信小程序接单页，零基础也能当天上线
大家好，我是RD！今天这期不讲概念，只做一件事：让你从打开浏览器到拥有一个能发朋友圈接单的小程序落地页，不超过30分钟。不需要下载IDE、不用注册开发者账号（先做页面）、更不用懂WXML或JS逻辑——所有代码由Claude Code生成+你微调验证，全程在网页端完成。
> ✅ 成品效果：简洁专业接单页（含姓名/电话/需求描述表单 + 服务列表 + 响应式适配），支持微信开发者工具一键导入，后续可快速接入云开发托管。
---
🛠️ 准备工作（2分钟）
你是一位资深微信小程序前端工程师，专注为自由职业者打造轻量级接单落地页。请严格按以下要求输出：
- 仅输出完整的小程序项目文件结构（app.js, app.json, pages/index/index.wxml / index.wxss / index.js）
- 使用原生小程序语法（非React/uni-app）
- 页面包含：顶部Logo区、3项服务卡片（如「企业官网搭建」「AI工具定制」「小程序代运营」）、带校验的联系表单（姓名、电话、需求描述）、底部版权信息
- 表单提交后弹出「已收到，24小时内联系！」提示，不对接后端（用wx.showToast模拟）
- 所有样式用内联wxss，禁止外部引用，确保可直接复制粘贴运行
- 不解释、不注释，只输出代码块，每个文件用\\\wxml\、\\\wxss\等明确标注
---
📥 第一步：创建本地项目（5分钟）
- 项目名称：
my-sidehustle- 目录：选空文件夹（如
D:\wx-projects\my-sidehustle）- AppID：选「测试号」（无需认证）
- 模板：选「不使用云服务」
---
🧩 第二步：粘贴Claude生成的代码（8分钟）
将Claude返回的4段代码，分别保存为对应文件：
app.js → 直接覆盖项目根目录下的 app.js app.json → 覆盖根目录 app.json（确认"pages": ["pages/index/index"]存在）pages/index/index.wxml → 新建文件夹 pages/index/，创建 index.wxml，粘贴wxml内容pages/index/index.wxss 和 index.js 同理（注意：Claude可能合并了js逻辑，确保onLoad/onShow/onSubmit事件函数完整）💡 小技巧：如果Claude返回的index.js里缺少Page({})包裹，请手动补全：
Page({
data: { /* 原有data */ },
formSubmit(e) { /* 原有submit逻辑 */ },
// ...其他方法
})
---
🎨 第三步：微调美化（7分钟｜新手友好）
打开 pages/index/index.wxss，找到.service-card类，把背景色从#f9f9f9改成更专业的#f0f8ff（浅天蓝），加圆角：
.service-card {
background: #f0f8ff;
border-radius: 12rpx;
padding: 24rpx;
}
再打开 index.wxml，在表单最后加一句信任提示（提升转化率）：
🔒 信息仅用于联系，绝不外泄
并在wxss中添加：
.tip { font-size: 24rpx; color: #666; margin-top: 16rpx; text-align: center; }
---
▶️ 第四步：真机预览 & 发布准备（5分钟）
1.0.0 → 备注写「副业接单页V1」> ⚠️ 注意：上传后需登录[微信公众平台](https://mp.weixin.qq.com) → 小程序管理后台 → 提交审核（选择「工具-展示类」，审核通常2小时通过）
---
💡 后续变现动作（3分钟｜立刻执行）
---
✅ 为什么这招对零基础特别有效？
下期预告：《用Cursor自动把接单页转成AI客服小程序（接入OpenAI API免写一行后端）》
现在，关掉这篇文章，打开Claude，复制第一段Prompt——你的第一个副业产品，正在加载中。
---
📌 小结工具链：Claude Code（生成）→ 微信开发者工具（调试）→ Cursor（后续迭代）→ 飞书/微信（获客）
你不是在学编程，是在训练AI为你打工。人人都是程序员，从今天这个小程序开始。