如何用AI开发减肥记录小程序（附教程）

一、Cursor 开发减肥记录小程序详解

一）项目初始化明确自己的需求

1、技术栈

前端：JavaScript+WXML+WXSS

后端：为了简便开发，数据缓存在用户手机本地。

2、核心功能

收集用户的基本信息，例：身高、体重。

根据 BMI，自动给出合理的健康计划。

健康计划完成后可以打卡。

将数据保留在本地缓存。

二）梳理 Cursor 能看懂的业务逻辑

根据需求组织项目框架语句，确保 Cursor 可以听懂。

1、对上述核心功能进行总结

我们需要 3 个页面（首页+健康计划+我的）

首页是 BMI 显示、日历打卡、体重记录。

健康计划页面是 BMI、进度条、健康计划。

我的页面由 2 部分组成，基本信息、名词解释。

2、构建出大致的 UI

如果没有设计思路，建议上微信看看同类型小程序是怎么做的。

给大家一个好的建议。可以搜“体重管理”，会出来一大堆小程序，看哪个顺眼，直接拿去模仿。

3、组织 Cursor 语句

举例：

我要做一个微信小程序，小程序是一个体重管理小程序，可以通过 BMI 判断一个人的健康状况，并且给出合理的健康计划用于控制体重。

 

要求：

 

1）拥有三个导航页面；

2）第一个导航页面为首页，包含 BMI 展示、打卡日历和体重记录；

3）第二个导航页面为健康计划，包含 BMI 显示、进度条和健康计划；

4）第三个导航页面为我的，包含基本信息编辑和健康名词解释；

5）提供个性化的健康计划，且根据 BMI 的不同显示不同的计划。

注意：样式不需要着重描述，让 Cursor 自由发挥就行，Cursor 无法把握小程序的边界，要么太宽，要么太窄，最后免不了要用 Deepseek 优化样式，干脆不描述，还能提高效率。

建议：在选择大模型的时候最好用 Claude3.7 或者 Claude3.5，GPT 虽然生成的很快，但是效果不如 Claude。

三）基于业务逻辑开发对应页面

1、健康计划页面

这是小程序最为核心的功能，需要在这一步完善页面的逻辑和 UI 设计。

当前页面只有一个功能：根据 BMI 生成合理的健康计划，UI 设计可以参考同类型的小程序。

注意：Cursor 应该会在第一步就生成完三个页面并且功能也完善的差不多，但是 Cursor 会出现各种各样的毛病，例如：BMI 无法正确统一，健康计划没有进度条，打卡日历不能正确打卡，这就需要让 Cursor 重新生成。

组织 Cursor 语句，举例：

帮我完善该小程序的健康计划页面。

 

要求：

 

1）统一管理 BMI，BMI 是变化的，只要信息有所改变，所有 BMI 都需要一起改变；

2）只有健康计划进度 100%，才能打卡；

3）健康计划不是固定的，而是根据 BMI 的不同做出不同的改变；

4）页面最上方可以显示当前 BMI 信息。

2、  完善首页

首页 UI 设计很简单，主要功能两个：打卡、记录。

因为一次描述的太多效果不是很好，所以我们在这分两步操作，先完善打卡，再完善记录功能。

组织 Cursor 语句，举例：

帮我完善该小程序首页的打卡功能。

 

要求：

 

1）当健康计划进度 100%时，可以打卡，打卡后当前日历颜色加深；

2）健康计划应该存在总打卡天数和连续打卡，将数据缓存在本地；

3）其他功能不要改变，只针对打卡日历修改。

组织 Cursor 语句，举例：

帮我完善该小程序首页的体重记录功能。

 

要求：

 

1）右下角生成一个添加按钮，点击即可添加体重记录；

2）体重记录的体重一旦更新，会同步到所有的 BMI；

3）体重记录可以被删除，删除会弹出确认框；

4）如果是最新的体重记录删除，自动更新为下一条记录，如果只有一条体重记录，删除后不会有任何变化。

注意：要求一定要描述清楚，不然 Cursor 就会按照它的想法来做。

3、完善我的页面

我的页面的功能有两个：编辑个人信息、查看名词解释，还是分成两步进行描述。

组织 Cursor 语句，举例：

帮我完善该小程序的我的页面的个人信息。

 

1）个人信息在没有填写的时候，文本框里面有提示写什么；

2）只有身高和体重是必填项，并且填完后，自动更新 BMI；

3）性别和年龄全部做成选择的形式来区分选填项，性别为“男”“女”，年龄从 0-100，且从 30 开始浮动，而不是从 0 开始浮动；

组织 Cursor 语句，例：

帮我完善该小程序的我的页面的健康名词解释。

 

要求：

 

1）健康名词解释应该包含：BMI 指数、基础代谢、营养摄入、热量；

2）点击不同的名词跳到对应的页面，用页面加名称的形式显示不同的内容，不需要生成 4 个页面；

3）每个名词的解释都必须足够清晰；

到此，小程序的全部功能就完成了，但是还有一些细节需要改进。例：样式调整、bug 修复。这就需要第四步操作了。

四）为什么不用 Cursor 优化 UI

优化 UI 的要求不要太高，因为大家都不是 UI 设计师，所以把页面全部交给 Deepseek 优化就行

为什么不用 Cursor 呢？

前面我就提到了，Cursor 不太会设计小程序 UI，Cursor 可以把握上下边界，但是总是把握不好左右边界。

而且对于刚注册的初学者来说，可以节省使用次数。

所以我建议使用 Deepseek，虽然 Deepseek 也不是专业的，但是对于这样的小程序来说已经足够了。

1、使用 Deepseek 优化 UI

