掘金 人工智能 09月17日
CodeBuddy 辅助开发微信小程序:经验分享与踩坑总结
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文作者分享了使用腾讯 CodeBuddy 开发微信小程序“小物记”的实操过程。尽管未能完全达到预期,作者仍将过程中遇到的问题和经验进行了梳理。文章详细介绍了项目背景、需求分析、技术选型(原生微信小程序+TDesign组件库+腾讯云开发),并展示了与 CodeBuddy 的交互过程和初步生成的前端界面效果。作者特别强调了 CodeBuddy 在界面设计上的不足,并总结了在使用过程中遇到的几个关键问题,如计划模式下的文件锁定、对 uniapp 的支持不佳,以及AI生成的界面审美有待提升。文章旨在为其他开发者提供参考,帮助大家在AI辅助开发过程中避开类似坑点。

📱 **AI 辅助开发微信小程序“小物记”**:作者尝试使用腾讯 CodeBuddy 开发一款家庭物品跟踪管理小程序,该小程序旨在通过AI辅助录入和管理物品信息,解决生活中物品遗忘、过期等问题。项目技术栈选定为原生微信小程序结合TDesign组件库,后端计划使用腾讯云开发。

🤖 **CodeBuddy 交互与初步成果**:文章详细记录了与 CodeBuddy 的对话过程,包括需求分析、技术指导和代码生成。尽管 CodeBuddy 能够根据指令生成初步的前端代码,但作者对其生成的界面效果表示不满意,认为界面较为简陋,审美方面有待提高。

⚠️ **实操中的踩坑经验**:作者总结了在使用 CodeBuddy 过程中遇到的几个主要问题:1. 在计划模式下,`.codebuddy` 目录下的 `analysis-summary.json` 文件若不删除,会导致后续指令执行受阻;2. CodeBuddy 对 uniapp 的支持不佳,出现较多语法错误;3. AI 生成的界面设计过于基础,建议开发者结合原型或设计图进行指导,不宜完全依赖AI自行发挥。

前言

写在前面:今天是被 CodeBuddy 打击的一天,即使推迟到现在发布文章,也没能达成预期。但仍希望把过程分享给大家,供有兴趣的朋友参考、避坑。

最近我一直在使用腾讯 CodeBuddy 进行 AI 编程,今天打算用它开发个微信小程序试试。

CodeBuddy 过往文章:

放弃 Cursor 后,我又试了 CodeBuddy,感觉国产又行了 - 掘金

CodeBuddy CLI 实测:比 Claude Code 稚嫩,但我感觉值得期待 - 掘金

项目背景

你是否有这样的经历:大扫除的时候才发现未开封的洗发水,但已经过期,周末闲下来才看到牛奶,可它已经臭了?

忙碌的生活让我们经常忘记琐碎的东西,有没有什么方法可以提醒我们避免呢?

今天,我们就借助 CodeBuddy 实现一个家庭物品跟踪管理的小程序,帮助我们解决这类问题。

实操记录

前期准备

第一个,建立项目及 Git 仓库,给代码提供最终的保障。

第二个,通过 AI 对话简单分析一下应用的需求,方便下面整理初版生成的提示词。

需求重点如下:

初版生成

本文计划的技术栈:原生微信小程序+TDesign组件库。

后端打算采用腾讯的云开发服务 CloudBase,但今天尝试过程中,遇到问题有点多,时间不太够了,调整为先完成前端部分,后续再进行后端开发。

指令

我要实现一个家庭小物件管理的应用,应用名称:小物记。业务:主要管理每个物件的名称、数量、生产日期、保质期、到期日(自动计算出)、存放位置。分类包括食物、日清等,可自主进行配置。界面:- 首页展示物件列表,顶部展示分类,下面是物件列表,底部居中有拍照图标,点击后可拍照识别物品信息,并自动提取到一个表单进行确认添加,确认表单界面所有项都可修改。- 列表项(即单个物件)左滑弹窗提示使用,弹窗中可设置使用数量,确认后,使用数量减少。- 分类最右侧,有维护图标,点击后跳转分类维护页面,可新增、删除分类。- 点击物件打开物件详情页面,上方式物件基本信息,下方是是物件消耗记录。技术- 前端使用原生微信小程序+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 的心意?

大家略微扫一下就行了。

需要调整的地方太多,我感觉没有优化的必要了。

踩坑整理

上面看到的是尝试几次后首次生成成功的结果,在此之前还有几次不成功的,这里整理下内容给大家以作参考。

1、CodeBuddy 计划模式下,如果分析完,会在.codebuddy下生成一个analysis-summary.json文件,如果不删除,不论如何撤销指令,都会接着前面的分析结果执行。

2、最初想用 uniapp 的,但 CodeBuddyuniapp 的支持实在不好,生成了两遍,每次都会出现语法错误,最后放弃了。

3、CodeBuddy 不结合 Figma 的审美是在是有点初级,建议大家做界面的话还是参考原型或者设计图为主,不要让它自行发挥了。

结语

前两天测试基础模块开发,感觉 CodeBuddy 还是不错的,但今天这样一个完整的小应用走下来,我感觉 CodeBuddy 的能力还有待提高啊,尤其是它的审美。

累了,今天就先这样吧。

之后我会尝试更换其他 AI 编程工具完成同样的需求,看看质量对比如何,敬请关注!

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

CodeBuddy 微信小程序 AI编程 TDesign 腾讯云开发 开发经验 踩坑 WeChat Mini-Program AI Development Development Experience Pitfalls
相关文章