@[toc]

前言

最近有个想法，想自己动手做个微信小程序。正好遇到了Trae IDE，打算用 Trae 这个AI开发平台来做一个垃圾分类的小程序。

说白了，就是想做一个能让你随手记一下今天扔了啥垃圾的小工具——比如“今天扔了快递盒”、“倒了厨余垃圾”，小程序能帮你自动识别分类，还能看看自己一周都扔了多少可回收、多少有害垃圾，有点成就感，也算是为环保出份力吧。

所以这整个项目，就是用最接地气的技术栈，加上Trae的AI能力，做一个实用又轻巧的垃圾分类小助手。接下来我就一步步来，边学边做，记录下全过程！

一、一句话开启开发小程序

注册后，我用一句话开启今天的开发工作。

使用常见技术栈，做一个垃圾分类记录小程序

这时候看到Builder开始自己思考：

用户要求使用常见技术栈做一个垃圾分类记录小程序。从上下文中可以看到，之前的项目文件已经被删除，现在需要从头开始创建一个新的小程序。
我需要：

首先查看当前目录结构
创建一个标准的微信小程序项目结构
实现垃圾分类记录的基本功能

让我先查看当前目录结构，然后开始创建必要的文件。

我看了一下设计的这个结构和基本功能，和我想的一样，那么就接受生成的文件，继续下一步的生成。

经过短短几分钟，就生成了整个项目结构和对应的文件，我们来看看结果： 我已成功创建了一个完整的垃圾分类记录小程序。以下是完成的主要工作：

创建的文件和功能：

1. 全局配置文件 ：

   • app.json - 配置了页面路径、窗口样式和底部导航栏
   • app.js - 实现了全局数据管理、本地存储和记录管理功能
   • app.wxss - 定义了全局样式

2. 页面文件 ：

   • 首页 ： index.js 、 index.wxml 、 index.wxss - 展示统计概览和最近记录
   • 记录页 ： record.js 、 record.wxml 、 record.wxss - 实现垃圾分类记录功能
   • 统计页 ： statistics.js 、 statistics.wxml 、 statistics.wxss - 展示详细统计数据和趋势图表
   • 详情页 ： detail.js 、 detail.wxml 、 detail.wxss - 查看和管理单个记录

3. 其他文件 ：

   • project.config.json - 项目配置文件
   • README.md - 项目说明文档
   • README.md - 图标资源说明 实现的主要功能：

• 支持四种垃圾分类：可回收物、有害垃圾、厨余垃圾和其他垃圾
• 记录垃圾名称、重量和备注信息
• 自动保存到本地存储，无需网络连接
• 实时统计各类型垃圾数量和比例
• 展示近7天的记录趋势图表
• 查看和删除历史记录 使用说明：

1. 使用微信开发者工具打开项目目录
2. 需要在images目录下添加相应的图标文件（具体见images/README.md）
3. 将project.config.json中的appid替换为您自己的小程序appid
4. 编译运行即可使用 项目已完全实现垃圾分类记录的核心功能，界面设计简洁美观，用户体验良好。

二、编译过程中的错误处理

接着我就在微信开发者工具中打开了刚刚生成的这个项目。在编译的时候报错了。

在编译的时候报了一个错误： console中一个输出的错误，一个弹窗错误。我就先把这个错误给了Builder：

系统提示说“下载基础库版本 2.31.0 失败”，还有个500错误，这通常是因为配置文件出问题了。所以我就顺着逻辑一步步来：先看 app.json 文件，确认配置有没有写错。

结果我发现，app.json 里引用了一些页面，比如 add.wxml 和 add.wxss，但我们的项目里根本没有这些文件——我们实际的页面是 record.wxml 和 record.wxss。这说明可能是配置文件写错了，或者复制粘贴时搞混了。

但就在这时候，AI开始“自动执行”一些动作，比如它突然要生成一个叫 images/recyclable.png 的图片文件（可能为了图标），结果系统返回了一个“失败”的状态，还标记为“手动终止输出”。这就有点奇怪了——明明我只想修配置、补文件，怎么突然开始生成图片了？

而且更关键的是：这个图片生成操作似乎没有真正完成，整个流程像是被中途打断了。AI可能在尝试执行多个任务（修复配置 + 创建文件 + 生成资源）的时候，某个步骤出错或超时，导致后续操作被强制停止，就像“程序卡住了一样”。

于是我就在这里终止了错误处理的继续生成，开始查找这个下载基础库版本 2.31.0 失败”是什么原因导致。

找到了对应的解决方案：

解决方案步骤：

以下步骤已验证有效，可解决下载失败问题并恢复开发工作：

• 强制切换基础库版本‌： 在微信开发者工具中，点击「详情」→「本地设置」→「调试基础库」，选择3.8.12或更高版本。‌‌

