写在前面

作为一名非专业前端开发者，我有一个想法：能不能做一款适合学生玩的像素风电子宠物小程序？类似以前 Tamagotchi 那种感觉，但在手机上玩，还能和同学互动。

这篇文章不是技术教程，而是记录我如何用 AI 编程助手，从零开始把想法变成现实的全过程。如果你也有想做的项目，但担心自己代码能力不够，希望我的经历能给你一些启发。

一、起点：一个不成熟的想法

最开始我的需求很简单：

1. 一个可爱的像素风宠物
2. 可以喂食、训练、和它互动
3. 能放在微信里，方便分享给同学

我没有写过小程序的代码，对 React、云开发这些概念也只是听说过。但我知道现在 AI 很厉害，也许可以试试让它帮我写代码。

于是我找到了一个 AI 编程助手（为了避免广告嫌疑，下文统一叫"AI 助手"），开始了这段奇妙的开发之旅。

二、第一步：让宠物"活"起来

2.1 初始版本：能看但不能玩

我先用自然语言告诉 AI 助手我想要什么：

"帮我做一个像素风的电子宠物，要有饥饿度、精力、快乐度这三个属性，用进度条显示。"

几分钟后，AI 给了我一个网页版的原型。宠物会显示在屏幕上，属性条也会动。但问题是——它只是个静态展示，我不能和它互动。

2.2 加入交互：喂食和训练

接着我说：

"现在宠物只是显示，我要能喂它吃东西，喂了之后饥饿度会下降，精力会上升。"

AI 助手帮我加了按钮和逻辑。这时候遇到第一个坑：属性变化后要怎么保存？刷新页面就清零了。

我："数据怎么保存？总不能每次刷新就重新来过吧。"

AI 助手建议用浏览器本地存储先试试，后续再升级到云端。于是第二版出炉：宠物终于能"养"了。

2.3 让它更生动：离线也会饿

我想到以前玩电子宠物的体验——哪怕你不玩，宠物也会自己饿。于是问 AI：

"如果我不打开应用，宠物会不会自己变饿？"

AI 助手帮我设计了一个"离线衰减"算法：根据上次登录的时间，计算宠物这些属性变化。但第一次做的版本衰减太快了，一晚上醒来宠物就"饿死了"。

我："这衰减也太快了吧，一晚上就全没了？"

AI 助手："我研究了一下其他宠物游戏，通常 24 小时衰减 50% 左右比较合理，我帮你调整一下。"

调整后，游戏体验好多了。

三、转型：从网页到小程序

3.1 为什么要改小程序？

网页版做出来后，我发现一个问题：每次都要打开浏览器，输入网址，很不方便。而且想分享给同学，还要发链接。

我问 AI 助手：

"能不能做成微信小程序？这样打开方便，还能分享。"*

AI 助手说可以，但需要把整个技术栈改一遍：

• 前端从 React 改成小程序原生代码
• 后端从 Supabase 改成微信云开发
• 登录方式从邮箱改成微信一键登录

听起来很复杂，但 AI 助手说："你不用管这些细节，告诉我你想要什么功能，我来改。"

3.2 改造成果：几乎重写了一遍

虽然听起来吓人，但实际过程比我想象中顺利：

1. 宠物渲染：AI 助手把 React 组件改成了小程序自定义组件
2. 用户系统：接入了微信登录，用户免注册，点一下就能玩
3. 数据迁移：云端数据从小程序云数据库读取

我印象最深的是，有一次改完之后发现真机上宠物外观不变化。我在开发者工具里看着没问题，但手机预览就是不动。

我："怎么回事？开发者工具里好好的，真机上就不行？"

AI 助手排查了一会儿，发现是小程序的渲染机制问题：它需要一些特殊的"强制刷新"技巧。改完之后就好了。

四、加功能：让宠物不只是宠物

4.1 班级系统：把社交加进来

光养宠物有点孤独，我想加入班级概念：

"能不能让用户加入班级？这样同学之间可以互相看宠物，还能点赞。"*

AI 助手帮我设计了：

• 班级创建和加入
• 班级任务系统（每天刷新）
• 访客记录（看看谁来过）
• 点赞功能

这部分逻辑比较复杂，涉及到多个数据表的关系。但 AI 助手帮我一步步实现，遇到报错就复制错误信息给它，它就能定位问题。

4.2 金币系统：让喂养有代价

我希望喂食不是无限的：

"喂食要消耗金币，金币可以通过完成任务获得。"*

AI 助手加了金币属性，并设计了：

• 喂食消耗 3 金币
• 训练每天限制 3 次
• 签到奖励金币

这样游戏就有了经济系统，玩家需要平衡资源。

4.3 那些让人头大的 Bug

开发过程中遇到了不少问题，这里列几个印象深刻的：

问题 1：点赞失败

