编程实战：1小时开发微信小游戏《我的早餐店》——基于CloudBase AI Toolkit

原创于 2025-06-19 12:25:37 发布 · 1.1k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #人工智能 #腾讯云AI代码助手 #腾讯云 #AI代码远征季#小游戏 #游戏

开源项目专栏收录该内容

8 篇文章

订阅专栏

编程实战：1小时开发微信小游戏《我的早餐店》

一、引言
二、CloudBase AI ToolKit 概览
三、准备工作
四、开始开发
五、总结

一、引言

微信小游戏依托微信庞大的用户群体，无需下载安装，即点即玩，已成为大众休闲娱乐的重要方式。其轻量级的特性，使得用户可以随时随地体验游戏的乐趣，碎片化时间得到充分利用。从简单的益智游戏到复杂的策略游戏，微信小游戏涵盖了各种类型，满足了不同用户的娱乐需求，也为开发者提供了巨大的市场潜力。

传统游戏开发流程冗长复杂，涉及客户端开发、服务器搭建与维护、数据库管理等多个环节。开发者需要精通多门编程语言和技术，并投入大量时间和精力进行开发、测试和部署。这无疑提高了游戏开发的门槛，也增加了开发成本。

云开发的出现，极大地简化了游戏后端的开发流程。通过云开发提供的云函数、云数据库、云存储等服务，开发者无需关注服务器的搭建和维护，可以专注于游戏逻辑的实现。这不仅降低了开发门槛，也缩短了开发周期，使得个人开发者和小团队也能轻松打造高质量的游戏。

本文通过在短短1小时内，利用 CloudBase 及其 AI Toolkit，快速搭建一个具备核心玩法和 AI 特性的游戏原型。聚焦于核心功能的实现，并演示如何利用 AI 提升游戏开发体验。快速上手云开发和 AI Toolkit，体验高效的游戏开发流程。在有限的时间内，最大化地展现云开发和 AI 的强大能力，体验“快速启动”的开发乐趣。

二、CloudBase AI ToolKit 概览

在人工智能浪潮席卷软件开发领域的今天，腾讯云开发（CloudBase）倾力打造了 CloudBase AI ToolKit，这是一套专为AI编程工具设计的创新型解决方案。它通过深度整合AI提示词与 MCP 协议，并结合强大的云开发能力，旨在让软件开发过程变得前所未有的智能、高效与便捷。CloudBase AI ToolKit 是国内首个面向智能编程的后端服务，也是首个适配主流AI编程工具的Serverless开发平台，致力于解决AI辅助编程的“最后一公里”问题，实现从代码生成到应用上线及后期运维的全生命周期智能化管理。

当使用Cursor、VS Code GitHub Copilot、WindSurf、CodeBuddy、Augment Code等主流AI编程工具进行代码创作时，CloudBase AI ToolKit能够智能地理解开发意图，自动生成可直接部署的前后端应用代码、微信小程序代码，并无缝集成数据库服务。更令人振奋的是，它支持一键式发布，将创新成果即刻部署到腾讯云开发CloudBase平台，让想法迅速变为现实。

CloudBase AI ToolKit 凭借以下六大核心特性，为开发者构建了一个从开发到运维的智能化闭环：

