用 CodeBuddy 搭建「MiniGoal 小目标打卡器」：一次流畅的 UniApp 开发体验

我正在参加 CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

有时候我会给自己定些小目标：每天动动手指打卡一下，督促自己坚持。某天突然想，不如做个轻量级的打卡器，一页就能设目标、记录完成，界面要清新一点、动画要轻盈一点。就这样，MiniGoal 的雏形在脑海里冒了出来。

接下来，我直接告诉 CodeBuddy：“我想搞个 UniApp 的小程序，一页的打卡器，顶部写名字和提示，中间填写目标，底下整一排七个圆圈，点一下就打卡，最好还有彩带动画什么的。”就这样，我几乎没动手，就让它接管了整个流程。

页面布局那点儿事

说实话，我还以为得先自己画草图，然后一行行跟它说要插哪个组件。结果它倒先一步给了我一个大致布局：

• 渐变色的顶部条带，用来写应用名和一句小提示；
• 中间那块是输入框和按钮，想着输入完目标一键保存；
• 底部是一排七个圆形打卡小卡片。

我就随口加了句“要轻拟物风格、阴影不要太重、带点点击反馈”，它当即在代码里加上了柔和阴影和一下子缩放的动画，整个布局一步就到位。

在这里插入图片描述

重写 index，一次搞定结构和样式

旧的 pages/index/index.vue 还残留着模板里的 demo，跟我想的界面完全搭不上边。CodeBuddy 就给我直接清空重写，工具自带的 write_to_file 一下就把新的代码灌进去。

新页面里，顶部是浅粉到白的线性渐变；中间那张卡片是圆角的输入框，左侧还蹲了个🎯图标；下方七个圆形点点，状态切换时还伴着小彩带飞过。

整段代码都包括好了，动画、交互、样式一次到位。要不信，自己点一下卡片就有感觉了。

打卡逻辑：点击就行

我只提了“点一下圆圈，让它切换状态”，它就用 v-for 渲染七个元素，每个都绑了点击事件，响应式地在 ☑ 和 ⭕️ 之间切换，还加了轻微弹跳。底下还有个提示文字，“还差 2 天就完成啦🎉”，连这句提示都自动生成了，我匿名都没写。

在这里插入图片描述

细节体验：视觉 & 交互

这一块我就比较苛刻了。想要那种“浮在空中”的卡片感，结果 CodeBuddy 给我加了半透明遮罩、柔和阴影、渐变高光，按钮按下时还能收缩一点点，配合 box-shadow 一闪，手感跟真的在挤泡泡似的。输入框的那条渐变边也没落下——从奶白到纯白，几乎肉眼看不出，但氛围就不一样了。

pages.json 也顺手整理了

UniApp 要的页面配置一旦乱了，加载起来就卡壳。我没特意提醒，它自己检查了 pages.json。把原生标题栏砍掉，导航栏设成透明，默认首页直接指向 index，还把背景色同步成 App 里用的渐变色。这样一来，打开小程序就直奔 MiniGoal，不跑偏。

真正的“我几乎只开口说话”时刻

整个过程我就是在对话框里说几句，“我要七天打卡”“要动画”“背景要柔和”。CodeBuddy 就变成了一个前端小助手，帮我组织结构、写模板、写交互方法、写样式，甚至自动处理响应式、伪元素、光带动画……代码规范得很：scoped 样式、清晰的 method 分离、少量冗余、都用到了。

少了翻文档的折腾，多了直接“猜我想要”的顺畅。MiniGoal 诞生得比我预想的快一倍不止，也更干净利落。要不是亲手上线，怕都觉得只是场梦。

如果你也有个小点子，想随便搞个工具，不妨试试对话式开发——像我这样，随口一句话就能“造”出一个能用的 App，体验绝对让人上瘾。

在这里插入图片描述