AI 开发减肥记录小程序（2700用户）

AI 开发减肥记录小程序（2700用户） AI 开发减肥记录小程序（2700用户） Modified July 20, 2025 而且对于刚注册的初学者来说，可以节省使用次数。 所以我建议使用 Deepseek，虽然 Deepseek 也不是专业的，但是对于这样的小程序来说已经足够了。 1、使用 Deepseek 优化 UI 无脑操作即可，只需要复制粘贴。 例：直接将 WXML 和 WXSS 代码发给 Deepseek，要求： 1）颜色不变，只修改 WXSS，要符合一个正常页面的布局和大小； 2）仔细分析 WXML 和 WXSS 的对应关系。 注意：你需要发送一份完整的 WXML 和 WXSS 代码。一定要加上“只修改 WXSS”，不然的话，Deepseek 会先优化你的 WXML，再优化 WXSS，如果你把 WXML 也复制粘贴了，到时候你就会发现，项目跑不起来了。 我的输入： Code block HTML Copy 帮我优化小程序的页面。 要求： 1、只修改wxss，符合正常页面的布局和大小； 2、请仔细分析WXML和WXSS的对应关系。 这是我的WXML文件 贴你的 wxss代码 Deepseek 生成完后，直接复制粘贴即可。 注意：每个页面都可以这么做，生成的结果直接复制粘贴就行。 2、报错的解决办法 你在使用 Cursor 的过程中一定会报错。之前我都是建议先将报错的信息和代码发给 Deepseek，再把 Deepseek 生成的错误原因发给 Cursor 解决。现在我认为当小程序的逻辑不多说时，直接用 Cursor 解决也没问题，而且更加高效。 例：为什么点击日历，会一直提示当前体重记录？ 我的输入：不需要任何代码，只需要添加页面，将 pages 添加进去。 Cursor 的输出： Code block JavaScript Copy 这是因为在日历组件的点击事件中触发了显示记录的逻辑。让我们修改一下代码，只在当天完成任务时才允许打卡，其他日期点击不做响应： 才允许打卡，其他日期点击不做响应： // 在日历组件中修改 selectDate 方法 selectDate(e) { const { date } = e.currentTarget.dataset; if (!date) return; // 只处理当天的点击事件 const today = this.formatDate(new Date()); if (date === today) { this.checkCanSignIn(date); } } // 检查是否可以打卡 checkCanSignIn(date) { // 获取当天健康计划完成情况 const planKey = ; const todayPlan = wx.getStorageSync(planKey) || []; // 检查是否所有任务都已完成 const allCompleted = todayPlan.length 0 && todayPlan.every(item = item.completed); if (allCompleted) { // 如果已完成所有任务，允许打卡 if (!this.properties.signedDays.includes(date)) { this.triggerEvent('onSignIn', { date }); } } else { // 如果未完成所有任务，提示用户 wx.showToast({ title: '请先完成今日健康计划', icon: 'none' }); } } 同时，修改首页的相关代码： // 删除或修改 onSelectDate 方法 onSelectDate(e) { // 不需要显示记录的逻辑，可以删除这个方法 // 或者只在特定情况下显示 console.log('日期选择:', e.detail.date); } // 保留打卡相关的方法 onSignIn(e) { const { date } = e.detail; const planKey = ; const todayPlan = wx.getStorageSync(planKey) || []; const allCompleted = todayPlan.length 0 && todayPlan.every(item = item.completed); if (allCompleted) { const signedDays = [...this.data.signedDays]; if (!signedDays.includes(date)) { signedDays.push(date); this.setData({ signedDays }); wx.setStorageSync('signedDays', signedDays); wx.showToast({ title: '打卡成功', icon: 'success' }); } } else { wx.showToast({ title: '请先完成今日健康计划', icon: 'none' }); } } 这样修改后： 只有点击当天的日期才会触发打卡检查 其他日期点击不会有任何响应 保留了打卡成功的提示 移除了显示历史记录的弹窗 这样的交互逻辑会更加清晰和合理。 将 Cursor 生成的修改代码全部应用即可。 只有到这一步，小程序才算是全部完工。 二、小程序接入 AI 功能全流程 只有企业类型的微信小程序才能接入 AI 功能，个人类型的不支持接入。 1、进入火山引擎 https://www.volcengine.com/ 2、搜索火山方舟 3、点击 API 接入 4、选择你想接入的大模型点击我已完成调试。 5、生成的下述代码即是可以直接使用的接口。 而且对于刚注册的初学者来说，可以节省使用次数。 所以我建议使用 Deepseek，虽然 Deepseek 也不是专业的，但是对于这样的小程序来说已经足够了。 1、使用 Deepseek 优化 UI 无脑操作即可，只需要复制粘贴。 例：直接将 WXML 和 WXSS 代码发给 Deepseek，要求： 1）颜色不变，只修改 WXSS，要符合一个正常页面的布局和大小； 2）仔细分析 WXML 和 WXSS 的对应关系。 注意：你需要发送一份完整的 WXML 和 WXSS 代码。一定要加上“只修改 WXSS”，不然的话，Deepseek 会先优化你的 WXML，再优化 WXSS，如果你把 WXML 也复制粘贴了，到时候你就会发现，项目跑不起来了。 我的输入： Deepseek 生成完后，直接复制粘贴即可。 注意：每个页面都可以这么做，生成的结果直接复制粘贴就行。 2、报错的解决办法 你在使用 Cursor 的过程中一定会报错。之前我都是建议先将报错的信息和代码发给 Deepseek，再把 Deepseek 生成的错误原因发给 Cursor 解决。现在我认为当小程序的逻辑不多说时，直接用 Cursor 解决也没问题，而且更加高效。 例：为什么点击日历，会一直提示当前体重记录？ 我的输入：不需要任何代码，只需要添加页面，将 pages 添加进去。 Cursor 的输出： 将 Cursor 生成的修改代码全部应用即可。 只有到这一步，小程序才算是全部完工。 二、小程序接入 AI 功能全流程 只有企业类型的微信小程序才能接入 AI 功能，个人类型的不支持接入。 1、进入火山引擎 https://www.volcengine.com/ 2、搜索火山方舟 3、点击 API 接入 4、选择你想接入的大模型点击我已完成调试。 5、生成的下述代码即是可以直接使用的接口。 优化后样式就没问题啦。 这里提供一个更好的提示词，让最终渲染出来的页面梗好看： 11、发布上线接入 AI 功能的小程序，必须添加深度合成类目。 12、服务类目选择深度合成 AI 问答的 2.2 13、回到火山引擎下载资质和订单合同，火山引擎要认证成和微信小程序主体一致的企业。 14、需要下载两个文件，一个是合同管理中的证明文件。 一个是订单合同。 15、导出的这两个是 pdf 文档，要自行拼接成一张长图，小程序只支持图片，需要注意的是订单合同导出来的合同需要加盖你的公章鲜章，大白话就是要真实盖章才行，不然通过不了审核。 16、正式版要登录微信小程序管理后台，进入开发 开发设置 服务器域名，在 request 合法域名中添加 Cursor 给你的请求地址。 至此，小程序接入 AI 功能整个流程都完整的走了一遍。 结尾： 这次通宵开发让我深刻体会到，行动才是对抗焦虑的解药。 代码尚青涩，但诚意滚烫——这大概就是技术人最浪漫的告白。 大家好，我是小林，今年明显感受到新陈代谢变慢，加上运动时间少，体重涨的很快，于是吃完饭回来第一件事我就在构思，必须要做一款减肥小程序，一是没有广告，二是用自己的小程序记录自己的减肥过程会更有动力。 昨晚通宵就在干这个事，减肥小程序第一个版本已经迭代好了，第二个版本也加上 AI 接口。 一、Cursor 开发减肥记录小程序详解 肝了一晚上第一版本迭代出来了，给大家分享下我的思路。 一）项目初始化明确自己的需求 1、技术栈 前端：JavaScript+WXML+WXSS 后端：为了简便开发，数据缓存在用户手机本地。 2、核心功能 收集用户的基本信息，例：身高、体重。 根据 BMI，自动给出合理的健康计划。 健康计划完成后可以打卡。 将数据保留在本地缓存。 二）梳理 Cursor 能看懂的业务逻辑 根据需求组织项目框架语句，确保 Cursor 可以听懂。 1、对上述核心功能进行总结 我们需要 3 个页面（首页+健康计划+我的） 首页是 BMI 显示、日历打卡、体重记录。 健康计划页面是 BMI、进度条、健康计划。 我的页面由 2 部分组成，基本信息、名词解释。 2、构建出大致的 UI 如果没有设计思路，建议上微信看看同类型小程序是怎么做的。 给大家一个好的建议。可以搜“体重管理”，会出来一大堆小程序，看哪个顺眼，直接拿去模仿。 3、组织 Cursor 语句 例： 注意：样式不需要着重描述，让 Cursor 自由发挥就行，Cursor 无法把握小程序的边界，要么太宽，要么太窄，最后免不了要用 Deepseek 优化样式，干脆不描述，还能提高效率。 建议：在选择大模型的时候最好用 Claude3.7 或者 Claude3.5，GPT 虽然生成的很快，但是效果不如 Claude。 三）基于业务逻辑开发对应页面 1、健康计划页面 这是小程序最为核心的功能，需要在这一步完善页面的逻辑和 UI 设计。 当前页面只有一个功能：根据 BMI 生成合理的健康计划，UI 设计可以参考同类型的小程序。 注意：Cursor 应该会在第一步就生成完三个页面并且功能也完善的差不多，但是 Cursor 会出现各种各样的毛病，例如：BMI 无法正确统一，健康计划没有进度条，打卡日历不能正确打卡，这就需要让 Cursor 重新生成。 组织 Cursor 语句，例： 2、完善首页 首页 UI 设计很简单，主要功能两个：打卡、记录。 因为一次描述的太多效果不是很好，所以我们在这分两步操作，先完善打卡，再完善记录功能。 组织 Cursor 语句，例： 组织 Cursor 语句，例： 注意：要求一定要描述清楚，不然 Cursor 就会按照它的想法来做。 3、完善我的页面 我的页面的功能有两个：编辑个人信息、查看名词解释，还是分成两步进行描述。 组织 Cursor 语句，例： 组织 Cursor 语句，例： 到此，小程序的全部功能就完成了，但是还有一些细节需要改进。例：样式调整、bug 修复。这就需要第四步操作了。 四）为什么不用 Cursor 优化 UI 优化 UI 的要求不要太高，因为大家都不是 UI 设计师，所以把页面全部交给 Deepseek 优化就行。 为什么不用 Cursor 呢？ 前面我就提到了，Cursor 不太会设计小程序 UI，Cursor 可以把握上下边界，但是总是把握不好左右边界。 6、接口测试，先用 Cursor 生成一个网页，看网页能否调通。 提示词如下： 7、将 Cursor 生成后的静态网页打开，输入问题，发现可以使用，接口无误！ 8、用 Cursor 在小程序中调用该接口，注意描述要具体到小程序的子页面。 health plan.wxml 是我要加 AI 功能的页面，提示词如下： 9、接入后微信开发者工具如果没有任何反应，需要临时关闭域名检查。 点击开发者工具右上角的详情，勾选本地设置中的不校验合法域名、web view（业务域名）、TLS 版本以及 HTTPS 证书。 10、上述设置后微信开发者工具编译预览效果如下： 测试后发现 AI 回复的内容是 markdown 形式，直接渲染出来这种样式，有点丑 让 Cursor 重新优化：大家可以参考我这个提示词：