特性	说明	优势
AI 原生	专为AI编程工具量身定制的规则库与领域知识。CloudBase AI ToolKit 内置了腾讯云开发平台的专有知识和操作工具，能够指导AI在特定场景下正确进行开发方式和资源部署。在生成代码时，AI能够借助ToolKit准确理解开发者的需求，并自动调用MCP工具完成云资源的创建、管理和在线调试。	确保AI生成的代码符合云开发平台的最佳实践，高效且稳定，极大提升开发质量。
一键部署	通过MCP自动化部署到腾讯云开发CloudBase平台。开发者只需用自然语言输入发布指令，AI即可调用内置工具将应用的前后端资源部署到云开发平台，并自动完成所有底层配置。	采用Serverless架构，无需开发者购买、配置和维护服务器，大幅简化部署流程，实现极速上线。
全栈应用支持	提供Web应用、微信小程序、数据库和后端服务一体化解决方案。支持现代化前端框架与静态托管，为微信小程序提供完整的云开发解决方案，并提供云数据库、无服务器函数（云函数）及云托管等后端服务。	覆盖多种应用形式，提供从前端到后端、从数据存储到业务逻辑的全面托管能力，降低开发复杂度。
智能修复	AI自动查看运行日志、诊断问题并提供修复建议。CloudBase AI ToolKit 能够持续监测后端系统的运行状况，实时记录函数调用、接口响应、资源负载和错误日志。一旦发现异常，AI会立即进行诊断并推送给开发者判断，随后自动修复。AI不仅能分析问题的根源，还能生成修复建议和补丁代码，开发者确认后即可部署更新，形成一个“发现-分析-修复-上线”的自动化闭环。	显著降低运维成本和故障排查时间，提升应用稳定性与可靠性。
极速体验	利用国内CDN（内容分发网络）加速。	确保用户访问速度更快，提供流畅的应用体验，尤其针对国内用户，优于海外平台。
知识检索	内置支持云开发、微信小程序等专业知识库。	通过智能向量检索技术，为AI提供精准的专业知识支持，提升AI生成代码和解决方案的准确性与专业性。

CloudBase AI ToolKit 将AI与云开发深度融合，提供以下三大核心能力：

不再局限于简单的代码片段生成，AI能够根据自然语言描述，自动生成完整的应用代码、架构设计以及后端配置，将开发者的创意迅速转化为可运行的应用程序。
提供与腾讯云开发平台的一键式无缝集成。开发者可以轻松接入云数据库、云函数、静态托管等丰富的云服务资源，无需繁琐的配置和管理。
极大缩短应用上线周期。通过自动化的打包、构建和部署流程，开发者可以在短短几分钟内完成全栈应用的上线，快速验证市场反馈。

CloudBase AI ToolKit 全面支持多种主流应用开发场景，满足不同开发需求：

Web 应用： 支持现代化前端框架（如React、Vue等）的开发与部署，并提供高效的静态托管服务，确保Web应用的快速加载和稳定运行。
微信小程序： 提供完整的云开发小程序解决方案，包括前端逻辑、后端服务、数据存储等，助力开发者快速构建和发布微信小程序。
后端服务： 强大的后端支持，包括高性能的云数据库、灵活的无服务器函数（云函数）以及便捷的云托管服务，为应用提供坚实可靠的后端支撑。

CloudBase AI ToolKit 致力于构建开放的AI开发生态，已广泛适配市面上主流的AI编程工具，让开发者可以在自己熟悉的IDE环境中享受智能开发的便利：

工具	支持平台
Cursor	独立 IDE
WindSurf	独立 IDE, VSCode、JetBrains 插件
CodeBuddy	VS Code、JetBrains、微信开发者工具插件
CLINE	VS Code 插件
GitHub Copilot	VS Code 插件
Trae	独立 IDE
通义灵码	独立 IDE，VS Code、 JetBrains插件
RooCode	VS Code插件
文心快码	VS Code、JetBrains插件
Augment Code	VS Code、JetBrains 插件

为什么选择 CloudBase AI ToolKit？

选择 CloudBase AI ToolKit，意味着选择了一种更智能、更高效、更具成本效益的开发模式：

依托腾讯云在国内的强大节点布局和CDN加速服务，确保应用部署后访问速度快，为国内用户提供卓越的体验，显著优于海外平台。
腾讯云开发作为Serverless领域的先行者，已获得超过330万开发者的信赖与选择，其成熟稳定的架构为您的应用保驾护航。
提供与腾讯云开发平台的一键式无缝集成。开发者可以轻松接入云数据库、云函数、静态托管等丰富的云服务资源，无需繁琐的配置和管理。
极大缩短应用上线周期。通过自动化的打包、构建和部署流程，开发者可以在短短几分钟内完成全栈应用的上线，快速验证市场反馈。

AI ToolKit 开源仓库地址：

三、准备工作

重点配置 VS Code、CodeBuddy AI 编程助手以及 腾讯云开发环境，实现开发流程的无缝衔接与智能化。

为什么选择 VS Code + CodeBuddy 这个配置？

选择 VS Code 作为核心开发工具，是因为它：

