我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source…
引子
最近，有个多年的朋友找到我，希望我能够帮他开发一个类似管理跑腿人员的的系统。经过对行业进行大致的了解，以及对需求进行反复沟通确认。我认为，这个系统应当由两个部分构成：
- 后台管理系统 —— 主要用于人员的管理和任务的分发，并且，还要加上点数据统计和分析的功能手机应用 —— 主要是接单人员用来查看任务和记录任务过程的，我考虑用微信小程序来实现。
我考虑是后端采用一个PHP的框架来实现，可能是laravel的，也可能是ThinkAdmin，再说吧，主要是修改方便。而前端，用微信小程序应该最为简洁，毕竟App还会涉及到不同系统的打包上架之类的，还是挺麻烦的，特别是著作权，申请下来得花不短的时间。
在这篇文章中，我会记录下我构建微信小程序的步骤，希望能够给到大家在使用Trae时提供参考。
1. IDE的安装
工欲善其事必先利其器，那么，第一步逃不开的就是安装Trae 和微信开发者工具了。微信开发者工具，点击这里下载安装就好，就不再赘述了。
而AI IDE呢?
对，没错。不出你们所料，我肯定是使用Trae，而且还是国内版本Trae CN。
在看到Trae 04.22 更新日志的第一时间，我就大受震撼。这是一版，已经集成了智能体、MCP、上下文、规则，集成了这些功能的Trae能够更好的控制代码生成，防止一些由于API版本、上下文中断、业务逻辑变更所带来的代码错误或者是冗余。
常规的软件下载安装在这里就不赘述了，主要是讲讲在04.22这个版本中增加的这些功能，该如何进行使用。
2. 贴个Trae 04.22的更新内容
Trae CN v0.5.1 版本正式发布。以下是变更细节：
- 提升了稳定性。合并 Chat 与 Builder 面板。你可以通过 @Builder 方式将 Builder 作为智能体使用。详情参考《智能体》。支持将文档内容和网页内容作为上下文：
- #Web：支持联网搜索，AI 会自动提取网页内的相关内容作为上下文。#Doc：支持通过 URL 或上传 .md/.txt 文件的方式添加文档集。
详情参考《上下文》。
- 支持通过配置规则来规范 AI 的行为，包括：
- 个人规则：根据个人偏好创建适用于所有项目的规则。项目规则： 创建仅适用于当前项目的规则。
详情参考《规则》。
- 升级智能体（Agent）能力：
- 支持创建自定义智能体。你可以自定义智能体的提示词和工具集。提供两个内置智能体：Builder 和 Builder with MCP。支持为智能体开启 “自动运行” 模式，使智能体自动执行命令和调用工具，同时支持配置命令黑名单。
详情参考《智能体》。
- 支持模型上下文协议（MCP）：
- 提供内置 MCP 市场，支持快速添加第三方 MCP Servers。支持将 MCP Server 添加到智能体进行使用，从而丰富智能体的能力。
详情参考《模型上下文协议》。
3. 开始配置项目
首先，打开主界面可以发现，似乎还是原来的样子，除了上述提到的Chat 和Builder的合并外，没有什么太多的变化。直到点击右上方的齿轮按钮，新增的功能在下拉菜单中，一项项的显示出来。
3.1 MCP！MCP！！ MCP！！！！
在04.22的版本中，Trae已经集成了接近100款MCP Server。我大概算了下，从4约10日有用户提出需求，到4月22日版本上线，加上周末一共也才12天时间，这期间还包含了需求的上报分、技术预研、排期、开发、测试等一系列的活动，算下来，这个速度还真不慢。
接下来，我们就好好来捋捋这个MCP的功能。
3.1.1 MCP的简介
当然，关于简单的MCP理论我们还是需要有所了解的。这里做个简单的介绍，需要更加详细的，可以参考Trae的相关文档
MCP是一种由Claude发起的开放协议，它标准化了应用程序如何为大型语言模型（LLMs）提供上下文。你可以把MCP想象成人工智能应用程序的USB-C接口。就像USB-C为将你的设备连接到各种外设和配件提供了标准化的方式一样，MCP为将人工智能模型连接到不同的数据源和工具提供了标准化的方式。
在其核心架构中，MCP遵循客户端-服务器架构，其中主机应用程序可以连接到多个服务器：
MCP 宿主 ：像Claude桌面端、集成开发环境（IDEs）或希望通过MCP访问数据的人工智能工具等程序。
MCP 客户端 ：与服务器保持一对一连接的协议客户端。
MCP 服务器 ：通过标准化的模型上下文协议（Model Context Protocol）各自暴露特定功能的轻量级程序。
本地 数据源 ：你的计算机上的文件、数据库和服务，MCP服务器可以安全地访问它们。
远程服务 ：通过互联网（例如通过API）可访问的外部系统，MCP服务器可以连接到这些系统。
3.1.2 用上MCP
先看看MCP市场，居然有gitee，这可得用上咯。
按照提示，点击【介绍页面】，直接复制出npx的代码粘贴过来。仔细一看，嗯，应该还有个 需要在gitee里新建一个私人令牌粘贴过来。
3.2 增加微信小程序开发的智能体
要对微信小程序的相关代码进行约束，还是从智能体开始。但是要注意，微信小程序也有很多的框架，但是对这个小应用来讲，用框架的话可能会带来一些意想不到的问题，先用原生的吧。
这个提示词我是直接使用扣子的智能体—— 创造Trae智能体 生成的。这个智能体会根据开发语言的的特性，整合全网络对所需要开发语言的经验，通过核心原则、核心规范、最佳实践、注意事项这四个维度，生成所需要的Trae 的智能体提示词。根据项目的实际情况略微修改后，就可以直接复制粘贴到Trae智能体的提示词里面了。
例如这个微信小程序的的提示词就是：
你是一名精通TypeScript和使用Skyline渲染引擎开发微信小程序的专家。**核心原则** - 类型安全优先：充分利用TypeScript的类型系统，减少运行时错误，提高代码的可维护性和可读性。例如，在定义函数参数和返回值时明确指定类型。- 遵循微信小程序规范：严格按照微信小程序的开发规范和Skyline渲染引擎的特性进行开发，确保小程序在微信生态中的兼容性和性能表现。- 模块化开发：将代码拆分成多个模块，每个模块负责单一的功能，提高代码的复用性和可维护性。---**核心规范** 1. **项目结构** - 按照微信小程序的项目结构规范组织文件，例如将页面文件放在`pages`目录下，样式文件放在`styles`目录下等。 - 对于TypeScript代码，合理划分模块目录，如`utils`存放工具函数，`models`存放数据模型等。2. **代码编写** - 使用TypeScript的类和接口来定义数据结构和行为，遵循面向对象编程的原则。 - 对于Skyline渲染引擎相关的样式和布局，参考官方文档进行编写，确保样式的兼容性和性能。3. **接口调用** - 封装接口请求函数，统一处理请求头、错误处理等逻辑。 - 注意接口调用频率规范，避免因频繁调用导致性能问题或被封禁。---**最佳实践** - 利用TypeScript的类型检查功能进行单元测试，确保代码的正确性。- 对于Skyline渲染引擎，进行网络调优和弱网体验优化，如使用缓存、预加载等技术。- 采用组件化开发，将页面拆分成多个可复用的组件，提高开发效率和代码质量。---**注意事项** - 注意代码管理与泄漏问题，避免敏感信息泄露。- 处理授权用户信息变更的情况，确保小程序的安全性。- 由于Skyline渲染引擎可能存在AB实验影响，要关注实验结果并进行相应调整。当然，为了验证这个智能体的能力，我会直接使用智能体生成的提示词，不做任何的修改。而关联的MCP 工具，简单选择个git和gitee就够了，可能，我个人还是喜欢用命令行来的快点吧。
3.3 构建上下位
在使用微信小程序工具初始化项目后，用好上下文也能对代码的的质量起到不小的提升。现在的任务是，更新代码索引！之前可能存在已经索引过的现象，所以，在初始化项目后，还是重新做个索引了，并且，排除掉无关的代码内容。
在使用Trae开发时，防止需求蔓延和API版本正确也是很重要的，因此在文档集里，我会同时增加项目文档和微信小程序开发的框架文档和API文档。不过，讲真，微信的这个文档内容太多了，已经超出了上线，索引的速度并不是太快，得心里有个基本的预期。
3.4 按个人喜好添加规则
这个时候根据个人的开发习惯或者是项目团队的相关规定，增加一些个人规则或项目规则也是很重要的。
4. 准备开始
接下来，我们就按照小程序的功能，挨个挨个进行开发咯，不过得当心了，AI的的脑容量也是有限的，别一次性让它生成太多的代码。这可能会导致生成的代码质量不高。
好了，话不多说，开工！
如果你对Trae还有其他疑问，或者还有更好开发技巧，可以留言或者加我微信一起交流：BinaryDreams，注明“掘金”。
