零基础用Cursor+Claude Code 10分钟上线微信点餐小程序

> ✅ 无需写一行原生代码｜✅ 不用配置云开发｜✅ 扫码即用｜✅ 全程在Cursor中完成

大家好，我是RD！今天带零基础同学实战一个真正能用的小程序——微信点餐小程序。它支持展示菜单、加购、提交订单（模拟），界面清爽、响应迅速，且完全不用申请微信开发者账号、不部署服务器、不学WXML/WXSS——我们用AI生成标准HTML+CSS+JS，再通过微信「小程序·网页版」能力（即WebView嵌入）直接运行！

---

🌟 为什么这样更简单？

微信官方小程序要求学习WXML/WXSS/JS三套语法，还要配置AppID、云开发、审核等，对新手极不友好。但2024年起，微信已全面支持在小程序中以加载H5页面（需备案域名）。而我们用AI工具快速产出的H5页面，只要满足HTTPS+备案（我们用免费托管平台自动解决），就能无缝嵌入小程序！

本教程采用：

---

🛠️ 准备工作（2分钟）

> 💡 提示：全程不涉及Python、React或复杂框架，只用HTML/CSS/JS三件套，AI帮你写满。

---

🧩 Step 1：用Cursor生成点餐H5页面

打开Cursor → 新建文件夹 wechat-order-h5 → 新建文件 index.html。

在文件内输入以下注释（这是给Claude Code的Prompt）：

// 我是零基础用户，请用纯HTML+CSS+JS生成一个微信点餐H5页面，要求：
// - 响应式设计（适配手机竖屏）
// - 顶部标题“美味小馆”，底部固定“去结算”按钮
// - 中间分两栏：左侧菜单列表（3个菜品：宫保鸡丁 ¥28、番茄炒蛋 ¥18、青菜豆腐汤 ¥12），右侧购物车（初始为空）
// - 每个菜品旁有“+”按钮，点击后数量+1，价格自动累加
// - 购物车显示当前菜品、数量、小计，并有“-”按钮减量
// - “去结算”按钮点击弹出提示“订单已提交，稍后联系您！”
// - 使用现代CSS（Flexbox），颜色清新（主色#4CAF50），无外部依赖

选中这段注释 → 按 Ctrl+K（Windows）或 Cmd+K（Mac）→ 等待Claude Code生成完整代码（约8秒）。生成后，右键 → “Save As” → 保存为 index.html。

✅ 此时你已拥有一个功能完整的点餐页面！在Cursor内置浏览器中按 Ctrl+Shift+P → 输入“Open Preview”即可本地预览。

---

☁️ Step 2：一键部署到Vercel（30秒）

几秒后，你会看到类似 https://wechat-order-h5-abc123.vercel.app 的链接 —— 这就是你的线上地址！

> 🔐 Vercel自动提供HTTPS和备案白名单（其域名已通过微信审核），因此可被小程序安全加载。

---

📱 Step 3：创建微信小程序壳（5分钟）

---

🚀 进阶：3分钟接入真实订单（可选）

想把“订单已提交”变成真功能？只需改1行JS：

在 index.html 中找到 alert(...) 行，替换为：

fetch('https://api.webhook.site/your-key', {
  method: 'POST',
  body: JSON.stringify({items: cart, total: totalPrice}),
  headers: {'Content-Type': 'application/json'}
})

然后访问 [webhook.site](https://webhook.site)，复制你的临时Webhook URL，粘贴进代码。每次下单，数据将实时出现在你的Webhook面板里——可用于接单、通知企业微信/飞书。

---

✅ 总结：你刚刚完成了什么？

这不是Demo，是真实生产力闭环。下期我们将教你怎么用同样方法，3小时做出「宠物寄养预约」「校园二手交易」两个小程序，打包卖给学校社团。

📌 行动建议：现在就打开Cursor，复制本教程的Prompt，跑一遍。遇到问题？来woshird.com社群发截图，我们AI助教秒回！

---

💡 小知识：微信小程序WebView加载H5的限制已在2024年大幅放宽，目前支持localStorage、fetch、Canvas、扫码（需额外配置），足够覆盖90%轻量业务场景。