轻量级且功能强大：提供丰富的扩展生态系统，支持多种编程语言和框架。
高度可定制：可以根据自己的需求安装各种插件，优化开发体验。
主要是个人使用习惯了 。

而 CodeBuddy 则是腾讯专为开发者打造的 AI 编程助手，其核心优势在于：

强大的 AI 智能体功能 (Craft)：能够理解开发者的意图，提供代码补全、错误修复、代码生成、文档查询等智能辅助。
深度集成腾讯生态：与微信开发者工具、腾讯云开发等腾讯系产品深度融合，尤其适合小程序和云开发项目。

通过将 VS Code 的灵活性与 CodeBuddy 的 AI 智能以及 腾讯云开发 的后端能力相结合，获得一个从前端到后端、从开发到部署都高度智能化的全栈开发体验，尤其在腾讯生态内的项目开发中展现出无与伦比的优势。

3.1、安装 AI 开发工具

首先，需要安装核心的开发工具：VS Code 和 CodeBuddy 。

VS Code 是一个免费、开源且功能强大的代码编辑器，是现代Web和云开发的首选工具之一。安装过程非常简单，这里就简单介绍一下 步骤：

访问 VS Code 官方网站：https://code.visualstudio.com/。根据使用操作系统（Windows, macOS, Linux），点击对应的下载按钮。
我的环境是Windows，直接双击下载的 .exe 文件，按照安装向导的提示进行操作即可。建议勾选“添加到PATH”和“注册文件类型”等选项，以便后续使用方便。
装完成后，可以从应用程序列表或通过命令行启动 VS Code。

接下来是 CodeBuddy 的安装，CodeBuddy 是 VS Code 的一个扩展，为开发体验注入 AI 智能。

启动安装的 Visual Studio Code，在 VS Code 界面的左侧活动栏中，点击“扩展”图标（四个方块组成，其中一个方块分离的图标），或者按下 Ctrl+Shift+X。在扩展视图顶部的搜索框中输入 “CodeBuddy”。
找到由“腾讯”或相关官方发布的 CodeBuddy 插件，点击其右侧的“安装”按钮。安装完成后，“安装”按钮会变为“管理”或“禁用/卸载”。

这里顺便简单介绍一下其他开发环境的 CodeBuddy 安装方式：

JetBrains IDEs (IntelliJ IDEA, WebStorm 等)：在 JetBrains IDE 的插件市场中搜索 “CodeBuddy” 并安装。
微信开发者工具：CodeBuddy 也可以作为微信开发者工具的插件使用，需要从腾讯云官网或相关渠道下载并导入插件。具体步骤请参考腾讯云或微信开发者工具的官方文档。

3.2、开通腾讯云开发环境

腾讯云开发 (Tencent CloudBase，简称 TCB) 是一款云原生一体化开发平台，提供后端云服务，让开发者无需管理服务器，即可快速构建应用。

详细步骤：

访问腾讯云开发官方控制台：https://console.cloud.tencent.com/tcb。如果是首次使用腾讯云，需要先注册腾讯云账号并完成实名认证。如果已有账号，直接登录即可。
登录后，会看到云开发控制台界面。如果是第一次使用，系统会引导创建一个新的云开发环境。
点击“新建”按钮。会提供多种环境类型，例如“个人版”或“标准版”。新用户可以优先选择免费体验版。根据提示填写环境名称（例如：my-ai-dev-env）、选择地域（选择离最近的地域，以获得最佳访问速度）等信息。然后点击确认按钮，等待环境创建完成。这个过程可能需要几分钟。
获取环境ID：环境创建成功后，在控制台的环境列表中看到环境ID。这个ID在后续配置中会用到。

在这里插入图片描述

3.3、配置 MCP

为了让 CodeBuddy 能够与腾讯云开发环境进行交互，需要配置 CodeBuddy 的 MCP。MCP 允许 CodeBuddy 连接到不同的云服务，并利用其提供的能力。

详细步骤：

在 VS Code 界面的左侧活动栏中，点击 CodeBuddy 的图标。在 CodeBuddy 面板中，找到并点击“MCP”按钮。
在弹出的 MCP 配置界面中，点击右侧的“添加”按钮（一个加号图标）。