无脑操作即可，只需要复制粘贴。

例：直接将 WXML 和 WXSS 代码发给 Deepseek，要求：

1）颜色不变，只修改 WXSS，要符合一个正常页面的布局和大小；

2）仔细分析 WXML 和 WXSS 的对应关系。

注意：你需要发送一份完整的 WXML 和 WXSS 代码。一定要加上“只修改 WXSS”，不然的话，Deepseek 会先优化你的 WXML，再优化 WXSS，如果你把 WXML 也复制粘贴了，到时候你就会发现，项目跑不起来了。

我的输入：

帮我优化小程序的页面。

要求：

1、只修改wxss，符合正常页面的布局和大小；

2、请仔细分析WXML和WXSS的对应关系。

 

这是我的WXML文件

 

贴你的 wxss代码

Deepseek 生成完后，直接复制粘贴即可。

注意：每个页面都可以这么做，生成的结果直接复制粘贴就行。

2、报错的解决办法

你在使用 Cursor 的过程中一定会报错。之前我都是建议先将报错的信息和代码发给 Deepseek，再把 Deepseek 生成的错误原因发给 Cursor 解决。现在我认为当小程序的逻辑不多说时，直接用 Cursor 解决也没问题，而且更加高效。

例：为什么点击日历，会一直提示当前体重记录？

我的输入：不需要任何代码，只需要添加页面，将 pages 添加进去。

Cursor 的输出：

这是因为在日历组件的点击事件中触发了显示记录的逻辑。让我们修改一下代码，只在当天完成任务时才允许打卡，其他日期点击不做响应：

才允许打卡，其他日期点击不做响应：

// 在日历组件中修改 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 = `plan_${date}`;

  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 = `plan_${date}`;

  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、  进入火山引擎

火山引擎-你的AI云

2、搜索火山方舟

3、点击 API 接入

4、选择你想接入的大模型点击我已完成调试

5、 生成的下述代码即是可以直接使用的接口

6、接口测试，先用 Cursor 生成一个网页，看网页能否调通

提示词

curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \

-H "Content-Type: application/json" \

-H "Authorization: 替换成你的key" \

-d '{

    "model": "deepseek-v3-250324",

    "messages": [

      {"role": "system","content": "你是人工智能助手."},

      {"role": "user","content": "用户输入的问题"}

    ]

  }'

 

帮我在 health-plan.wxml 末尾，调用上述接口，用户输入的内容替换 content 字段“用户输入的问题”

7、将 Cursor 生成后的静态网页打开，输入问题，发现可以使用，接口无误

8、用 Cursor 在小程序中调用该接口，注意描述要具体到小程序的子页面

health-plan.wxml 是我要加 AI 功能的页面，提示词如下：

curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \

-H "Content-Type: application/json" \

-H "Authorization: 替换成你的key" \

-d '{

    "model": "deepseek-v3-250324",

    "messages": [

      {"role": "system","content": "你是人工智能助手."},

      {"role": "user","content": "用户输入的问题"}

    ]

  }'

 

帮我在 health-plan.wxml 末尾，调用上述接口，用户输入的内容替换content 字段“用户输入的问题”

9、接入后微信开发者工具如果没有任何反应，需要临时关闭域名检查

点击开发者工具右上角的详情，勾选本地设置中的不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书。

10、上述设置后微信开发者工具编译预览效果如下：

测试后发现 AI 回复的内容是 markdown 形式，直接渲染出来这种样式，有点丑

让 Cursor 重新优化：大家可以参考我这个提示词：

当用户输入健康问题后，系统会将问题嵌入到提示词中。

并要求 AI 以营养专家的身份回答，同时返回 HTML+CSS 格式的卡片。

返回的 HTML 内容会通过 rich-text 组件展示出来。

这里提供一个更好的提示词，让最终渲染出来的页面梗好看：

你是一名资深的营养专家，用户的问题是【BMI过高，经常熬夜】，请你进行认真解答，包括问题分析、解决方案、后续建议等。并帮我生成美观且响应式的HTML+CSS代码

 

## 技术要求

- 请使用HTML、TailwindCSS和少量必要的JavaScript

- 引用Tailwind CSS（v3.0+）通过CDN

- 页面需完全响应式，在移动设备和桌面端都能良好显示

 

## 图片资源

- 请使用https://picsum.photos/1920/1080?random=1作为图片展示填充

- 每个图片链接使用不同随机参数，保证图片不同

 

## 图标要求

- 使用Font Awesome或Material Icons等专业图标库 (通过CDN引用)

- 避免使用emoji作为图标替代品

 

## 设计风格

- 采用圆角布局

- 主题色调使用莫兰迪色系，避免强烈的视觉刺激，淡雅高级

- 增加留白、毛玻璃、半透明设计元素

11、发布上线接入 AI 功能的小程序，必须添加深度合成类目

12、服务类目选择深度合成-AI 问答的 2.2

13、回到火山引擎下载资质和订单合同，火山引擎要认证成和微信小程序主体一致的企业

14、需要下载两个文件，一个是合同管理中的证明文件

一个是订单合同

15、导出的这两个是 pdf 文档，要自行拼接成一张长图，小程序只支持图片，需要注意的是订单合同导出来的合同需要加盖你的公章鲜章，大白话就是要真实盖章才行，不然通过不了审核。

16、正式版要登录微信小程序管理后台，进入开发->开发设置->服务器域名，在 request 合法域名中添加 Cursor 给你的请求地址。

至此，小程序接入 AI 功能整个流程都完整的走了一遍

今天的分享就到这里啦 ，关注我后续更新更多AI知识🔍！