↓

30分钟开发完成！Trae+Claude 3.7 打造小程序全流程揭秘！

·163 字·1 分钟
AI

在 上一篇文章里，我们用 Trae 已经完成了设计稿，本文将展示用Trae+Claude 3.7 从零开发一个倒数日小程序的完整过程。从项目最初的页面生成开始，到不断收到反馈后针对UI细节、交互逻辑、页面布局以及按钮样式等方面进行逐步调整，最终成功开发出一款符合预期的应用。

设计稿 #

正式开始之前，先回顾一下设计稿：

提示词 # 

你是一位资深前端工程师，拥有丰富的前端和微信小程序开发经验，请根据我的要求开发一个倒数日应用：
1. 使用微信小程序原生技术初始化项目
2. 主要功能包括我的倒数日、添加倒数日、倒数日详情
3. 根据我上传的设计稿截图开发，尽可能还原设计稿

第一次生成 #

Trae 回复：

效果如下：

注意：当前首页的数据是我调试添加的

问题

  • 添加页面和详情页返回按钮重复
  • 首页的“我的倒数日”需要去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

还有一些其他的细节比如按钮颜色不统一，我们依次解决这些问题。

第一次修改：去掉返回按钮 #

Trae 回复：

报错，把错误原因发送给Trae。

Trae 回复：

选择移除该字段

Trae 回复：

问题解决，但还有一个警告，继续把问题发给 Trae。

Trae 回复：

效果如下：

已修改

  • 添加页面和详情页返回按钮重复

改错

  • 首页改错了Tab

待修改

  • 页面标题不正确
  • 首页不用Tab
  • 首页的“我的倒数日”去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

第二次修改：页面标题 #

首页标题不用修改，添加页面标题改为添加，详情页面标题改为详情

Trae 回复：

效果如下：

一次改对。

已修改

  • 添加页面和详情页返回按钮重复
  • 页面标题显示正确

待修改

  • 首页不用Tab
  • 首页的“我的倒数日”去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

第三次修改：去掉Tab，添加按钮固定底部 #

不要使用TabBar，在首页底部固定一个添加按钮（不跟随页面滚动），点击之后跳转添加页面

Trae 回复：

效果如下：

一次改对。

已修改

  • 添加页面和详情页返回按钮重复
  • 页面标题显示正确
  • 首页不用Tab
  • 创建的➕按钮放上面不太好看，改成固定在底部

待修改

  • 首页的“我的倒数日”去掉
  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

第四次修改：首页顶部“我的倒数日”去掉 #

首页顶部“我的倒数日”去掉

Trae 回复：

一次改对，比较简单，不截图了。

已修改

  • 添加页面和详情页返回按钮重复
  • 页面标题显示正确
  • 首页不用Tab
  • 创建的➕按钮放上面不太好看，改成固定在底部
  • 首页的“我的倒数日”去掉

待修改

  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

第五次修改：添加页面的背景色改成圆形 #

添加页面“背景颜色”选项改成圆形。

Trae 回复：

一次改对，比较简单，不截图了。

已修改

  • 添加页面和详情页返回按钮重复
  • 页面标题显示正确
  • 首页不用Tab
  • 创建的➕按钮放上面不太好看，改成固定在底部
  • 首页的“我的倒数日”去掉
  • 添加页面的“背景颜色”选择按钮不是圆形

待修改

  • 事件详情页没有按照我们的设计实现

第六次修改：详情页UI调整 #

Trae 回复：

效果如下：

修改失败，继续修改。

Trae 回复：

效果如下：

我新添加了一条数据看备注的效果，但日期还是和设计稿有出入，但我觉得这样也行，毕竟 Claude 审美在线。

已修改

  • 添加页面和详情页返回按钮重复
  • 页面标题显示正确
  • 首页不用Tab
  • 创建的➕按钮放上面不太好看，改成固定在底部
  • 首页的“我的倒数日”去掉
  • 添加页面的“背景颜色”选择按钮不是圆形
  • 事件详情页没有按照我们的设计实现

第七次修改：添加编辑页面 #

以上问题都修改完了，但好像差了编辑页面，我们添加上。

增加一个编辑页面，页面标题为编辑，在详情中跳转进入。

Trae 回复：

一次成功，不再贴图。

第八次修改：添加编辑页面输入框边距 #

右侧边距有问题，继续修复。

Trae 回复：

一次成功。

总结 #

一边写文章一边让 Trae 优化，实际调整时间半小时左右，最终效果如下。

注意，需要安装微信开发者工具才能预览！！

  • 先解决大的错误，小错误再慢慢优化，如果先改小问题，后面改大问题时可能会影响小问题，导致需要再次修改。
  • 最好一次提问解决一个问题。
  • 指定好技术栈，拿小程序举例，不指定原生可能会使用uniapp。
  • 有时需要重启微信开发者工具。
  • 有时候会出现一只思考中，停掉就好了。

经过多轮的调试和改进，最终的倒数日应用实现了预期的目标：界面简洁、操作直观、交互顺畅。开发过程中，通过不断迭代，整个项目的开发历时约半小时。最后只能说一句 AI 的发展真的太快了！