在弹出的配置编辑框中，粘贴以下 JSON 配置代码，粘贴完成后，点击保存按钮（或关闭配置窗口，系统通常会自动保存）。

{
    "mcpServers": {
    "cloudbase": {
        "command": "npx",
        "args": ["@cloudbase/cloudbase-mcp@latest"],
        "timeout": 120000,
        "env": {
            "CLOUDBASE_DEBUG": "true"
        }
    }
    }
}

MCP成功安装之后，就可以看到它提供的工具了：
在这里插入图片描述

完成以上步骤后，VS Code、CodeBuddy 和腾讯云开发环境就已经成功连接并配置完毕。现在，可以使用 CodeBuddy 的智能辅助功能，结合腾讯云开发的强大后端能力，开始智能开发之旅了！

四、开始开发

现在。可以对 Codebuddy说：

“登录云开发”

CodeBuddy 就会自动完成使用use_mcp_tool工具来调用 cloudbase 服务器的 login 工具。弹出登录腾讯云界面以及云开发的环境选择。
在这里插入图片描述

弹出的授权界面：
在这里插入图片描述

选择想要的云开发环境即可。
在这里插入图片描述

后续如需切换环境，可以说

“退出云开发”

CodeBuddy 就会清理本地的配置，后续可以再要求 AI 登录云开发来重新登录。

现在还有一步非常重要的步骤：下载 CloudBase AI 规则。 只需要对 CodeBuddy 说：

“在当前项目中下载云开发 AI 规则”

即可一键下载并补全 AI 编辑器规则配置到当前项目目录，无需手动操作。

CodeBuddy 的执行内容如下：


我需要使用cloudbase MCP服务器提供的downloadTemplate工具来下载AI规则模板。根据工具说明，rules模板包含了AI编辑器的配置文件，适合在已有项目中补充AI编辑器配置。

让我使用use_mcp_tool工具来调用cloudbase服务器的downloadTemplate工具，并指定下载rules模板。

Called MCP cloudbase (downloadTemplate)

我已经成功下载了AI编辑器配置模板，现在需要将这些文件从临时目录复制到当前项目目录中。

我可以使用execute_command工具来执行cp命令，将临时目录中的所有文件复制到当前工作目录。由于这涉及到文件操作，我需要设置requires_approval为true，让用户确认这个操作。

execute_command
cp -r /tmp/cloudbase-template-32UQWF/extracted/. /home/fly/workspace/MyBreakfastShop/

很好，我已经成功将AI编辑器配置模板文件从临时目录复制到了当前项目目录 `/home/fly/workspace/MyBreakfastShop/`。

现在让我检查一下文件是否已经正确复制到项目目录中。

list_files
/home/fly/workspace/MyBreakfastShop

很好，我可以看到所有的AI编辑器配置文件夹和文件已经成功复制到了当前项目目录中。这些文件夹包含了各种主流AI编辑器的配置，如：

1. .cursor - Cursor编辑器配置
2. .comate - Comate编辑器配置
3. .windsurf - WindSurf编辑器配置
4. .vscode - VS Code编辑器配置
5. .github - GitHub Copilot配置
6. .augment-guidelines - 通用AI增强指南
7. .clinerules - 命令行规则
8. .lingma - Lingma编辑器配置
9. .roo - Roo编辑器配置
10. .rules - 通用规则
11. .trae - Trae编辑器配置

4.1、开发需求详情

项目：《我的早餐店》微信小游戏开发

游戏类型：模拟经营 + 时间管理
核心玩法：玩家经营早餐店，通过快速制作餐点服务顾客赚取金币，升级店铺和食材。

场景构建:

2D横版布局：左侧厨房（煎锅/蒸笼/饮料机），右侧顾客队列，中间取餐台。
动态时间系统：游戏内1分钟=现实1秒，6:00 AM-10:00 AM为营业时间。

设备管理， 初始设备：煎锅（1个）、饮料机（1个）。可升级项：

煎锅 → 同时煎2个蛋（200金币）
饮料机 → 3秒出杯（300金币）
新增蒸笼设备（500金币解锁包子）

餐点制作系统：

食谱库（食谱库需逐步解锁）

