使用Trae从0到N实现一个小程序的前端开发-使用感受：像一个“眼神清澈的大学生”

引言

近期，AI-Coding的兴起引发了广泛关注。本文将详细介绍如何使用Trae平台，从零开始实现一个内容交互类小程序的全过程。该小程序包含首页、质询、我的三个模块，后端代码由作者自行编写，而前端代码及接口交互则完全借助AI完成。整个搭建过程耗时3天，以下将详细分享实现步骤及个人使用感受。

Trae安装及使用

Trae的安装过程简便，用户可根据自身系统选择合适的安装包进行傻瓜式安装。官方内置多个模型，同时支持自定义模型。本文使用的是DeepSeekR1模型，其他微调过的开发模型可能会带来更佳效果。

Trae官网下载地址：www.trae.com.cn/download

开发过程

Trae的AI对话框提供chat和builder两种模式。chat模式用于回答用户问题，而builder模式则可根据用户需求执行操作，代替用户进行编码。鉴于作者已有明确的最终效果预期，因此采用分阶段对话的形式，逐步让AI实现小程序功能。

第一步：搭建基本框架

通过与AI对话，要求其搭建一个包含首页、质询、我的三个tab模块的微信小程序基本框架。AI不仅生成了Wxml、Wxss、JS代码，还尝试引入图标静态文件，但效果不佳。最终，作者自行寻找并替换了图标。

第二步：实现首页功能

要求AI实现首页上方的banner图模块。经过两次对话后，AI完全满足了作者的需求，包括CSS样式及请求后端接口获取数据。

第三步：实现专栏模块

给出要请求的接口及接口返回的数据格式，要求AI在中间掺杂业务逻辑。经过多轮对话，整体实现效果良好。

后续过程中，作者与AI不断对话调试，逐步完成各个模块。整体体验良好，最终仅用三天时间就实现了小程序的所有功能。

以下为AI生成的部分代码其中包括了分页功能和一些简单的日期转化相关的代码

kotlin 复制代码

Page({
onShow() {
const app = getApp()
app.httpRequest({
url: '/api/applet/member/login/getApp',
method: 'GET',
data: { appCode: app.globalData.appId },
success: res => {
if (res.data.code === 200) {
wx.setNavigationBarTitle({
title: res.data.data.name
})
const ossUrls = res.data.data.appHomeImg ? res.data.data.appHomeImg.split(',') : [];
this.setData({ bannerImages: ossUrls });
}
}
})
},

data: {
articleGroups: [],
isLoading: false,
latestArticles: [],
pageNum: 1,
pageSize: 5,
hasMore: true
},

/**

* 页面的初始数据

*/
onLoad(options) {
const app = getApp();
this.setData({
appBulletin: app.globalData.appBulletin || ''
});
this.loadArticleGroups();
this.loadLatestArticles(); // 新增数据加载调用
},
  
loadArticleGroups() {
const app = getApp();
app.httpRequest({
url: '/api/applet/member/articleGroup/queryAll',
method: 'GET',
data: { appCode: app.globalData.appId },
success: res => {
if (res.data.code === 200) {
this.setData({
articleGroups: res.data.data,
isLoading: false
});
} else {
wx.showToast({ title: res.data.message || '数据异常', icon: 'none' });
this.setData({ isLoading: false });
}
}
});
},


loadLatestArticles() {
const app = getApp();
console.log('执行条件检查:', {
isLoading: this.data.isLoading,
hasMore: this.data.hasMore,
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
});

if (this.data.isLoading || !this.data.hasMore) return;
this.setData({ isLoading: true });
app.httpRequest({
url: '/api/applet/member/article/queryTop',
method: 'GET',
data: {
appCode: app.globalData.appId,
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
},

success: res => {
console.log('请求参数：', {
appCode: app.globalData.appId,
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
});
console.log('接口响应：', res.data);
if (res.data.code === 200) {
const newArticles = res.data.data.records.map(item => ({
...item,
createTime: item.createTime.split('T')[0]
}));
const newPageNum = this.data.pageNum + 1;
const newHasMore = newPageNum <= res.data.data.totalPage;
this.setData({
latestArticles: [...this.data.latestArticles, ...newArticles],
hasMore: newHasMore,
pageNum: newPageNum,
isLoading: false
});
}
},
fail: err => {
console.error('接口请求失败:', err);
wx.showToast({ title: '加载失败，请重试', icon: 'none' });
this.setData({ isLoading: false });
}
});
},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom() {

console.log('this.data.hasMore:', this.data.hasMore);

if (this.data.hasMore) {

console.log('触底加载更多数据');

this.loadLatestArticles();

}

}

使用感受

在使用期间尤其是在实现分页的过程中经过多次对话，总是有BUG，都差点忍不住自己改了，总体来说AI实现的代码风格和代码质量，大致相当于一个拥有很好的知识储备，但是眼神清澈的大学生，能够高效完成基本的编码和开发任务。

然而随着社会和科技的不断发展，程序员这个职业将不断的变的更加平凡。所以大家仍需保持开放态度，积极的去学习新技术，以应对未来的挑战。