引言
背景：之前为了锻炼自己的全栈能力，我开发了一个全栈练习项目，包含了一个以NodeJS为技术栈后端服务，一个以Vue.js为技术栈的新闻后端管理项目，一个以Vue.js为技术栈的新闻网站项目。恰逢掘金邀请广大开发者们分享Trae这款全新的智能协作AI IDE使用体验。我又想动手学习一下写小程序，所以决定使用Trae开发一个新闻阅读的小程序端。
目的：利用AI IDE Trae来帮助我学习并写出一款微信小程序应用。
计划
初步想法：在我还不了解小程序语法的情况下，先画出自己想要的东西，非常简单，三个页面，首页、列表页、详情页，
首页：展示导航、轮播图、热门新闻。有一个热门新闻的接口请求，导航的菜单内容可以在页头组件中使用接口请求。
列表页：展示导航、面包屑分类、新闻列表。只有一个新闻列表的接口请求。
详情页：展示导航、面包屑分类、新闻详情。有一个新闻详情的接口请求。
接口：一共就3个接口请求。
服务端：已经使用nodejs开发完毕，我们开发完小程序直接调用就好。
新建项目：使用Trae帮我新建小程序项目。
开发调试：根据Trae的指导和代码补全等功能完成我的项目开发和调试。
效果展示：将编写的小程序展示出来。
新建项目
1，使用Trae的右侧对话区，提问我想使用你新建一个微信小程序项目 该怎么做。按照它的指导，我新建了TS+SASS模版的小程序项目。
2，我还提问了一些诸如：
微信小程序AppID的点击注册和使用测试号有什么区别？
使用测试号开发的程序可以更换成正式AppID吗？
微信小程序发布上线 会将小程序发布到哪里 需要自己准备服务器来部署吗？
我的后端服务还没有域名 只有ip和端口 小程序的前端可以访问到吗？
小结：到这还没有体现出使用Trae有什么优势，跟我们用其他AI工具没啥区别，真正惊艳的在后面。
开发调试
1，我提问你能识别图片的内容吗，将我的设计图给它，它可以识别我的设计！ 这太棒啦！
2，我继续提问：好 我想做这样一个小程序 接下来该怎么做，它开始指导我如何写代码。这里最让人惊艳的地方是：生成的回答中，有可交互的按钮（下图中红框部分），可以与我们的项目产生交互，可以创建文件夹、创建文件、直接定位到代码并修改代码。非常的方便！
3，持续提问，Trae AI 结合我的现有代码和我的提问，给出了我修改意见。我按照它给的修改意见三点两点，很快我们的项目就初具雏形。下图是应用代码产生的效果，你可以选择是否应用某些更改，跟日常diff代码一样：
4，关键提问：这是新闻列表的返回值 该怎么更改我的首页。
{
"code": 200,
"msg": "Success",
"data": {
"list": [
{
"id": "2ca73523-57cb-45bf-9cc5-70272a945e4d",
"title": "Sample Article Title",
"content": "This is the content of the sample article. It can be a long text with HTML formatting.",
"summary": "This is a brief summary of the sample article.",
"thumbnail": "http://example.com/thumbnail.jpg",
"isPublish": 1,
"createTime": "2024-06-28 14:43:19",
"updateTime": "2024-06-28 14:43:19",
"categoryId": "cat5",
"categoryName": "人工智能",
"categoryParentId": "cat1",
"tagIds": [
"tag1",
"tag2",
"tag3"
],
"tagNames": [
"编程",
"人工智能",
"健身"
]
},
],
"pageNum": 1,
"pageSize": 8,
"total": 3
}
}
根据答案迅速调整可以适配我已有接口的小程序代码。
4，我还提问了诸如：帮我实现列表页和详情页、帮我配置实际的API接口地址、微信小程序本地开发测试 如何设置不校验合法域名等问题。
5，另一个提效的地方，是在编辑器中使用AI，可以直接针对代码提问，让AI给出修改意见，然后将修改的代码应用到项目中，如下图：
效果展示
经过一阵愉快的对话，拥有三个页面，有路由、有接口请求的小程序就开发好啦，如下图展示。
总结
这次Trae IDE的初尝试，给到我非常好的编程体验，让我一个还不太熟悉小程序API的前端程序员，快速的上手和开发了一个小程序。以下总结我体会到的一些优点：
1，相较于传统的AI对话框，它可以识别到代码上下文，给出更符合你项目的答案。
2，相较于传统的AI对话框，代码的应用变得非常便利，不需要再粘来粘去。
3，可以实时检测代码中的错误和潜在问题，并提供修复建议，甚至可以自动修复常见错误。
4，可以帮助开发者便开发边学习。大大提升学习一门新技术的效率。
综合来看，Trae结合了传统IDE的强大功能和AI的智能优势，为开发者提供了更高效、智能和个性化的开发体验。强烈推荐体验。
作者：柠檬豆腐脑
链接：https://juejin.cn