我："为什么点不了赞？"

AI 助手检查后发现，云数据库的集合（类似数据表）不会自动创建，第一次点赞时会报错。它加了一段"自动创建集合"的逻辑，问题解决。

问题 2：任务进度不刷新

我："班级任务做完了，但进度条不动啊。"

这个问题修了两次才彻底解决。第一次是代码逻辑问题，第二次是云函数返回数据不完整。AI 助手帮我加了更详细的日志，才找到根本原因。

问题 3：昵称改不了

用户反馈想改昵称，但输入框改了没反应。

我："昵称修改功能做了，但保存不了。"

AI 助手发现是数据提交的部分写错了，改完就能正常保存了。同时还加了长度限制（8 个字），避免昵称太长影响显示。

五、优化：让体验更丝滑

5.1 自定义导航栏

默认的微信导航栏太丑了，我想换成自己的设计。

AI 助手帮我做了自定义导航栏，但需要适配不同手机的状态栏高度（iPhone 和安卓不一样，刘海屏和普通屏也不一样）。

这部分涉及到获取系统信息、动态计算高度。如果是我自己写，可能要查很久文档。但 AI 助手直接给出了兼容方案。

5.2 动画性能

宠物要有呼吸动画（轻轻上下浮动），但一开始做得太卡了。

AI 助手建议用 CSS 动画代替 JavaScript 动画，并减少 setData 的调用次数（setData 是小程序的"数据更新"方法，调用太频繁会卡）。

改完之后，动画流畅多了。

5.3 包体积优化

小程序有包大小限制（主包 2MB），我的项目里有很多图片，很快就要超限了。

AI 助手建议：

1. 用 SVG 代替 PNG（矢量图体积小）
2. 图片上传到云存储（不占本地包）
3. 定期清理无用资源

按照这个建议优化后，包体积从 1.8MB 降到了 1.2MB。

六、多端计划：还想做鸿蒙版

最近鸿蒙系统挺火的，我问 AI 助手：

"如果以后想做鸿蒙版，怎么弄？"*

AI 助手给了我三个方案：

1. 用 FinClip：可以把小程序直接跑在鸿蒙设备上
2. 用 Taro 重构：一套代码编译到多个平台
3. 等微信官方支持：未来可能会有官方移植工具

目前我还在考虑用哪个方案。如果你有经验，欢迎在评论区分享。

七、总结：AI 助手能做什么，不能做什么

7.1 AI 助手擅长的事

通过这个项目，我发现 AI 编程助手特别适合：

✅ 快速原型开发：你想要什么功能，它能很快给你一个能跑的版本

✅ 查错和调试：把报错信息复制给它，通常能定位问题

✅ 代码重构：你不说它也会主动优化代码（比如性能、可读性）

✅ 技术选型建议：遇到技术决策时，它能给出几种方案的优缺点

7.2 AI 助手不擅长的事

当然，它也不是万能的：

❌ 需求不明确时：如果你自己都不知道想要什么，它也帮不了你

❌ 非常新的技术：如果技术太新，训练数据里没有，可能会瞎编

❌ 复杂的架构设计：大项目的架构还是需要人来把关

❌ 创意和设计：UI 设计、交互创意这些，AI 只能辅助，核心还是靠人

7.3 我的使用心得

1. 把 AI 当搭档，不是工具：我会和它"讨论"需求，而不是直接下命令
2. 及时测试：每加一个功能就测试，不要等全部写完再测
3. 学会提问：问题描述越清楚，AI 的回答越准确
4. 保持怀疑：AI 给的代码不一定对，要自己理解并测试

八、给想做项目的你

如果你也有想做的项目，但担心自己代码不够好，我的建议是：

1. 先做个能用的版本：别追求完美，先让功能跑起来
2. 善用 AI 工具：现在 AI 编程助手很多，选一个顺手的
3. 遇到问题别慌：报错是常态，复制给 AI，它能帮你解决大部分问题
4. 保持迭代：第一版肯定不完美，但没关系，慢慢改

这个项目从开始到现在的版本，我大概花了两周的业余时间。如果不是用 AI 助手，可能连原型都做不出来。

最后

这篇文章不是广告，也不是教程，只是一个普通开发者的真实记录。

如果你对像素宠物这个项目感兴趣，或者有任何问题，欢迎在评论区交流。也许未来某一天，我们能在小程序里见到彼此的宠物呢？

---

项目信息：

• 名称：像素宠物（暂定）
• 平台：微信小程序
• 状态：开发中
• 技术栈：微信小程序原生 + 云开发

特别感谢：

• 微信开发团队（提供了这么好的平台）
• 开源社区（无数优秀的库和工具）
• 以及我的 AI 编程搭档（虽然它不知道自己在帮忙）

---

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、转发。你的支持是我继续分享的动力！