零代码开发微信小程序实战记录：OOTD 天气穿搭小程序
大概是思路是用cursor来写html页面对应需求的ui图。然后逐步转成小程序。最后用扣子去自定义一些需求链路。
项目概述
项目名称：OOTD 天气穿搭小程序
开发时间：2025年12月
开发方式：使用 Cursor AI 助手，全程通过对话完成开发
技术栈：微信小程序原生开发 + Node.js/Express 后端 + Coze AI API
核心功能
- 实时天气查询和7天预报
- AI 智能穿搭推荐
- 个性化用户设置（城市、性别、个人描述）
- 穿搭统计（生成次数、最爱风格、连续天数）
- 微信登录集成
扣子开发
- 扣子上去实现请求当前天气数据
- 根据用户的设定生成提示词并且再传给ai生图
- 扣子token接入
开发过程 Q&A
阶段一：原型设计
Q1: 我需要打造一个实用的天气+OOTD的小程序，包含两个Tab（OOTD和我的），OOTD页面需要显示今日天气、7天预报、今日穿搭风格卡片（可选择风格），选择后弹出AI生成的穿搭建议和3张穿搭图片轮播。我的页面需要显示城市、性别、个人描述，首次进入需要引导流程。请提供完整的HTML代码实现。
A1: 创建了完整的HTML原型文件（prototype/ootd.html、prototype/profile.html、prototype/onboarding.html、prototype/ootd-popup.html），使用 Tailwind CSS 实现现代化UI设计，遵循 iOS 设计规范，适配 iPhone 16 Pro Max 尺寸。
阶段二：小程序页面开发
Q2: 请使用 ootd.html 去改造 index.js、index.wxml、index.wxss，我希望样式保持一致，icon先使用emoji。
A2: 将 HTML 原型转换为小程序代码，创建了 miniprogram/pages/index/ 目录下的三个文件，使用 WXML/WXSS 实现相同样式，图标使用 emoji 替代。
Q3: 请使用 profile.html 去实现我的页面，要求：1.在 pages 下创建profile文件夹，并生成对应的小程序代码 2.样式尽可能保持100%的一致 3.并添加两个页面之间的跳转功能。
A3: 创建了 miniprogram/pages/profile/ 目录，实现了完整的"我的"页面，样式100%还原HTML原型，在 app.json 中配置了 tabBar 实现页面跳转。
阶段三：自定义导航栏
Q4: 我认为生成的下面ootd和我的按钮太朴素了，你根据我们的风格设计一下这个按钮并且替换。
A4: 创建了自定义底部导航栏组件 miniprogram/custom-tab-bar/，实现了玻璃拟态效果、渐变图标、脉冲发光动画和底部指示器。
Q5: 现在设计出来的图标还不错，但是太大了，挡住了下面的主体内容。
A5: 调整了自定义导航栏尺寸，高度改为 120rpx，图标 56rpx，文字 20rpx，并调整了页面内容的 padding-bottom 避免被遮挡。
Q6: 请你查看这个页面，底部的tabbar盖住了退出登录。另外这个【我的】页面没有修改自己资料的入口。
A6: 调整了 profile 页面的 padding-bottom，移除了"编辑资料"按钮，将城市、性别、个人描述设置为可点击，点击后弹出编辑对话框。
阶段四：引导页逻辑
Q7: 现在我们增加页面逻辑：1.如果首页进来的时候，目前在本地存储中没有城市、性别、个人特性，那么需要自动跳转到一个引导页面。该引导页面的样式参考 onboarding.html，保持100%还原 2.引导页面的文字填写后，需要保存到本地。并且在 profile.wxml 中使用 3. profile.wxss 我的页面修改编辑信息后，也需要存储到本地。
A7:
- 创建了
miniprogram/pages/onboarding/引导页面，样式100%还原 - 在
index.js中添加了checkOnboardingRequired()方法，检查本地存储并自动跳转 - 实现了数据保存到本地存储（
wx.setStorageSync）和读取（wx.getStorageSync） - profile 页面编辑后也保存到本地存储
阶段五：OOTD 弹窗组件
Q8: 请你根据 ootd-popup.html 生成ootd的popup: 1.在 index.wxml 中生成今日OOTD后，在当前页面弹出popup 2.对应的popup和 ootd-popup.html 样式保持一致 3.该组件请你在components下生成并且引入。
A8: 创建了 miniprogram/components/ootd-popup/ 组件，实现了轮播图、AI建议展示、加载状态和操作按钮，在 index.wxml 中引入并使用。
阶段六：后端开发
Q9: 好了，请你根据图片的要求去开发后端部分。doc.md 在servers/ 目录下初始化express的后端，并且引用.env中的环境变量 COZE_TOKEN。
A9:
- 创建了
server/目录，初始化 Express 项目 - 实现了
/api/health、/api/weather、/api/ootd三个接口 - 使用
dotenv管理环境变量，从.env读取COZE_TOKEN - 配置了 CORS 支持小程序跨域请求
阶段七：真机调试问题修复
Q10: 我刚刚在微信小程序上测试了一下，没有获取到天气信息呢。
A10:
- 在
project.config.json中添加了"urlCheck": false - 将
API_BASE_URL从localhost改为局域网IP（http://172.16.140.195:3001） - 修改
server/index.js监听所有网络接口（app.listen(PORT, '0.0.0.0')） - 提示用户在微信开发者工具中开启"不校验合法域名"
Q11: 现在天气数据有了，但是点击生成生成OOTD没有生成对应条件下的今日推荐呢。
A11: 实现了 fetchOotdData() 方法调用后端 OOTD API，更新了 ootd-popup 组件显示返回的建议和图片，添加了加载状态处理。
阶段八：UI 优化
Q12: 现在的生成效果实际感觉不是很居中。左边边框有空隙，但是右边没有。编辑资料感觉可以取消这个按钮。直接点击上方的城市，性别可以跳转修改框。还有下面的个人描述，点击进入修改页面比较合适。
A12:
- 统一调整了页面
padding为 32rpx - 移除了"编辑资料"按钮
- 将城市、性别标签设置为可点击，触发编辑对话框
- 将个人描述卡片设置为可点击，触发编辑页面
阶段九：统计功能
Q13: 效果还不错，我们继续完成穿搭统计的模块。变成实际能记录。你完成以后告诉我你怎么实现的。
A13:
- 创建了
miniprogram/utils/stats.js工具文件 - 实现了
recordGenerate()记录生成次数和风格 - 实现了
getStats()获取统计数据 - 实现了
getFavoriteStyle()计算最爱风格 - 实现了
getStatsSummary()获取统计摘要（包括连续天数） - 在
profile.js中集成显示统计数据 - 使用本地存储（
wx.setStorageSync）持久化数据
阶段十：微信登录集成
Q14: 最后我想引入读取微信信息登录小程序。获取微信头像，微信ID来作为我们小程序的头像和id。
A14:
- 在
profile.wxml和onboarding.wxml中使用open-type="chooseAvatar"获取头像 - 使用
type="nickname"的 input 组件获取昵称 - 实现了
onChooseAvatar和onNicknameInput方法处理数据 - 将头像和昵称保存到本地存储
Q15: 现在能使用微信昵称了，但是头像太奇怪了。另外我们下面的【消息通知】应该不需要。【关于我们】点击显示：袁小陵给王鹏鑫说，每天不知道穿什么，于是有个这个小程序。
A15:
- 调整了头像显示样式，移除了多余的边框和背景
- 移除了"消息通知"设置项
- 修改"关于我们"点击事件，显示指定的文案
Q16: 这个头像还是很奇怪，里面是对的。但是明显是一个椭圆形里面是头像，不需要这个椭圆形。
A16: 调整了 .avatar-btn 和 .avatar-image 的样式，移除了椭圆背景，确保头像显示为完美圆形。
Q17: 现在没问题了，但是明显性别，昵称离头像太远了。请你用大多数正常的体验去修改这个布局。
A17: 调整了 .user-info-row 的 gap 为 24rpx，调整了头像容器和性别徽章的定位，使布局更紧凑。
Q18: 还是不对啊，你看头像离性别昵称很远。性别应该在头像的右下角吧，昵称那里应该也紧贴头像才对。
A18:
- 调整了
.avatar-wrapper为固定宽高（120rpx）和position: relative - 将
.gender-badge设置为绝对定位，bottom: 0、right: 0，位于头像右下角 - 调整了昵称与头像的间距
Q19: 昵称靠头像有点太近了，再修改下间距。
A19: 微调了昵称与头像之间的间距，使布局更平衡。
阶段十一：引导页布局修复
Q20: 这个第一次进入的引导页面不对，昵称是居中的，但是上面的头像和修改头像没有居中。很奇怪。
A20: 在 onboarding.wxml 中添加了 avatar-container 容器，使用 display: flex 和 justify-content: center 居中头像。
Q21: 还是不对呢，你看看图片里的效果。
A21: 调整了 .avatar-choose-btn 和 .avatar-edit-badge 的样式，确保头像和编辑图标正确居中。
Q22: 依然布局不对，刚开始设置的时候设置头像应该必须居中。
A22: 重新调整了头像容器的布局结构，确保头像完全居中。
Q23: 头像右边的设置图标离居中的头像太远了。
A23: 重构了头像部分的 WXML 结构，将编辑徽章放在 avatar-wrapper 内，使用绝对定位相对于头像容器，确保编辑图标紧贴头像右下角。
阶段十二：部署准备
Q24: 好了，我现在准备在真机上调试。目前真机上有获取不到天气信息，我看了下日志。真机上 http://localhost:3001/api/weather 是否无效。
A24: 确认了真机上 localhost 无效的问题，已在之前修复（Q10），提醒用户检查配置是否正确。
Q25: 在本地局域网是可以了，我打算部署到云服务器上，应该怎么做呢。
A25:
- 创建了
DEPLOY.md完整部署文档 - 创建了
server/deploy.sh一键部署脚本 - 创建了
server/ecosystem.config.jsPM2 配置文件 - 创建了
server/env.example环境变量模板 - 创建了
miniprogram/config.js环境配置文件 - 更新了
index.js使用配置文件中的 API 地址
Q26: 将该项目上传至我的git仓库吧。
A26:
- 创建了
.gitignore文件，忽略敏感文件 - 创建了
README.md项目说明文档 - 初始化了 Git 仓库并提交了所有代码
- 提供了 GitHub/Gitee 上传指南
关键经验总结
1. HTML 原型先行
先设计 HTML 原型，再转换为小程序代码，可以快速验证 UI 效果。
2. 组件化开发
将弹窗、骨架屏等复用功能封装为组件，提高代码复用性。
3. 本地存储管理
使用 wx.setStorageSync 和 wx.getStorageSync 管理用户数据和统计数据。
4. 真机调试配置
- 必须使用局域网 IP，不能使用
localhost - 需要在
project.config.json中设置urlCheck: false - 需要在微信开发者工具中开启"不校验合法域名"
5. 后端服务配置
- Express 服务需要监听
0.0.0.0才能被局域网访问 - 使用
dotenv管理敏感的环境变量 - 使用 PM2 管理生产环境进程
6. 微信小程序 API
- 使用
open-type="chooseAvatar"获取头像 - 使用
type="nickname"的 input 获取昵称 - 使用
bindchange而不是bindblur捕获微信提供的昵称
7. 样式调试技巧
- 使用
rpx单位实现响应式布局 - 使用 Flexbox 和绝对定位精确控制布局
- 通过调整
gap、padding、margin微调间距
8. 部署流程
- 开发环境：使用
localhost或局域网 IP - 测试环境：使用局域网 IP
- 生产环境：使用 HTTPS 域名（微信小程序要求）
参考资源
- 微信小程序官方文档
- Coze AI 平台
- Express.js 文档
- PM2 文档
下次开发小程序的快速检查清单
代码地址： https://github.com/twh233/ootd