# trae 深度体验：使用trae完美开发微信小程序 **我正在参加Trae「超级体验官」创意实践征文，** **本文所使用的 Trae 免费下载链接：** ## 安装 trae 安装 trae 教程和使用文档大家可以参考官方文档，很详细。使用过 vscode 的用户几乎可以无缝切换过来。官方文档：目前只支持 mac 系统，windows 预计 2 月份上线。如果遇到下面的错误，请科学上网解决； ![9d570441458a5014cd84fe035457eddc.jpg](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45c98b450c21413bb728af32a548da41~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=OJrtTTkYxuT%2BEhie5QuC76Jv%2B88%3D) ## trae 项目实战：开发微信小程序 ### 插件安装要想在 trae 中完美体验小程序开发首先需要安装必要的两个插件**WXML**、**微信小程序开发工具** **WXML**：微信小程序 .wxml 文件代码高亮，标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 code snippets） **微信小程序开发工具**：提供小程序预览、打包上传、代码补全、语法高亮、项目模版等功能 #### 安装 “wxml”插件按照 vscode、trae 的插件安装方式安装就可以顺利安装： ![CleanShot 2025-01-23 at 10.39.54](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97f1d2dd7f6d4ac7b7d0e16c9d4ab8ce~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=RwQHyVC2bP5uTghZfiABSoJmJnI%3D) #### 安装 “微信小程序开发工具”插件这个工具安装有一些曲折，按照 vscode 的使用习惯，首先在插件市场按名称搜索，结果大出意料，没有😄。 ![image-20250123105253075](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ad10389706e54974b0b4a53e25ba5984~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=G9JmY5Ug5u4kpEubbwSMe5m8q%2FY%3D) 不知道是哪里出现了问题，按照官方文档指引去下载。 ![image-20250123105506806](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/37099a1c2fc1401aa8441d36c2314c9b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=afeYMMZOVS8zrUdlK1b5jTsVt6Q%3D) 打开官方的网址，全是英文，没关系，使用豆包 APP 打开网页，让豆包总结网页内容就行 😄： ![image-20250123110057035](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/952a835dec144e7a8ff6326d84d9aac9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=jFKQbrVrH%2F%2FGm8JT1x3nLJ%2B6LyM%3D) 文档中提到了两种方式： * 从 Trae 的插件市场中安装（没搜索到**微信小程序开发工具**插件，此路不通😭） * 把插件下载到本地，使用本地安装的方式。看下面动图： ![CleanShot 2025-01-23 at 11.05.14](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/74b638df78c249f4b804719015c6affd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=8Hqk%2F%2BST%2BpJUGywDDuyAjJPQI8I%3D) 右下角提示，直接安装失败！此路也不行。作为一个程序员折腾是我的本能，看看 trae 的 AI 能力能不能提供帮助。 **顺便遇到个 bug：** ![image-20250123111111794](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d282f1078f42228e1a0c3145da6041~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=GqedA3TKgE8YxuB8wewEZXOcX6Q%3D) 插件安装失败后，图中的两个按钮点击了都没有任何反应，只能重启 trae 才能解决。 * 求助 trae 的 AI 使用快捷键 **command** + **U** 打开右侧边栏，输入要问的问题： ![image-20250123112424432](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/51360a053328445caf68e53d1e4d8dbb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=81L80B4efcXY5Osp7Ganr3FU%2BQk%3D) 看到上图，这个插件我们已经安装，在 trae chat 中给到的建议是里面有 "小程序开发助手"插件，但是没有提到如何安装。更换模型，在 chat 的对话框右侧点击切换模型，使用 gpt-4o，来解决插件安装的问题： ![image-20250123112853201](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b26237a492547d79183983bfde73d6b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=GSxGx4qWcO0ut53uWzf32RMWW4U%3D) 多次尝试后，回答还是一如既往的固执。在AI 给到的回复当中有个插件的命令，不过这个命令适合 vscode。![image-20250123113145456](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/886f0a02b89b46cd89772bc424c9edd0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=5Iw82tjnEqjoe49VdCK9YHkZ998%3D) 点击运行按钮试试，此时 trae 会自动打开 terminal，直接执行命令 ![image-20250123113559819](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c4a6ced5f4d7491bb067bcc623810f67~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=AL%2B5sagiqN8zvGnm%2Fkhl8hXYok4%3D) 提示安装成功，但是给 vscode 安装了。继续提问： ![image-20250123114016037](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1235f7d6f734aebba7ffc9b5ed846fc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=v6f%2FEUI66PQX%2BjsimCf14WKf6bg%3D) 嗯，还是 vscode 命令，不过也没关系，更换为 trae 就行了： `trae --install-extension /Users/oo7/Downloads/crazyurus.miniprogram-vscode-extension-1.5.1.vsix` 等待命令执行完毕： ![image-20250123114209616](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/da35088b046b4ad587d46b8a8729d24d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=wpu%2Fry2vlMJ2yM%2FUj3cAL17EnfU%3D) 安装成功。至此两个插件就安装完毕，可以做小程序的开发了。 #### 小结在trae中安装用于微信小程序开发的“WXML”和“微信小程序开发工具”插件，过程各有不同： * **“WXML”插件**：按照vscode、trae常规的插件安装方式即可顺利安装。 * **“微信小程序开发工具”插件**：在trae插件市场和vscode插件市场均搜索不到，通过从官方文档下载插件本地安装失败，求助trae的AI起初未得到有效解决，最终通过将适用于vscode的安装命令修改为适用于trae的命令`trae --install-extension /xxxx/crazyurus.miniprogram-vscode-extension-1.5.1.vsix` ，成功安装。 * 安装完成两个插件后，即可进行小程序开发。同时，安装插件失败时存在点击重试和关闭按钮无反应的bug，需重启trae解决。 * 点击 `chat` 区域的 `run` 按钮一定要检测命令的安全性（不然遇到非法的命令直接运行结果很严重），同时也建议`trae` 只复制命令到终端即可。 ### 小程序项目开发在 trae 中开发小程序，还需要下载**微信开发者工具**，也许有人会问既然有了微信开发者工具为什么还要使用 trae？ * 微信开发者工具编写代码远远没有使用 trae 写代码快，bug 多，没有 AI。 * trae 功能插件丰富、UI nice、拥有免费的 AI👍。 * **微信开发者工具**不能少，微信开发者工具有实时渲染，代码检测、性能分析、一键上传代码等微信小程序必须的功能。使用 **微信开发者工具**打开你的项目，并点击打开模拟器和分离窗口，如下图： ![image-20250123134947333](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8050c07b523542e286dba178c55f0988~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=RpTwtQElSlNboseCMwPJFfmV6vw%3D) 然后打开 trae 编辑器，在你的桌面布局中配置如下排列方式： ![image-20250123135201768](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8104e33499f14a5aab48b7aa126d1719~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=O%2BwN6gW3lrCGef7lKRnJJBR5M6E%3D) 这样我们就可以实现一边写代码一边调试效果的目地。 ### 编写页面 #### 代码编写我已经有这样一个页面，不过界面太难看了，使用 Trae 来调试他： ![image-20250123140535900](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/baad5a8788ee46f6b2f86b0541ba2ae3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=kh%2FkzTe84k%2Bu0hvX8gX%2F7%2BHBzx0%3D) 页面 wxml 代码：