餐点所需操作解锁条件
煎蛋拖蛋入锅→等待3秒→装盘初始
豆浆点饮料机→等待5秒→装杯初始
蛋饼煎蛋+拖面饼合并→装盘店铺Lv.2
制作规则：点击食材自动到对应设备（如鸡蛋到煎锅），进度条显示制作倒计时；餐点完成后自动移至取餐台，超时30秒则烧焦（扣金币）。

餐点	所需操作	解锁条件
煎蛋	拖蛋入锅→等待3秒→装盘	初始
豆浆	点饮料机→等待5秒→装杯	初始
蛋饼	煎蛋+拖面饼合并→装盘	店铺Lv.2

顾客系统：

生成逻辑：每10秒生成1名顾客（上限5人排队）
点餐流程：顾客气泡显示需求→ 玩家制作早餐 → 倒计时开始（20秒）
满意度机制：准时交付：+5金币 +1❤ 。超时：-2❤（❤归零后顾客离开并扣声誉）。
顾客类型
类型特点出现概率
上班族点餐快，忍耐低 60%
学生爱点套餐（蛋饼+豆浆） 30%
老人移动慢，忍耐高 10%

类型	特点	出现概率
上班族	点餐快，忍耐低	60%
学生	爱点套餐（蛋饼+豆浆）	30%
老人	移动慢，忍耐高	10%

经济系统：

货币体系 是金币：服务顾客获得（煎蛋+3，套餐+8）
升级体系 ：A[赚金币] --> B[升级设备] --> C[制作高级餐点] --> D[服务更多顾客]

任务与成就： 每服务30位顾客 → 奖励100金币

技术实现需求：

微信小游戏原生Canvas API + JavaScript
使用微信云开发（CloudBase）存储玩家数据
微信登录：获取用户头像/昵称显示在排行榜
社交功能：好友排行榜（按单日营收排序）

美术资源：

角色：Q版顾客（8种造型）、厨师动画（拖拽/烹饪动作）
场景：早餐店背景（晨光/雨天随机切换）、设备图标（煎锅/蒸笼像素风）
UI：金币/钻石图标（16×16），进度条样式（绿色正常/红色超时）

音效清单：

click.mp3（按钮点击）
sizzle.mp3（煎蛋声效）
cha-ching.mp3（金币获得）
angry_customer.mp3（顾客离开）

4.2、一键开发和部署

将上面的需求粘贴到 CodeBuddy 的 Craft 中，让 AI 助手自动生成代码。

在这里插入图片描述

这个执行需要一些时间，我们就静静的等待它完成。完成后会看到后端开发也一并实现了：

......
# 早餐店小游戏开发完成

已成功创建早餐店小游戏的核心功能，包括：

## 游戏前端
1. **游戏入口文件** `miniprogram/game.js`
   - 初始化云开发
   - 定义游戏全局变量
   - 启动游戏主循环

2. **游戏主逻辑** `miniprogram/js/main.js`
   - 顾客系统：生成和处理顾客订单
   - 时间管理：游戏内时间与现实时间转换
   - 游戏初始化逻辑

3. **设备管理模块** `miniprogram/js/equipment.js`
   - 设备升级逻辑
   - 设备效率计算
   - 设备解锁条件检查

## 云开发后端
1. **数据获取云函数** `cloudfunctions/getGameData`
   - 获取玩家游戏数据
   - 不存在时创建默认数据

2. **数据更新云函数** `cloudfunctions/updateGameData`
   - 更新玩家金币、等级等数据
   - 记录更新时间
......

最后会自动部署云函数到云服务器，基本上不需要操心后端的开发了：

在这里插入图片描述
到这里就可以在“微信开发者工具” 中导入小游戏项目进行预览调试了。

4.3、效果展示

将小程序目录导入微信开发者工具。

在这里插入图片描述

导入之后可能会有报错，不要慌，这是正常现象，根据报错内容进行修改即可。小贴士：也可以用“微信开发者工具” 里的 CodeBuddy帮你修复，很快就能解决。

在这里插入图片描述

经过对一些报错信息的修改，激动人心的时刻到了，小程序加载出来了。

在这里插入图片描述

看看最终的运行效果：
在这里插入图片描述

