夜雨聆风学习资料网

ARTICLE · 1280202

TRAE 插件市场上新:一站式搞定小程序开发与上线

TRAE 插件市场上新:一站式搞定小程序开发与上线

从一句话需求到真机扫码,手把手带你 Vibe Coding

小程序开发(miniapp-builder)现已上线 TRAE 插件市场。用自然语言描述需求,即可创建或修改 微信、抖音、支付宝小程序,在工作台预览页面、查看日志并一键交给 Agent 修复,再生成真机二维码、上传开发版。

无论是快速验证原型,还是继续迭代已有项目,都能在 TRAE 中完成。

一句话,创建你的小程序

安装插件后,在开发对话中选择「小程序开发」,描述你的需求、页面和风格,TRAE 就会检查环境、初始化项目、安装依赖并编写代码。

以趣味运势小程序为例,可以这样开始:

帮我创建一个 Taro 运势小程序,包含今日运势、趣味测算、我的记录三个页面。使用本地模拟运势,支持选择星座查看今日运势、填写昵称和出生日期进行趣味测算、展示运势评分和建议、保存和删除测算记录,数据保存在本地,不接真实测算服务。结果仅供娱乐,不作真实预测。界面采用雅致的东方风格,不使用外部图片服务。先完成创建,不启动预览,等我下一步指令。

已有小程序项目,也可以指定路径继续修改;环境检查、依赖安装和指定平台的本地构建,同样可以单独交给 Agent。

打开工作台,边看边改

创建完成后,对 TRAE 说「启动这个项目的预览」,点击对话卡片中的预览小程序,即可进入工作台。修改代码后,预览页面随编译更新。需要重新启动预览时,点击「刷新」即可。

工作台支持切换平台,查看对应的导航栏外观,并跟随 TRAE 自动切换深浅色主题及中文、英文、日文界面。这里展示的是 H5 模拟预览,实际效果需通过真机扫码确认。

查看日志,一键交给 TRAE 修复

遇到问题,无需来回复制报错。工作台提供三类日志,支持搜索、筛选、展开详情和清空:

  • 构建日志:查看 H5 编译、小程序构建、二维码生成和上传任务的阶段与结果。

  • 运行日志:查看 H5 页面的 console 输出和运行异常。

  • 网络日志:查看 H5 请求的地址、状态、耗时及可读取的请求和响应详情。

点击「一键修复」,即可将当前日志类别中的错误发送到对话,由 Agent 结合代码继续处理。已发送的记录会标记为「已发送修复」,方便回到预览验证结果、继续处理新问题。运行日志和网络日志仅覆盖 H5 预览,不包含真机日志。

生成二维码,扫码查看真机效果

在「真机预览」区域选择平台,配置凭证后点击「生成二维码」。插件会按需安装平台工具、构建并上传预览包,随后展示对应二维码。

平台

在工作台配置

扫码预览

抖音

App ID + 小程序代码上传 Token

抖音 App

微信

App ID + 代码上传密钥文件(.key)

微信

支付宝

App ID + 开发工具 identity 身份文件(.json)

支付宝 App

凭证表单内提供获取说明。凭证按项目和平台保存在本地,无需发送到对话中。每个平台保留最新二维码;代码更新或二维码失效后,重新生成即可。

以微信和抖音小程序为例,以下为配置操作步骤

微信小程序

在生成二维码或者上传开发版之前都要填写凭证,如下左图的弹窗。对于微信小程序而言,对应凭证要先登录微信公众平台,然后获取如下信息:

  • 微信 App ID:微信公众平台“管理 → 开发管理 → 开发设置”,标注小程序 AppID。

  • 密钥文件:同页“小程序代码上传密钥”,标注密钥生成入口和“下载密钥”按钮,获得 .key 文件。

  • 同页面中关闭IP白名单。

抖音小程序

同理,抖音则前往抖音开放平台 -> 控制台获取信息:

  • 抖音 App ID:目标小程序后台“开发 → 开发配置 → 密钥管理”,标注“小程序 Key”中的 AppID。

  • 上传密钥:同页“密钥设置 → 小程序代码上传密钥”,标注“立即启用”及验证后生成、复制 Token 的位置。

确认真机效果,上传开发版

真机验证完成后,在当前平台的发布步骤中点击「上传」,填写版本号和版本说明,确认后即可构建并上传开发版。

工作台会展示任务进度、结果及错误详情。关闭上传窗口后,任务仍会继续;上传失败可查看构建日志,结果未知时请先核实平台记录。

前往平台后台,完成提审与发布

开发版上传完成后,点击工作台中的「提审与发布」入口,即可打开对应平台后台。

插件负责上传开发版,体验版设置、代码审核和正式发布需在平台后台完成。 例如,微信小程序上传后,还需前往微信公众平台的「版本管理」提交审核,审核通过后再正式发布。

现在,前往最新版 TRAE 桌面端插件市场,安装「小程序开发(miniapp-builder)」,从一句话需求开始,搭建你的小程序。

相关学习资料