{{item.title}} {{100}} 去创作

界面样式实在太丑了，对 .description 进行样式修改。在 index.wxss 文件中，选中 .description 的样式，在悬浮工具条中点击**添加到对话**，然后我们在对话区域输入我们的修改要求，trae 进行回答。然后点击应用按钮，可以直接把新的代码插入到源文件对应的行。并且 trae 还很贴心的显示了新旧代码的区分。 ![CleanShot 2025-01-23 at 14.23.05](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/edc66c6aebd442b59ffedd6d55a2af81~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=ZyXnN7fBW6EYyVk7V%2BzoO4u5lp4%3D) 最后完成页面的修改，看效果： ![image-20250123145057241](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8daa315eac0945059bed5dd87563bbc1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=4Bez8AB8TJrM5qb%2BDrgFTelGF%2Bk%3D) index.wxss @import '../../asseat/iconfont.wxss'; .toolbox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .toolbox .item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 45%; background-color: white; margin-bottom: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); } .toolbox .item image{ /* height: 50px;*/ /* max-width: 100px; */ width: 100%; overflow: hidden; /* border-radius: 5px; */ border-top-left-radius: 5px; border-top-right-radius: 5px; } .toolbox .item .title { line-height: 40px; font-size: 15px; /* white-space: normal; */ align-items: center; width: 100%; padding-left: 10px; font-weight: 400; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) } .description { display: flex; flex-direction: row; /* 修改为列布局 */ flex-wrap: nowrap; } .description .iconfont{ font-size: 12px; } .description text { display: inline; line-height: 20px; font-size: 12px; width: 100%; padding-left: 10px; font-weight: 400; /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) */ } .description text:first-child{ color: red; } .description .description_right{ font-size: 12px; text-align: right; width: 95%; display: inline-block; margin-right: 5px; color: #3cc51f; } 如果我们需要回溯代码的历史记录，我们可以选中代码，然后在工具条中选择编辑即可查看。 ![image-20250123145436290](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bb2b6fff5fd941b48968fa517b921c08~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=3zQgQJEwFqfVSQVvrSmhVIgbzGc%3D) 再来看动图，效果杠杠的🐂： ![CleanShot 2025-01-23 at 15.20.41](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ccd3c2c7d8264088af7d99cc5ffd2c8c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=2Z06Cvv%2BRBAJN1ifuOn8Rci0%2B64%3D) #### 使用设计图转换为小程序代码首先我们准备一个页面的设计图 ![image-20250123161559306](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1c271fc48d7c4432bcd0849440f5b0c6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=%2B8wQ6LzUrcdAIuV8oeuG9T8j78E%3D) 然后使用快捷键 **command+U**打开右侧的chat 区域，把设计图粘贴进去，并进行对话。输入对话内容：把上图的样式布局转换为微信小程序的代码。看下面动图： ![CleanShot 2025-01-23 at 16.13.00](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/461073c105314b1bbeff1b209c30b0fd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=xhj9H3Rc2ZiXimG3i5vIHPDvr5w%3D) 这样会生成对应微信小程序的3个文件: index.wxml、index.wxss、index.js ，然后我们使用应用按钮，将代码插入到对应的文件即可。看最后的效果： ![image-20250123161916511](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8afae03fad664cb08d06d0b51feccddc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=emMaFbcI94JdNEgF4tvnQIHJVfc%3D) 看着效果还行，如果在使用过程中效果不是很好，可以多尝试几次。 #### 小结 1、我们在编写代码过程中与AI 助手聊天,可以指定Trae中的内容(例如代码、文件、文件夹和工作区)作为AI助手阅读和理解的上下文。这可确保AI助手的响应更符合您的需求。 ![image-20250123162808495](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/57dfff3de3ae414fab0d3984b5255a67~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=Gyj0dy62cpAJ5F5zbzKNc51LpZs%3D) 大家在使用AI的过程中，普遍感觉就是AI不能代替程序员，写出来的代码基础就不能用，原因就是一般的 AI 无法理解用户的工程文件结构黑内容，更无法知道你文件之间、代码直接的关系。trae 做到了，通过项目、文件、代码直接的逻辑生成的答案更贴合实际情况，所以效果会更好些。 2、将图片直接转换为代码依赖强大的多模态模型，大大减低了程序员的工作量。不需要依赖任何内容，将生成的内容稍微修改就可以直接使用， good job 👍。 ### 代码管理 trae 无缝集成了 git 的代码管理功能，我们只需要点点按钮就可以了。可以通过下面的两种方式激活代码管理： * 如果当前打开的文件夹没有 Git 仓库，请单击**初始化仓库**以为其初始化一个仓库。初始化完成后，源代码控制将被启用。 * 单击**发布到 GitHub**直接将此文件夹发布到 GitHub 仓库。发布后，可以访问源代码控制。 ![image-20250123164831862](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/aa9de859a67943218bff81537e0b5874~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=CLmhRLthX9BDKP0uog5DL8y6eEk%3D) ### Trae配置熟悉 vscode 的用户，对于配置 Trae 也很简单，使用快捷键 **command+,** 打开设置项：根据自己的喜好配置即可。 ![image-20250123165241398](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a1229954eed248cdaffd187f2fe66d58~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVtbzAwN3g=:q75.awebp?rk3s=f64ab15b&x-expires=1763589402&x-signature=PHWKNRecaP5vwoU7xvuoMLEsX%2Bo%3D) ## 总结 * **安装 Trae**：可参考官方文档进行安装，使用过 VS Code 的用户能无缝切换。 * **插件安装** **WXML 插件**：按常规方式顺利安装，可实现代码高亮、智能补全等功能。 **微信小程序开发工具插件**：在市场搜索无果，本地安装失败。最终将适用于 VS Code 的命令修改后成功安装。安装失败时存在按钮无响应的 Bug，需重启 Trae 解决。 **Trae** 的插件市场有部分插件是无法搜索到（具体原因未知），遇到无法安装的插件建议使用离线安装的方式，使用命令安装， * **小程序项目开发** **结合工具**：同时使用微信开发者工具和 Trae，微信开发者工具于实时渲染等，Trae用于高效代码编写和利用 AI 功能。 **代码编写**：可选中代码向 Trae 的 AI 提出修改要求，直接将新代码插入源文件，还能查看代码历史记录。 * **设计图转换代码**：依赖多模态的能力，可以在 chat 区域，粘贴设计图并对话，可生成小程序代码文件，效果不佳时可多次尝试。 * **代码管理**：无缝集成 Git 功能，可通过初始化仓库或发布到 GitHub 激活源代码控制。 * **配置 Trae**：熟悉 VS Code 的用户可使用快捷键打开设置项进行个性化配置。