• 或手动修改项目配置文件project.config.json，添加"libVersion": "3.8.12"后重新编译。‌‌

• ‌优化开发环境配置‌： 登录微信开发者账号：确保使用已注册的账号登录，避免游客模式。‌‌

• 清除缓存：通过「工具」→「清除缓存」→「全部清除」后重启工具。‌‌

• 调整网络设置：在「设置」→「代理设置」中选择「不使用任何代理」。‌‌

• ‌深度处理方案（如上述无效）‌：

• 彻底重置开发环境： Windows：删除目录C:\Users[用户名]\AppData\Local\微信开发者工具。 macOS：删除目录~/Library/Application Support/Tencent/WeChat/XPlugin/Plugins/WxApplet。‌‌

• 使用真机调试：通过「真机调试」功能连接手机测试，排除模拟器兼容性问题。‌‌

最后修改了一下详情中的基础库的版本配置，就可以了：

这时候这个小程序能够被编译，界面也能正常显示：

三、调试运行和测试使用

我点开首页，底部导航栏里有个绿色的“添加记录”按钮，特别显眼。我就点了它，跳转到了新建记录的页面。

页面上一共有四个输入项： 第一个是“物品名称”，我直接填了“橘子皮”。然后是“垃圾类型”，我看到有四个选项框，分别是可回收物、有害垃圾、厨余垃圾、其他垃圾。我一眼就认出橘子皮属于“厨余垃圾”，就点了一下对应的框，它立马变绿了。接着是“重量（kg）”，我估摸了一下，大概半斤左右，就填了“0.5”。最后是“描述（可选）”，我想加点说明，比如“今天吃水果剩的”，但懒得打字，就留空了。

填完这些，我往下一看，那个大大的绿色“保存记录”按钮亮得像在叫我。我轻轻一点，系统提示“记录已保存成功！”——嘿，还挺有成就感！ 刚刚我点下“保存记录”，系统提示“保存成功”，我就想着：这玩意儿真能存下来吗？不会只是临时缓存吧？于是我就赶紧点了一下底部导航栏的“记录列表”按钮，想看看刚才那条“橘子皮”有没有真的出现在我的环保账本里。结果——它就在那儿！物品名称是“橘子皮”时间是“2025-10-17 09:40”重量写着“0.5kg”还有我之前记的“纸箱子”，时间是昨天的，也还在。 那一刻，我心里一暖，感觉像是在给自己打勾打卡一样：“好家伙，这一条真的记下来了！”

四、功能和界面的优化

但是我感觉现在还有几个问题，比如我添加记录的时候，分类选择不是很清楚，记录后的列表按下分类按钮后也没有显示对应的填写的垃圾，这里应该有点问题。

另一个问题是统计分析页面的功能也还没有显示对应图表。

最后一个问题就是页面切换的图片是空的，这次让加上对应的图片文件，并且优化UI界面，风格更加小清新。我把这几个问题提交给了Trae 代码生成。 接下来IDE就开始了原来生成项目提出问题的优化。不过这个过程用时还是比价久，生成文件的时候比较慢。

我们来看看优化以后的效果： 添加电池垃圾。 记录列表 统计分析 可见优化一下比之前的版本效果好一些了。

总结

回过头看整个开发过程，我最大的感受是：这一次，我不是在“写代码”，而是在“对话式地实现一个想法”。

从最初的一句话：“使用常见技术栈，做一个垃圾分类记录小程序”，到最终看到自己添加的“橘子皮”“废旧电池”一条条清晰地显示在列表中，整个项目在 Trae IDE 的辅助下，以一种前所未有的高效方式完成了从无到有的构建。

这个小程序虽然功能不复杂，但它完整地走通了需求定义 → 项目生成 → 错误排查 → 功能测试 → 界面优化的全流程。每一步都让我更深刻地体会到：

AI 不是取代开发者，而是把普通人也变成了“潜在的创造者”。

以前，做一个小程序可能需要查文档、搭结构、调样式、反复调试，耗时耗力。而现在，借助像 Trae 这样的 AI 开发平台，我可以把更多精力放在“用户体验”和“产品逻辑”上——比如思考“用户会不会懒得填重量？”、“分类按钮够不够直观？”这些问题，而不是卡在“为什么页面路径报错？”这种基础配置问题上。

当然，AI 也不是万能的。它会犯错，会过度延伸（比如试图生成图片却失败），也会因为环境限制而中断任务。但正是这些“不完美”的瞬间提醒我：人依然是整个创造过程的核心。我们需要判断、引导、验证，甚至在关键时刻按下“暂停键”，去独立思考和解决问题。

这次实践也让我对“环保科技”有了新的理解。