从界面崩塌到功能完整：CodeBuddy + uniapp 小程序生成实录

前两天，我雄心勃勃地想要使用 CodeBuddy 一口气生成一个完整的小程序。

直接给需求，然后得到一个可用的小程序，多么美好。

很明显，尝试了很多次后，我失败了。

但这两天我没放弃，换了技术栈、调了提示词、修了一堆坑，终于跑通了一条真正可用的 AI 生成小程序路径。

今天就把这个历程分享给大家，尽量让大家少走弯路。

尝试方案

CodeBuddy 生成原生小程序

这是前几天分享的方案，使用 CodeBuddy 直接生成原生小程序，采用 TDesign UI 框架，CloudBase 后端服务。

提示词如下：

diff 复制代码

我要实现一个家庭小物件管理的应用，应用名称：小物记。

业务：
主要管理每个物件的名称、数量、生产日期、保质期、到期日（自动计算出）、存放位置。
分类包括食物、日清等，可自主进行配置。

界面：
- 首页展示物件列表，顶部展示分类，下面是物件列表，底部居中有拍照图标，点击后可拍照识别物品信息，并自动提取到一个表单进行确认添加，确认表单界面所有项都可修改。
- 列表项（即单个物件）左滑弹窗提示使用，弹窗中可设置使用数量，确认后，使用数量减少。
- 分类最右侧，有维护图标，点击后跳转分类维护页面，可新增、删除分类。
- 点击物件打开物件详情页面，上方式物件基本信息，下方是是物件消耗记录。

技术
- 前端使用原生微信小程序+tdesign实现
- 图标使用tdesign图标，图片采用upsplash api
- 后端直接使用腾讯cloudbase实现
- 物品信息识别采用 gitee ai，api参考：https://ai.gitee.com/docs/openapi/v1#tag/%E6%96%87%E6%9C%AC%E7%94%9F%E6%88%90/post/chat/completions

最终结果是代码有错误，界面更是惨不忍睹。

《多次尝试用 CodeBuddy 做小程序，最终我放弃了 - 掘金》

我不太明白的是，明明都是腾讯自家的技术栈，为什么效果还会这么差。

后来我意识到，原生小程序虽然官方，但可能公开的代码不多，导致模型对其支持没有那么敏感。

CodeBuddy Cli 生成原生小程序

第二天我不死心，想着 CodeBuddy 不行，那就试试 Cli。

下面是生成后的首页截图，确实比"方案一"好点。

然后下面是把昨天 MasterGo 出的设计图扔给它，优化后的结果。

通过更规范的流程控制，Cli 模式确实比 IDE 模式略好一些，但提升比较有限。

后端方案的改变

这个项目计划采用云函数作为后端接口，最开始想要直接使用腾讯云 CloudBase，正好还有免费额度。

结果微信小程序绑定云函数还需要认证后才能使用，流程太麻烦，我果断放弃了。

那直接换回之前用过的 uniCloud 吧，正好，前端技术栈也更换下试试效果。

最终方案

这次换了之前用 Cursor 生成过的 uniapp 框架。

这是更换技术栈后的提示词：

diff 复制代码

我要实现一个家庭小物件管理的应用，应用名称：小物记。

业务：
主要管理每个物件的名称、数量、生产日期、保质期、到期日（自动计算出）、存放位置。
分类包括食物、日清等，可自主进行配置。

界面：
- 首页展示物件列表，顶部展示分类，下面是物件列表，底部居中有拍照图标，点击后可拍照识别物品信息，并自动提取到一个表单进行确认添加，确认表单界面所有项都可修改。
- 列表项（即单个物件）左滑弹窗提示使用，弹窗中可设置使用数量，确认后，使用数量减少。
- 分类最右侧，有维护图标，点击后跳转分类维护页面，可新增、删除分类。
- 点击物件打开物件详情页面，上方式物件基本信息，下方是是物件消耗记录。

技术
- 前端使用uniapp+vue2+uview2实现
- 图标使用uview2图标，图片采用upsplash api
- 后端直接unicloud实现
- 物品信息识别采用 gitee ai，api参考：https://ai.gitee.com/docs/openapi/v1#tag/%E6%96%87%E6%9C%AC%E7%94%9F%E6%88%90/post/chat/completions

业务和界面部分没有改变，主要就是更改了技术栈。

实操记录

下面是整个生成过程。

初版生成

发送上面的提示词，进行生成。

CodeBuddy 制定了如下计划：

配置unicloud云开发环境和gitee AI API集成
实现首页物品列表展示和分类筛选功能
开发拍照识别功能，集成相机API和AI识别服务
构建物品信息录入和编辑表单页面
实现物品详情页面，展示基本信息和消耗记录
开发分类管理页面，支持分类的增删改操作
实现左滑使用功能和库存数量更新机制

接起来，就是按照计划一步步执行。

配置后端

后端采用的云函数，即 Faas 服务。

今天使用的是 uniapp 自带的 uniCloud，也有免费额度。

先关联云服务空间。

初始化数据库。在 HBuilderX 中的 uniCloud - database 文件夹上右键。

上传并运行云函数。在 HBuilderX 中的 uniCloud - cloudfunctions 下的一个个云函数文件夹上右键。

该部分内容比较多，此处不展开介绍，后续我会单独写一篇文章详细介绍。

修复缺陷

进行了几次小问题的修复。

第一个

上传云函数出错了，直接复制错误信息给 AI。

yaml 复制代码

正在上传云函数item-service...上传失败：Business Failed, 未知的错误码FUNCTION_COMPILE_ERROR. traceId: 0b46bab217582926591533305e4d25

第二个

前端启动报错。

bash 复制代码

SassError: Undefined variable: "$u-border-color".

初版效果

缺陷修复完后，运行项目。

虽然界面依然简陋，但是整个功能已基本可用。

部分截图如下。

此时，AI 对接还存在一些问题，但拍照、识别、确认的流程已经完整了，并且都对接了后端 Faas 服务。

结语

今天，我们采用 CodeBuddy 基于 uniapp 生成了一个包含后端功能完整的小程序。

虽然，界面还是古早风格，但目前来看，整个思路应该没什么大问题。

本来想今天把 UI 也美化出来的，现在看只能明天了，大家周末愉快哈~

就是我现在依然好奇，为什么腾讯自己的"原生微信小程序"效果那么差呢？