从产品定位到功能落地，本文手把手教你用 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。建议分阶段、带约束：

我要做一款备婚主题微信小程序「婚策宝」，面向年轻情侣。

核心 Tab：发现 | 工具 | 发布 | 我的

功能：

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 核心流程

async function login(profile) {

const openid = await fetchOpenId(); // 调云函数 login

const userInfo = { openid, nickName, avatarUrl, loginAt };

wx.setStorageSync(‘user_info’, userInfo);

await usersDb.upsertUser(userInfo); // 同步到云数据库

return userInfo;

}

云开发未配置时的降级

若 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）

2.详情页：点赞按钮、评论输入框、评论列表

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.云开发控制台 → 云函数 → 测试，输入：

{ “ensureDemo”: true }

3.成功后 users 集合出现：

小程序内一键登录

config.js 设 enableTestLogin: true → 我的页 → 「 测试账号登录」。

正式发布前记得把 enableTestLogin 改为 false。

五、云开发完整配置清单

以下步骤需在 微信开发者工具 中手动完成（AI 无法代劳）。

Step 1：开通云开发

工具栏 「云开发」 → 创建环境（免费版够用）→ 记下 环境 ID。

Step 2：写入 config.js

module.exports = {

cloudEnvId: ‘cloud1-xxxxxxxx’, // 你的环境 ID

cloudImageDir: ‘wedding-notes/images’,

enableTestLogin: true // 正式版改 false

};

Step 3：部署云函数

每个云函数：右键 → 上传并部署：云端安装依赖。

Step 4：创建数据库集合

notes — 笔记主数据

users — 用户账号

Step 5：验证

详细步骤见项目内 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.2 requiredPrivateInfos 编译报错

wx.addPhoneCalendar 不能写进 requiredPrivateInfos，只在 permission 声明即可。

7.3 云函数「请选择云环境」

1.重新打开项目

2.点击 cloudfunctions 文件夹 → 选择云环境

3.确认 project.private.config.json 有 envId

7.4 login 成功但仍是 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、补文档。

附录：关键文件速查

【婚策宝】落地效果