两周的时间过得很快，转眼间我的Cursor体验资格就到期了，一穷二白的我把目光转向了国内AI编程市场的佼佼者——Trae CN。因为本身电脑里没有IDE，所以类插件的AI编程工具并不太方便。这次，我用AI编程搭了一个微信小程序，一个模仿flappy bird的小游戏，整体的操作体验也是非常丝滑。
非常简单录制了一下：
一、 实现路径
1. 前期准备
- 如果需要开发小程序，首先需要登陆「微信公众平台」完成小程序的注册，这里需要绑定一个邮箱，申请的过程我就不详细展示说明了。如果是个人申请小程序，那么只需要身份证信息即可，最后你可以在小程序后台得到一个AppID用于我们后续的开发。
- 另外一个准备工作就是需要下载「微信开发者工具」，这个是专门为微信公众号小程序配备的开发环境，在这里可以对我们的小程序进行代码编辑和测试。
2. 设计小程序
- 我这里选择了flappy bird小游戏作为一个入门的尝试，一个是因为这个游戏比较有名，方便AI理解，另一个是因为我也确实有点想玩这个游戏了。
- 打开Trae，新建一个小程序的项目文件，你可以看到其实这和Cursor的使用路径非常相似。创建完成后，我们首先让AI根据要求生成一个产品设计文档。在之前我都会直接让AI写代码，但这都是基于我完全相信AI可以理解什么是贪吃蛇和俄罗斯方块的基础上，但对于一些可能没那么经典的游戏，我首先需要让AI生成需求文档给我检查修改，然后再编程，这样会减少返工和资源浪费。
| 生成产品设计文档 | 生成小程序核心代码 |
 |  |
- 根据我们的Prompt，Trae会在指定的根目录下创建以下5个文件，这也是这种前端小游戏创建必要的一些内容，可以学习一些前端的框架知识
- index.wxml – 页面结构：管理页面的框架，比如页面有个容器，里面有小鸟和管道
- index.wxss – 页面样式：定义页面元素的属性，比如小鸟多大、管道什么样、背景什么色
- index.js – 页面逻辑：定义页面基本逻辑，比如积分规则、碰撞规则、元素的生成和移动等
- index.json – 页面配置：定义页面的基本配置，比如导航栏标题
- app.json – 小程序配置：定义小程序全局的基本配置，比如展示的页面和背景等
3. 调试小程序
- 如果需要调试验证小程序，直接在微信开发者工具里面创建一个项目就行，这里就需要填写之前开通小程序的AppI。我这里选择了微信云开发，相当于帮你申请了一个云服务器，有条件免费，可以使用很多官方的模板，还是挺方便的。
- 创建完成之后，可以一边调试，一边在Trae里要求AI修改代码，然后在开发者工具里面刷新预览，查看最新代码的效果。因为有注释的原因，有些修改可以直接在工具里面调整。
- 这里我主要进行的优化包括，大家可以参考：
- 前端贴图优化 – 增加了背景、管道皮肤和小鸟贴图
- 游戏开始优化 – 游戏结束后支持查看分数和重新开始
- 游戏操作优化 – 小鸟下坠增加自由落体的加速度，调整点击上飞的距离
- 得分记录优化 – 增加实时最高分记录，并在游戏结束后展示
- bug优化 – 修复重新开始后管道刷新错误等bug
4. 上传并发布
- 这里我并没有上传发布哦，因为要微信审核而且上传之后云开发就会计费了，我也只是纯实践，想在开发者环境里面多做几个Demo玩一下。
- 不过如果想要上传，其实也很简单。只要在开发者工具中点击「上传」，然后在该AppID对应的小程序后台-版本管理中就可以看到你上传的开发版本啦。开发版本需要经过审核之后才能发布到正式环境哦，所以提交审核前一定要确认自己的代码没有任何问题。
二、 效果与反思
- 个人感觉经过我几轮的代码优化，这个小游戏的体验已经基本满足需求，和原Flappy Bird的差距也最多是一些贴图和界面的优化，功能上已经几乎是复刻了。
- 从小程序开发的体验来说，整体觉得Trae的使用体验还是很不错的，但是和Cursor相比确实有些差距。比如我遇到一个问题反馈给AI，Cursor会给我提出A解决方案，如果我尝试了A不行，那Cursor会很快提供B方案和C方案，但相比之下Trae的方案就比较局限了。
- 其实我一直觉得微信开发者工具可以直接去接入AI做一个Chatbox，或者集成一些现有的AI能力，这样就不用我每次在Trae上修改，再在开发者工具上调整测试了，或者就开发MCP让我直接用Agent接管，真正做到一句话生成一个微信小程序。当然，腾讯已经为小白开发小程序提供了很多工具了，比如微搭零代码平台、云开发的这些模板等等，我试下来确实方便很多，连申请服务器管理后端的步骤都免了，但还是有很多可以优化的空间啦～
0 条评论