从产品定位到功能落地，本文手把手教你用AI编程助手从零搭建一款备婚主题微信小程序。涵盖笔记社区、预算工具、电商导流三大模块，详细拆解分阶段实施路线与关键Prompt示例，即使零后端经验也能跟着做出来。
思考你要做的是什么
1.1产品定位
婚策宝是一款面向正在备婚的年轻情侣的小程序，核心价值是：
看：浏览真实备婚经验笔记（婚纱照拍摄推荐、婚戒定制、喜糖diy、婚房酒店布置等）
写：发布自己的备婚攻略，附带好物链接
买：识别淘宝/1688/京东/拼多多链接，一键跳转下单
算：预算计算器、婚礼倒计时、Checklist、AI备婚顾问
一句话：备婚经验社区+实用工具箱+电商导流
1.2为什么适合AI新手？
你不需要会写后端，也不需要设计复杂架构——会用自然语言描述需求+会点微信开发者工具，就能跟着本文走完全程。
二、前期需要的准备工作
2.1账号与工具
1.微信小程序账号
在微信公众平台注册（个人主体即可）。注册账号拿AppID：mp.weixin.qq.com→立即注册→小程序。个人主体0元、凭身份证即可；企业/个体户需微信认证（企业300元/次，个体户常有30元优惠，以支付页为准）。
2.微信开发者工具
下载地址：developers.weixin.qq.com/miniprogram/dev/devtools/download.html
装微信开发者工具：官方免费，新建空白项目、填入AppID，记住这个文件夹作为AI的工作目录。
3.Cursor（或其他AI编程助手）
用于生成、修改、调试代码。本文以Cursor为例。
4.（可选）淘宝客/京东联盟账号
若要做商品返利转链，需另行申请。
2.2给AI的第一条Prompt示例
不要一上来就说「帮我写个小程序」，先让它以产品经理身份分批提问，产出Markdown需求文档，再删减成MVP。建议分阶段、带约束：
我要做一款备婚主题微信小程序「婚策宝」，面向年轻情侣。
功能：
1.发现页：分类浏览备婚笔记，支持同城筛选
2.发布页：写经验、上传图片、添加商品链接
3.详情页：评论、点赞、跳转电商
4.工具页：预算计算器、婚礼倒计时、AI顾问、Checklist（待办清单）
5.我的页：微信登录、我的发布/收藏
技术：原生小程序+微信云开发
设计风格：玫瑰粉#E85D75，浪漫卡片风
请先给出项目目录结构和app.json配置。
原则：一次只做一个模块，做完再进下一个。
三、项目的整体架构梳理
3.1目录结构
wedding-prep-miniprogram/
├──app.js/app.json/app.wxss#入口与全局样式
├──config.js#云环境ID、联盟、AI配置
├──pages/
│├──index/#发现（含同城）
│├──tools/#工具箱首页
│├──budget/#预算计算器
│├──countdown/#婚礼倒计时
│├──advisor/#AI备婚顾问
│├──checklist/#Checklist
│├──detail/#笔记详情
│├──publish/#发布笔记
│├──mine/#个人中心
│└──search/#搜索
├──components/
│├──note-card/#笔记卡片
│└──product-item/#商品条目（含返利标识）
├──utils/#业务逻辑层
├──cloudfunctions/#云函数
├──data/#模拟数据、模板、知识库
└──assets/icons/#TabBar图标
3.2技术选型说明
3.3四个Tab的信息流
发现页──→笔记详情──→商品跳转（淘宝/京东/拼多多）
↑│
└────搜索/同城筛选←──────┘
发布页──→云数据库notes──→好友分享可读
工具页──→预算/倒计时/AI/Checklist
我的页──→登录/收藏/设置城市/测试账号
四、分阶段实施路线分享
阶段0：创建空项目
1.微信开发者工具→新建小程序项目
2.选择你的AppID，目录指向wedding-prep-miniprogram
3.让AI生成app.json的pages和tabBar配置
4.编译运行，确认四个Tab能切换
验收标准：模拟器里能看到4个Tab，页面空白但无报错。
阶段1：笔记功能MVP
让AI做什么
1.定义笔记数据结构（utils/types.js）
2.写5条模拟数据（data/mock-notes.js）
3.做note-card组件+发现页列表
4.做详情页+发布页（先纯文字，无图片）
关键数据结构示例
//一条笔记大致包含
{
id:‘note_001’,
title:‘上海婚纱照避坑指南’,
content:‘…’,
category:‘婚纱照’,
authorId:‘user_xxx’,
authorName:‘新娘小美’,
city:‘上海’,
tags:[‘外景’,‘预算’],
products:[{name:‘…,url:‘…’,platform:‘taobao’}],
coverImage:”,
images:[],
createdAt:‘2026-01-01T00:00:00.000Z’
}
给AI的Prompt
请实现发现页：从mock-notes读取数据，按分类Tab筛选，
用note-card组件展示封面、标题、作者、分类标签。
点击卡片跳转detail页。
验收标准：能浏览、能看详情、能发布新笔记（先存本地Storage）。
阶段2：登录与用户体系
微信小程序的「账号」是什么？
没有用户名密码。账号=微信openid，通过wx.login+云函数获取。
实现步骤
1.utils/auth.js：封装login、getCurrentUser、logout
2.云函数login：返回OPENID
3.我的页：头像昵称填写+登录按钮
//auth.js核心流程
asyncfunctionlogin(profile){
constopenid=awaitfetchOpenId();//调云函数login
constuserInfo={openid,nickName,avatarUrl,loginAt};
wx.setStorageSync(‘user_info’,userInfo);
awaitusersDb.upsertUser(userInfo);//同步到云数据库
returnuserInfo;
}
云开发未配置时的降级
若config.js里cloudEnvId为空，自动生成local_xxx本地ID，不影响开发调试。
验收标准：我的页能登录，发布笔记时带上authorId。
阶段3：图片上传+云存储
1.utils/image.js：选择图片→上传云存储→返回fileID
2.发布页支持封面+最多9张图
3.云存储目录：wedding-notes/images/
给AI的Prompt：
发布页增加图片上传：chooseMedia选图，开通云开发时uploadFile到
config.cloudImageDir，否则wx.saveFile本地持久化。
验收标准：云开发控制台→存储里能看到上传的图片。
阶段4：评论、点赞、收藏
1.utils/social.js：评论列表、点赞状态（初期可用本地Storage）
3.未登录时requireLogin()弹窗引导去「我的」
注意：评论/点赞后续可迁云数据库，MVP阶段本地存储足够验证产品。
阶段5：电商链接识别与跳转
小程序不能随意打开外链
策略：识别平台→跳转对应小程序→失败则复制链接
1.utils/platform.js：正则识别淘宝/1688/京东/拼多多
2.utils/affiliate.js：联盟转链（可选）
3.product-item组件：展示商品名、平台、返利标识
上线前必做
阶段6：工具箱四大模块
婚礼倒计时+系统日历
使用wx.addPhoneCalendar同步节点到手机日历。
踩坑记录：addPhoneCalendar不能写在app.json的requiredPrivateInfos里，否则会编译报错。正确做法是在permission里声明：
“permission”:{
“scope.addPhoneCalendar”:{
“desc”:“用于将备婚重要节点同步到手机系统日历并设置提醒”
}
}
阶段7：云数据库迁移
为什么要迁云数据库？
本地Storage只有你自己能看。好友打开分享链接会显示「笔记不存在」。
迁到云数据库后，设置read:true，所有人可读。
实施步骤
1.创建utils/notes-db.js封装增删改查
2.云开发控制台创建notes集合
3.配置权限规则：
{
“read”:true,
“create”:“auth.openid!=null”,
“update”:“doc.authorId==auth.openid”,
“delete”:“doc.authorId==auth.openid”
}
4.创建索引：createdAt降序（可选，有降级逻辑）
5.app.js启动时notesDb.init()+fetchAll()
本地数据自动迁移
首次连上云库时，把本机已发布的笔记（非mock）自动上传，无需手动操作。
验收标准：
1.发布笔记→云控制台notes集合有记录
2.分享给好友→好友能正常打开详情
阶段8：同城推荐
1.utils/location.js：获取/设置用户城市
2.发现页增加「同城」筛选
3.发布页、我的页可设置城市
4.笔记带city字段
阶段9：测试账号体系
微信小程序没有传统后台「建账号」，但QA需要固定测试身份。
方案
1.云数据库users集合
2.云函数createTestUser：后台创建测试用户
3.utils/users-db.js：用户云端读写
4.我的页「测试账号登录」按钮（config.enableTestLogin控制）
后台创建默认测试号
1.部署云函数createTestUser
2.云开发控制台→云函数→测试，输入：
3.成功后users集合出现：
小程序内一键登录
config.js设enableTestLogin:true→我的页→「测试账号登录」。
正式发布前记得把enableTestLogin改为false。
五、云开发完整配置清单
以下步骤需在微信开发者工具中手动完成（AI无法代劳）。
Step1：开通云开发
工具栏「云开发」→创建环境（免费版够用）→记下环境ID。
Step2：写入config.js
module.exports={
cloudEnvId:‘cloud1-xxxxxxxx’,//你的环境ID
cloudImageDir:‘wedding-notes/images’,
enableTestLogin:true//正式版改false
};
Step3：部署云函数
每个云函数：右键→上传并部署：云端安装依赖。
Step4：创建数据库集合
notes—笔记主数据
users—用户账号
Step5：验证
详细步骤见项目内CLOUD_SETUP.md。
六、用Cursor高效协作的技巧
6.1好的Prompt结构
[背景]我在做婚策宝小程序，已完成发现页和本地笔记存储。
[目标]把笔记迁到云数据库，支持好友分享可读。
[约束]保留本地Storage降级；不引入第三方框架。
[参考]utils/notes-db.js已有雏形（如有）
[验收]发布笔记后云控制台能看到记录；好友打开分享链接正常。
6.2常见指令
「只改xxx文件，不要动其他模块」
「匹配现有代码风格和命名」
「给出CLOUD_SETUP需要手动操作的步骤」
「这个报错怎么修：requiredPrivateInfos相关」
6.3不要指望AI一次做完
推荐顺序：结构→单页→联调→上云→修bug。
每完成一阶段就在开发者工具里编译验证，再把报错贴给AI。
七、实践踩坑与解决方案
7.1体验版分享看不到笔记
7.2requiredPrivateInfos编译报错
wx.addPhoneCalendar不能写进requiredPrivateInfos，只在permission声明即可。
7.3云函数「请选择云环境」
1.重新打开项目
2.点击cloudfunctions文件夹→选择云环境
3.确认project.private.config.json有envId
7.4login成功但仍是local_前缀ID
检查config.js的cloudEnvId是否与云环境完全一致，并重新编译（不是只保存文件）。
7.5电商跳转失败
小程序跳转需白名单；失败时走「复制链接」兜底，这是正常设计。
7.6其他
备案短信24小时生死线：工信部12381短信收到后须在24小时内到beian.miit.gov.cn核验，超时自动驳回.
个人主体做不了交易：不能开微信支付，电商、招生培训、医疗、餐饮等类目直接驳回；服务类目必须与实际功能一致，这是审核被拒的第一大原因。
八、设计规范实例
让AI生成页面时说：「请使用项目app.wxss中的CSS变量，保持婚礼浪漫风格」。
九、上线前Checklist
替换为自己的AppID
config.js填入正确cloudEnvId
部署全部云函数
创建notes、users集合并配置权限
enableTestLogin:false
配置电商小程序跳转白名单
体验版邀请测试用户验证分享链路
提交微信审核（个人主体注意类目选择）
十、后续可迭代方向规划
十一、总结
清晰产品描述（给AI的第一条Prompt）
↓
分模块迭代（发现→发布→登录→工具→上云）
↓
每步编译验证（开发者工具+真机预览）
↓
云开发打通（数据库+存储+云函数）
↓
分享/体验/测试账号验证
↓
上线前Checklist→提交审核
婚策宝这类产品不需要高深技术，需要的是：
1.把需求拆小—一次只让AI做一个页面或一个util
2.会描述验收标准—「好友分享能打开」比「做好分享」有用十倍
3.接受手动步骤—云开发开通、云函数部署、体验成员，必须你亲手点
4.保留降级方案—云未配置时本地也能跑，开发体验更好
用Cursor做小程序，本质上是「产品经理+AI工程师」的组合——你负责思考做什么、测试能不能用，AI负责写代码、改bug、补文档。
附录：关键文件速查
[婚策宝]落地效果