使用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实现的代码风格和代码质量,大致相当于一个拥有很好的知识储备,但是眼神清澈的大学生,能够高效完成基本的编码和开发任务。

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

相关推荐
Captaincc2 小时前
使用 AI 工具高效开发应用的上下文边界法
ai编程
hongweihao2 小时前
这操作够骚不:用Cursor 替换 IntelliJ Idea 进行Java开发
aigc·ai编程·cursor
创实信息2 小时前
GitHub Copilot在产品/安全团队中的应用实践:处理Markdown、自动化报告与电子表格、使用CLI命令等
github·copilot·ai编程
AI袋鼠帝3 小时前
体验完字节送的迷你AI硬件,后劲太大了...
aigc·ai编程
洗澡水加冰3 小时前
Trae说: Nuxt or Next选一个
后端·trae
玄明Hanko3 小时前
当我用 AI 写代码时,老板突然站在身后
trae
Trae首席推荐官3 小时前
Trae 版本更新|支持自定义智能体、MCP等,打造个人专属“AI 工程师”
前端·trae
Captaincc4 小时前
如何有效地使用Cursor AI IDE 的十二个关键方法
ai编程·cursor
围巾哥萧尘6 小时前
「网站开发」从构思到上线——AI 设计电子书籍网站开发全流程(Grok & Coze Space Trae AI & Cercel & Cursor)🧣
cursor·coze·trae
航重名了779486 小时前
Trae AI工具上新评测报告
trae