效果还是非常不错的，虽然没有达到商业级别，但是这只是简单的 Prompt Engineering 生成的代码；后面通过不断的让其优化，新增需求说明，相信是可以做出商业版的小游戏的。

到这里小游戏开发工作接近尾声，便可以着手上传代码并进行发布了。确保已在微信公众平台完成了小程序的注册，并已通过了所有相关的认证流程。

完成代码上传后，只需登录微信公众平台，并按照平台指引提交审核即可。关于如何在微信公众平台注册小程序，以及如何提交微信小游戏的发布审核，微信官方网站上均提供了详细的说明和指南。

由于这些内容与本文的核心并无直接关联，并非本文的重点，为避免篇幅过长，此处不再进行详细阐述。具体可以参考【微信小程序从开发到发布流程】。

4.4、项目代码完整开源

本项目已在 Gitee 平台进行完整开源，旨在促进技术交流与学习。欢迎广大开发者访问、参考、贡献代码或提出宝贵建议。

项目地址： https://gitee.com/long-xu/breakfast-shop-game

核心技术栈：

本项目的开发主要基于以下技术：

微信小程序原生开发框架： 提供前端界面的构建与交互能力。
微信云开发： 作为后端服务，实现了高效的云端一体化开发体验，具体包括：
- 云函数 (Cloud Functions)： 提供无服务器的后端逻辑处理能力，例如排行榜数据获取、用户数据更新等。
- 云数据库 (Cloud Database)： 用于存储游戏数据、用户数据等，实现数据持久化。

以下是本项目的主要目录结构：

breakfast-shop-game/
├── cloudfunctions/              # 存放所有云函数的目录，每个子目录代表一个独立的云函数
│   ├── getRankList/             # 获取游戏排行榜数据
│   ├── updateRanking/           # 更新玩家排行榜分数
│   ├── updateUserData/          # 更新用户游戏数据（如金币、等级等）
│   └── upgradeEquipment/        # 处理游戏设备升级逻辑
├── miniprogram/                 # 微信小程序前端代码目录
│   ├── images/                  # 存放项目所需的各类图片资源
│   ├── pages/                   # 存放所有页面模块的目录
│   │   ├── game/                # 游戏主界面，包含核心玩法逻辑
│   │   ├── index/               # 应用程序的入口或欢迎页面
│   │   ├── ranking/             # 显示玩家排行榜的页面
│   │   ├── shop/                # 游戏内商店，用于购买或升级物品
│   │   └── user/                # 用户个人信息及设置页面
│   ├── app.js                   # 小程序全局逻辑入口文件
│   ├── app.json                 # 小程序全局配置文件，定义页面路径、窗口样式等
│   └── app.wxss                 # 小程序全局样式文件
├── project.config.json          # 微信开发者工具的项目配置文件
└── README.md                    # 项目说明文档，包含项目介绍、部署指南等

未来，我计划将此项目打包并尝试上架至官方腾讯云开发-云模板中心，期待能成功为更多开发者提供便捷的参考模板。

五、总结

本项目“早餐店游戏”作为一次完整的微信小程序开发实践，不仅成功地实现了一个具备基本游戏逻辑、用户数据管理和排行榜功能的模拟经营类小游戏，更重要的是，它全面展示了微信小程序与微信云开发相结合的强大能力。

通过本次项目开发，深入体验了微信云开发带来的高效与便捷。云函数、云数据库和云存储的无缝集成，极大地简化了后端服务的搭建和维护工作，使得开发者能够将更多精力聚焦于前端用户体验和核心业务逻辑的实现。这种Serverless的开发模式，对于个人开发者或小型团队而言，无疑是一种极具成本效益和开发效率的解决方案。

当然，作为一个demo项目，它仍有许多可以完善和拓展的空间，例如：增加更多游戏内容（新的菜品、设备、顾客类型）、优化游戏平衡性、提升UI/UX设计、引入更多社交互动功能等。

本次“早餐店游戏”的开发验证了微信小程序和云开发在快速构建轻量级应用方面的巨大潜力，也为后续更复杂的应用开发积累了经验。希望这个开源项目能为其他正在学习或使用微信小程序和云开发的开发者提供有益的参考和启发。

在这里插入图片描述