AI开发「自习室预约」小程序：支持时间选择、余座提醒、微信通知
高校图书馆抢座难？自习室运营者苦于手工排班？今天，我们用AI做一个「全自动预约系统」——不买服务器、不写后端、不接数据库，纯前端实现高并发预约逻辑。
核心亮点：AI生成的日历组件支持滑动选择日期；余座数实时计算；预约成功后自动触发微信服务通知（测试模式）。
---
🧭 需求拆解（明确边界）
✅ 必做：
❌ 暂不做：
wx.requestSubscribeMessage 模拟授权）---
🧱 Step 1：让AI生成「动态日历+余座计算器」
在 Cursor 新建 prompt-studyroom.md，输入：
你是一个微信小程序性能优化专家。请生成一个「自习室预约」小程序，要求：
- 使用 miniprogram-datepicker（已内置）实现横滑日历选择
- 余座数据存于 app.js 的 globalData.seats = { '2024-06-01': { 'A区': 12, 'B区': 8 } }
- 时间格子用 flex 布局，每30分钟一格（9:00–22:00），点击变色表示已选
- 提交时校验：同一时段同一区不可重复预约（用 localstorage 模拟）
- 输出：pages/room-select/room-select.wxml/.wxss/.js + pages/time-select/time-select.wxml/.wxss/.js + 修改后的 app.js
执行后，AI将输出含日期渲染逻辑、时间格子状态管理、本地存储读写的完整代码。重点检查 time-select.js 中的 selectTime() 函数是否包含 wx.setStorageSync 写入逻辑。
---
📅 Step 2：植入「微信服务通知」能力
微信要求：发送模板消息必须用户主动授权。我们在 time-select.js 的提交按钮后加：
// 在 submitHandler 内部最后添加
wx.requestSubscribeMessage({
tmplIds: ['TEMPLATE_ID_HERE'], // AI会帮你生成测试用假ID
success(res) {
if (res['TEMPLATE_ID_HERE'] === 'accept') {
wx.showToast({ title: '预约成功！通知已开启' });
}
}
});
如何获得真实模板ID？→ 让AI帮你写：「生成一段Prompt，用于向Claude Code索取微信服务通知模板ID申请话术和后台配置步骤」。它会给你完整指引。
---
🧪 Step 3：真机测试关键路径
room-select.js 中 getSeatsForDate() 是否正确读取 app.globalData.seatstime-select.wxml 中 wx:for 循环是否绑定 timeSlots 数组💡 修复技巧：若时间格子不响应，检查 bindtap="handleTimeClick" 是否写在 view 标签内，且 handleTimeClick 函数是否在 Page({}) 的 methods 中定义（AI已生成）。
---
💼 商业化封装建议
app.js 中的 seats 数据）> 🌟 真实反馈：深圳某连锁自习室采购Pro版后，预约投诉下降70%，因系统自动释放超时未核销座位。
记住：客户买的不是代码，是「降低运营成本」的结果。而AI，是你交付结果的加速器。
延伸学习：woshird.com/miniapp-patterns —— 收录21种高频小程序Prompt模式