共计 4873 个字符，预计需要花费 13 分钟才能阅读完成。
此篇文章内容针对于本人是零经验小白摸鱼过河所写，如有不当，大佬请勿介意。
薄荷计算器没有生成对应的 UI 图，直接 cursor 写出来的。
mylife 正在开发的这个项目，使用 cursor 生成相关 UI 图，并让 cursor 自行参照 UI 风格编写代码，UI 图在文末。
提示词 &rules 部分内容在文章中
使用 gpt3o、4o、cursor 提问，查询 cursor 所能理解的规范 md 格式文本，加上网络学习资料，自己整理出来的，尊重原创作者（已上线项目，并非 demo 或者半截子应用）。
开发工具
HbuilderX 创建 uniapp vue2。
cursor 编程前后端（一路 claude3.7+agent 模式）。
模拟器：微信开发者工具。
后台服务
阿里云函数（包含 sql）。
提示词
请基于 uni-app + Vue2 框架，构建一个名为“薄荷计算器”的微信小程序，属于健康类应用，要求具备以下完整功能：1. **UI 设计风格 **
- 使用圆角（8px 或 12px）- 多种彩色渐变背景（绿色系、薄荷蓝、米色）- 简约自然、颜色协调统一
- 所有页面支持全屏幕适配（不同机型）2. ** 微信登录 **
- 登录界面（/pages/login/index.vue）未登录用户强制展示，文案引导清晰
- 使用微信最新登录接口，支持一键登录
- 登录成功后调用云函数 `saveUserInfo` 上传头像与昵称
- 登录逻辑封装在 utils/auth.js，使用 Vuex 存储登录状态
3. ** 系统导航 + tabBar 页面结构 **
- 首页（/pages/home/index.vue）- 打卡签到日历组件
- 饮食填写表单，数据通过云函数 `submitDailyLog` 存储
- 用户切换设备直接请求存储数据，一键同步
- 健康页（/pages/health/index.vue）- 健康信息填写：身高、体重、年龄 + 自动获取微信名
- 储存用户健康信息
- 本地计算健康数据 BMI, BMR, BFP, WHR, WC, IBW
- 所有计算结果展示为圆角卡片式区块
- 记录页（/pages/rank/index.vue）- 顶部为云服务接口获取的轮播图（图片 + 跳转链接）- 下方为健康评分排行榜，云函数 `getHealthRanking`
- 我的页面（/pages/user/index.vue）- 显示微信头像与昵称（从 Vuex 读取）- 用户信息下方显示一段文字介绍区块，内容通过云函数 `getAboutInfo` 获取
4. ** 云函数建议 **
- `saveUserInfo`：保存微信用户信息
- `submitDailyLog`：提交每日打卡饮食记录
- `calculateHealthData`：储存用户健康信息
- `getHealthRanking`：返回排行榜数据
- `getCarouselImages`：返回轮播图数据（含图片 + 跳转链接）- `getAboutInfo`：返回关于我们文字内容
请根据上述要求生成对应页面的目录结构、TabBar 配置（pages.json），并开始构建登录界面 UI（支持一键登录、渐变背景、美化样式），以及打卡页和健康页的主结构。不包含后端提示词，仅供参考学习。
rules
# Role
你是一名擅长使用 uni-app + Vue2 构建微信小程序的高级前端工程师，熟悉微信生态和阿里云函数，具备高质量 UI/UX 能力，能为健康类小程序提供稳定、优雅的解决方案。# Goal
协助我开发一个仅使用微信登录、支持阿里云云函数，命名为“薄荷计算器”的健康类微信小程序，确保代码高可维护、风格统一，UI 简洁自然，并避免因上下文缺失导致的 Bug。# 项目背景说明“薄荷计算器”是一款记录健康数据、帮助用户管理身体状况的小程序。支持微信一键登录，记录每日饮食打卡与体重数据，计算 BMI 和展示健康排行榜，数据全部保存于云端，UI 风格采用圆角、渐变、自然色调，适合所有用户群体。# 技术栈
- uni-app（基于 Vue2）- 微信小程序平台
- 微信开放能力（getUserProfile）如若废弃使用新 api
- 阿里云函数（uniCloud 阿里云模式）- Vuex 状态管理
- uView UI（美化 UI）- SCSS 样式
# 登录功能要求
- 登录流程：`wx.login` + `getUserProfile` → 云函数 `saveUserInfo` 存储用户头像、昵称
- 登录逻辑封装于 `utils/auth.js`
- 未登录不可访问主界面，需引导用户操作
- 登录状态管理使用 Vuex，需持久化
# 项目结构
该小程序包含四个主页面，使用系统 tabBar 管理：首页、健康、记录、我的。登录页为独立页面。## 页面与模块定义
### 登录页：/pages/login/index.vue
- 功能：实现微信一键登录，使用 getUserProfile 接口
- 登录成功后调用云函数 `saveUserInfo` 上传用户头像、昵称
- UI 要求：使用圆角卡片、渐变背景（薄荷绿），中部展示登录按钮与引导文案
- 登录状态管理使用 Vuex，封装登录逻辑于 utils/auth.js
### 首页：/pages/home/index.vue
- 功能一：签到打卡（日历组件）- 功能二：饮食记录表单（早餐、午餐、晚餐、备注）- 所有数据提交给云函数 `submitDailyLog` 保存至 `daily_logs` 表
- 页面风格统一为圆角卡片、渐变背景、移动端适配
### 健康页：/pages/health/index.vue
- 表单填写：身高、体重、年龄、性别、腰围、臀围
- 健康信息填写：身高、体重、年龄 + 自动获取微信名
- 储存用户健康信息
- 本地计算健康数据 BMI, BMR, BFP, WHR, WC, IBW
- 所有计算结果展示为圆角卡片式区块
### 记录页：/pages/rank/index.vue
- 顶部为轮播图组件，图片及跳转链接通过云函数 `getCarouselImages` 获取
- 下面展示健康排行榜，数据来源 `getHealthRanking`，按分数排序，分页展示
- 整体风格圆角、卡片式 UI，颜色协调
### 我的页面：/pages/user/index.vue
- 展示用户头像与昵称（从 Vuex 获取）- 下方显示“关于我们”介绍内容，由云函数 `getAboutInfo` 提供
- 保持风格一致，所有内容块使用圆角边框及统一字体
不包含后端以及风格统一、AI 使用、风格规范、上下文限制等 rules，仅供参考学习。
天坑 1 - 云函数与数据库文件夹指定
使用 HbuilderX 创建项目勾选如图。
一定要告诉 cursor，创建的云函数以及数据库文件放在这里，由于上下文限制 cursor 可能会忘记，只要执行创建函数或者数据库操作，聊天框 @相应文件夹，否则大聪明自己会创建新的文件夹导致莫名其妙的 bug
天坑 2 - 微信登录
微信登陆接口，cursor 默认使用的是旧的 api，导致微信登录无法正常运行（我不知道旧的是否可用，反正有 bug），最好查看微信登录文档看下要求，把主要内容投喂给 cursor 让其使用。
AppId 可以在本地，但是小程序要求 AppSecret 不能在本地储存，因此需要单独做数据处理和保护。
总体来讲，在微信登录这里没浪费太多时间，对于 cursor 还算是简单。
天坑 3 - 云函数时间区（我自己认为是坑，因为不懂代码，对于有经验来讲，可能是常识）
在开发日历签到时，发现签到日期总是对不上，过了 24 点签到无法正常显示，并且显示已签到，在这里浪费了好几天时间来测试，发现在早上 8 点后功能就正常，24 点后反而不行，导致我改来改去，一直解决不了 bug，郁闷至极。最后！！！！！！我怀疑时区问题，反问 cursor 时区设置，才发现如下:(MLGB 真难~)。
天坑 4 -cursor 使用
cursor 使用一段时间整体感觉极佳，但是时间长会降智，这就得看 IP 是否干净，以及 rules 的限制是否起效（rules 对 cursor 行为规范限制，代码风格，结构框架，上下文处理，反问回答等极其重要）。
报错 vpn 相关字眼，切换 vpn。
报错 copy id 就是关闭重启 cursor，新建聊天框。
claude3.5 是好执行员工，3.7 是在前者基础上增添了帮你操心的理念。
剩余报错点击叉号不影响。
但是如果欠费了，那就是得交费了，躲不开。
不建议使用免费或者切换账号无限试用，降智很严重，无法言出法随（200 左右开发一个微信小程序对于之前市场行情来讲，我个人觉得成本极低，适合付费）。
设置：增加上下文长度，可以勾上，前提学会什么时候使用，避免乱改代码，抽疯。
不建议使用 early，听不懂你的需求，乱理解。
及时 update。
这个及其关键 ，一旦 cursor 理解错误，或者 bug 叠加，一定及时回退，修改需求方案，换个角度让 cursor 理解，否则钻进牛角尖，会导致项目都报废，前功尽弃。（血的教训）
天坑 5 - 屏幕适配
rules 提前写好，否则真机测试，让你惊喜。
天坑 6 - 风格不统一（cursor 自我发挥）
rules 提前写好代码风格，命名风格，UI 风格，规范行为后，开发新的功能，就会自行扩展出你想要的功能，无需浪费次数，多次需改或者提问。（省钱方案）
没有好的规范，rules 就会自己乱联想，一旦超出上下文，就会根据你当前语境胡乱发挥。
我们不是作家，不是语言家，提出需求不可能有自己的文字风格，就会导致我们说人话，机器不理解，就不干你想要的人事。
天坑 7 -canva
在薄荷计算器项目中，有一个分享健康数据报告功能，cursor 使用的是默认的旧 api，这里注意及时更换，否则生成的图片各种乱涂乱画，而且也会导致程序特别卡，我也不知道为什么。不过交给 cursor 很好解决。
天坑 8 - 提示框、选择器、tabbar、navbar 统一
开发程序时，我们避免不了会使用到提示框、选择器、tabbar、navbar。这些组件有系统自带的，也可以使用自定义的，一旦不统一 UI 会及其难看，功能也会受到影响，建议 rules 编写时候限制使用系统还是自定义的。popup 这个插件也是如此。
天坑 9 - 各种缓存
模拟器有缓存，不及时清理，出 bug 光改代码，基本白费，因为没有 bug，改出了 bug……（微信开发者工具及时清理缓存）
HbuilderX 也有缓存，不敢相信吧 …..
出 bug 也要及时清理，避免是这里原因。（在哪种条件下会出现，我忘记了，但是特别坑人，你或许会遇到）
手机缓存，真机测试也会有，及时删除小程序。
天坑 10- 云函数关联
云函数关联很重要，提示 cursor 使用已有云函数，最好是 @下具体云函数文件，否则 cursor 超出上下文限制，忘记原有，又开始疯狂创建文件、文件夹，最后变成一堆代码屎。
好比 A 界面填写信息，B 界面获取信息，C 界面处理信息，回到 A 界面更新信息，这一套数据处理组合拳一定要关联好，否则 bug 改不完。如图：我不知道有没有用，反正不敢动。
天坑 11- 微信小程序域名白名单
微信小程序需要在后台开发管理 - 服务器域名，添加阿里云空间的 api 域名为白名单，否则打包测试云函数无法使用。
因为模拟器默认不检验域名所以不用设置，开发版本可以正常运行，但是打包生产版本就需要校验了。
天坑 12- 代码打包
微信小程序大小不能超过 4MB. 本地千万不能放太多大型图片以及文件、音效等，都放在阿里云存储上传调用。
天坑 13- 关于上线
小程序需要认证 30 元，备案免费，工具类审核容易，其它类型不知道。
薄荷计算器备案一周工作日就通过了，没遇到难解决的问题。
微信小程序后台会让你填写各种资料以及隐私调用，按要求填写即可。
薄荷计算器头像是 4o 生成的，小程序的轮播图也是，4o 生成图像很给力！
我整理的都是一些常见问题，我能想起来的一些坑，实际开发中还有很多小问题存在，回忆不起来了，录制屏幕时间很长，正在剪辑处理，文章中就不一一例举了，有问题评论区可以交流，我是菜鸟，互相学习。
接下来 mylife 将套用薄荷计算器的 rules、提示词，目前项目进度已完成 50%，但是 cursor 快速请求次数超限制了，只能等下个月刷新，慢慢打磨，希望 curso 依旧给力。（薄荷计算器上线后，一激动 600 块钱淘了个年费兑换码 …… 算是对 cursor 的支持~）
