登录
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
大家好，我是不如摸鱼去，欢迎来到我的AI编程分享专栏。
这次来分享一下，我使用 Trae 作为主要AI编程工具，开发 uni-app 跨平台小程序的完整实践经验。我在实际的开发过程中，探索了 Trae 辅助开发的具体应用场景和效果，整理出一套相对完整的开发流程和工具链集成方案。
在这个项目中，我们使用Trae作为主要AI编程工具，集成Figma、Alova 网络请求框架、WotUI 组件库等现代化工具，通过 AI 辅助实现了开发效率的显著提升，在本案例中整体开发时间从传统的 40 人日缩短至 22 人日，效率提升约 45%。根据团队的实际体验，相比传统开发方式，开发体验有了明显改善。
本文使用的 Trae 为国际版，目前 Trae 已经内置了 Figma 插件，可以尝试直接使内置的 Figma 插件来还原 UI，本文所写项目为使用 Figma MCP 实现。
相关文章
本文可以结合以下几篇往期文章食用，它们中很多是本文的基础，想要AI编程真正达到提效目的，前置工作还是有必要的：
当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战
告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞
设计师画个图，AI直接写出代码！AI + Figma MCP让前端开发效率暴增80%
为什么选择 AI 辅助开发？
传统开发遇到的痛点
在传统开发场景下，存在很多场景可以使用 AI 来接管：
- 设计稿还原耗时：UI 设计到代码实现需要大量手工转换
- API 集成重复工作：接口类型定义、Mock 数据生成等重复性工作
- 测试用例的编写：测试用例编写非常耗时
我们的解决思路
核心理念：让 AI 处理重复性工作，人专注于业务逻辑
具体策略：
- 利用 Figma MCP 实现设计稿到代码的半自动化转换
- 基于 Swagger 文档自动生成 API 类型和调用代码
- 通过 trae + llms.txt 文档集成让 AI 理解项目的组件库和开发规范
- 等等
上游依赖对 AI 编程效果的关键影响
在我们的实践中发现，以下上游依赖的完整性和规范性直接影响 AI 辅助开发的效果，大致分为：
- 设计稿完整性
- 需求文档完整性
- API 文档完整性
- 组件库对 AI 支持的完整性
技术选型与工具链
开发工具选择
- Trae 国际版：核心开发环境，提供 AI 代码生成和智能提示
- Figma MCP：设计稿到代码的转换工具
- @alova/wormhole：API 工程化和编辑器集成
技术栈选择
小程序开发当然要选个好的基础模板，这次我选用我在维护的 uni-app vue3 模板 wot-demo github.com/wot-ui/wot-… 来作为基础项目进行开发，这样更加贴合实际开发场景。 wot-demo 主要由以下开源包组成：
- 核心：@uni-helper
- 引擎：uni-app
- 打包器：Vite
- CSS 样式：UnoCSS
- 代码质量：ESLint 和 TypeScript：
- 组件库：Wot UI
- CI/CD：uni-mini-ci
- 路由：uni-mini-router
- 网络请求：Alova
- Pinia：Pinia
配置指南
我们首先对 Trae 进行一些配置：包括figma mcp、文档集、规则等，使 Trae 的开发思路更加符合我们的要求。
1. 配置 figma mcp
figma mcp 有多种配置方式，可以参考文章：设计师画个图，AI直接写出代码！AI + Figma MCP让前端开发效率暴增80%。这里我们直接使用 figma 官方提供的 Figma Dev Mode MCP。
目前也可以使用 trae 提供的内置的 figma 插件，即可不进行此配置。
前置要求
- 计划要求：Professional、Organization 或 Enterprise 计划
- 席位要求：Dev 或 Full 席位
- 应用要求：必须使用 Figma beta 版桌面应用，下载链接：www.figma.com/downloads/
步骤 1：启用 Figma 桌面应用的 MCP 服务
- 更新应用：确保 Figma 桌面应用为最新的beta版本
- 打开设计文件：创建或打开一个 Figma Design 文件
- 访问菜单：点击左上角的 Figma 菜单
- 启用服务：在 Preferences 下选择 Enable Dev Mode MCP Server
- 确认运行：底部应显示确认消息，表明服务器已启用并运行
📍 重要：服务器将在本地运行于
http://127.0.0.1:3845/mcp，请记住此地址用于下一步配置。
步骤 2：在 Trae 中配置
按照如下操作，打开AI功能管理->MCP
选择手动配置
填入以下配置
{
"mcpServers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
看到如下图，Figma MCP 即可使用了，其他 MCP 接入方案也大同小异
2. 配置 Trae 规则
还是AI功能管理设置界面，我们选中“规则”页签，设置项目规则即可。
编辑项目规则，填入以下规则，然后保存即可
# 项目开发规则
## 项目概述
本项目是基于 uni-app + Vue 3 + TypeScript 的跨平台应用，使用 wot-design-uni 组件库构建。
## 核心技术栈
- **框架**: uni-app (Vue 3 + TypeScript)
- **UI组件库**: wot-design-uni
- **请求库**: alova
- **路由**: uni-mini-router + @uni-helper/vite-plugin-uni-pages (文件路由)
- **状态管理**: pinia
- **样式**: UnoCSS + @uni-helper/unocss-preset-uni
- **构建工具**: Vite
- **代码规范**: ESLint + Prettier + husky
## 目录结构规范
### src/api/ - API管理
- `core/` - Alova核心配置
- [instance.ts](mdc:src/api/core/instance.ts) - Alova实例配置
- [handlers.ts](mdc:src/api/core/handlers.ts) - 请求处理器
- [middleware.ts](mdc:src/api/core/middleware.ts) - 中间件
- `mock/` - Mock数据
- `modules/` - 按模块分类的Mock数据
- `utils/` - Mock工具函数
- [createApis.ts](mdc:src/api/createApis.ts) - API生成配置
- [index.ts](mdc:src/api/index.ts) - API导出
### src/components/ - 全局组件
- 全局通用组件目录
- 包含 GlobalToast、GlobalLoading、GlobalMessage 等全局交互组件
### src/composables/ - 组合式函数
- 可复用的逻辑函数
- 命名格式: `use[功能名称].ts`
### src/layouts/ - 布局模板
- [default.vue](mdc:src/layouts/default.vue) - 默认布局
- [tabbar.vue](mdc:src/layouts/tabbar.vue) - 底部导航布局
### src/pages/ - 页面文件
- 基于文件的路由系统
- 每个页面目录包含 `index.vue` 文件
- 支持 `<route>` 自定义块配置路由元数据
### src/store/ - 状态管理
- Pinia store 文件
- [persist.ts](mdc:src/store/persist.ts) - 持久化配置
### src/utils/ - 工具函数
- 通用工具函数库
## 配置文件
- [pages.config.ts](mdc:pages.config.ts) - 页面和tabbar配置
- [alova.config.ts](mdc:alova.config.ts) - Alova配置
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS配置
- [theme.json](mdc:src/theme.json) - 主题配置
- [vite.config.ts](mdc:vite.config.ts) - Vite构建配置
## 开发规范
1. 页面文件必须放在 `src/pages/` 目录下
2. 组件按通用性分类存放在 `src/components/` 或 `src/business/`
3. API 接口使用 Alova 生成，通过 `pnpm alova-gen` 命令生成
4. 样式优先使用 UnoCSS，支持响应式设计和主题切换
5. 使用 TypeScript 提供完整的类型定义
3. 配置文档集
还是AI功能管理界面，我们定位到上下文页签，选择添加文档集
填入https://wot-design-uni.cn/llms-full.txt即可
开发流程
整个项目的开发大致可以总结为以下五个阶段：
项目初始化
原则：架构设计靠人工，标准实现靠 AI
项目结构设计（人工主导）
这里我们直接选择 wot-demo 作为项目基础架构，代码结构如下
src/
├── components/ # 通用基础组件
├── business/ # 业务组件
├── composables/ # 组合式 API
├── store/ # Pinia 状态管理
├── utils/ # 工具函数
├── api/ # API 层（Alova 自动生成）
├── pages/ # 主包页面
├── pagesBase/ # 基础功能页面（子包）
├── pagesSubA/ # 模块A功能页面（子包）
├── pagesSubB/ # 模块B功能页面（子包）
└── static/ # 静态资源
基础组件开发（AI 擅长）
适合 AI 开发的组件类型：
- 基于设计图的 UI 组件
- 逻辑简单的展示组件
- 纯函数工具方法
示例：基础卡片组件
<script setup lang="ts">
interface Props {
type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
size?: 'small' | 'medium' | 'large'
title?: string
subtitle?: string
shadow?: boolean
bordered?: boolean
}
withDefaults(defineProps<Props>(), {
type: 'default',
size: 'medium',
shadow: true,
bordered: false
})
</script>
<template>
<view
class="base-card"
:class="[
`card--${type}`,
`card--${size}`,
{ 'card--shadow': shadow },
{ 'card--bordered': bordered },
]"
>
<view v-if="$slots.header || title" class="card-header">
<slot name="header">
<text class="card-title">
{{ title }}
</text>
<text v-if="subtitle" class="card-subtitle">
{{ subtitle }}
</text>
</slot>
</view>
<view class="card-content">
<slot />
</view>
<view v-if="$slots.footer" class="card-footer">
<slot name="footer" />
</view>
</view>
</template>
<style scoped>
.base-card {
@apply bg-white rounded-lg overflow-hidden;
}
.card--shadow {
@apply shadow-sm;
}
.card--bordered {
@apply border border-gray-200;
}
</style>
复杂组件开发（人工主导）
需要人工开发的组件特征：
- 涉及全局状态管理
- 复杂的交互逻辑
- 性能敏感的组件
阶段二：UI 还原
通过 Figma MCP 插件，Trae 可以直接读取设计稿并生成对应的的小程序代码，操作步骤如下：
-
获取设计链接：
- 右键点击 Figma 中的 Frame 或图层
- 选择 Copy/Paste As → Copy Link to Selection
- 或使用快捷键
⌘ + L(macOS) /Ctrl + L(Windows)
-
在 Trae 中使用： 打开trae的对话框，选择Builder with MCP，粘贴 Figma 链接，然后输入提示词即可。
-
产出效果
由于项目UI不方便展示，这里贴一个 Trae 生成的叮咚决策器的效果，还原度还是比较高的。
阶段三：API 工程化
Alova + @alova/wormhole 集成
基于项目的 Swagger 文档，实现 API 的自动化集成：
// alova.config.ts
export default {
generator: [{
input: 'http://your-api-domain/v2/api-docs',
platform: 'swagger',
output: 'src/api',
responseMediaType: 'application/json',
bodyMediaType: 'application/json',
version: 3,
type: 'typescript',
global: 'Apis',
handleApi: (apiDescriptor) => {
// 过滤废弃的 API
if (apiDescriptor.deprecated) {
return undefined
}
return apiDescriptor
}
}],
autoUpdate: {
launchEditor: true,
interval: 5 * 60 * 1000 // 每5分钟检查更新
}
}
自动生成的 API 使用
import { usePagination, useRequest } from 'alova'
import { Apis } from '@/api'
// 单次请求 - 自动类型推导
const { data: userInfo, loading: userLoading } = useRequest(
Apis.user.getUserInfo()
)
// 分页请求 - 支持参数类型检查
const {
data: orderList,
loading: listLoading,
loadNext,
refresh
} = usePagination(
(page, size) => Apis.order.getOrderList({
params: {
page,
size,
status: 'pending' // TypeScript 自动检查状态值
}
}),
{
initialData: [],
initialPageSize: 20
}
)
阶段四：业务开发（智能组合）
基于前面的基础设施，Trae 能够智能地组合组件和 API：
<script setup lang="ts">
import { usePagination } from 'alova'
import { Apis } from '@/api'
const searchText = ref('')
const activeTab = ref('all')
// 使用 Alova 进行分页请求
const {
data: orderList,
loading,
loadNext
} = usePagination(
(page, size) => Apis.getOrderList({
page,
size,
status: activeTab.value,
keyword: searchText.value
}),
{
initialData: [],
initialPageSize: 20
}
)
</script>
<template>
<view class="order-list-page">
<!-- Trae 优先推荐项目组件 -->
<NavSearchBar
v-model="searchText"
placeholder="搜索订单号"
@search="handleSearch"
/>
<!-- 自动推荐合适的组件库组件 -->
<wd-tabs v-model="activeTab">
<wd-tab title="全部" name="all" />
<wd-tab title="待付款" name="pending" />
<wd-tab title="已完成" name="completed" />
</wd-tabs>
<!-- 智能组合业务组件 -->
<view class="order-list">
<template v-if="!loading">
<view
v-for="order in orderList"
:key="order.id"
class="order-item"
@click="navigateToDetail(order.id)"
>
<!-- 订单内容 -->
</view>
</template>
<SalesListSkeleton v-else />
</view>
<!-- 空状态处理 -->
<EmptyStatus v-if="!loading && !orderList.length" />
</view>
</template>
阶段五：测试与文档（AI 辅助总结）
Trae 能够分析代码并生成功能总结和测试建议：
/**
* 订单管理模块功能总结 (AI 辅助生成)
*
* 核心功能：
* 1. 订单列表查询和筛选
* 2. 订单详情查看
* 3. 订单状态变更
* 4. 订单统计分析
*
* 主要组件：
* - OrderList.vue: 订单列表页面
* - OrderDetail.vue: 订单详情页面
* - OrderStats.vue: 订单统计组件
*/
实际开发效果
引入 AI 进行工程化开发后，开发体验得到明显改善，可以体现在以下阶段：
| 开发阶段 | 传统方式体验 | AI 辅助体验 | 主要改善 |
|---|---|---|---|
| 项目初始化 | 大量重复性基础设施搭建 | 简单组件和工具函数快速生成 | 基础设施搭建更高效 |
| UI 还原 | 手工对照设计稿编写样式 | 基于设计稿智能生成 | 设计还原速度显著加快 |
| API 集成 | 手工编写类型定义和调用代码 | 自动生成类型安全的代码 | API 开发效率大幅提升 |
| 业务开发 | 需要记忆和查找组件 API | 智能提示和组件推荐 | 开发流畅度明显改善 |
| 测试总结 | 手工编写测试用例和文档 | AI 辅助生成测试点 | 文档生成更便利 |
最佳实践建议
项目启动前（上游依赖质量检查）：
- 评估设计稿质量：确保设计系统完整、命名规范、状态齐全
- 检查 PRD 完整性：业务流程清晰、异常处理明确、数据结构完整
- 验证 API 文档：Swagger 文档完整、示例详细、错误码齐全
- 确认组件库文档：API 文档完整、支持 llms.txt、类型定义完整
- 配置 Trae Rules：根据项目实际，建立项目开发规范
开发过程中：
- 优先开发基础组件和工具函数
- 及时更新 Trae Rules 中的组件库
- 保持 API 文档的同步更新
代码审查时：
- 重点关注 AI 生成代码的业务逻辑正确性
- 验证类型安全和错误处理
- 确保代码符合项目规范
小小总结一下
在实际的项目中，我们验证了 Trae 在 uni-app 项目开发跨端小程序的应用价值，通过合理应用 AI 辅助开发，我们相信可以显著提升开发效率和代码质量，让开发者能够将更多精力投入到产品创新和用户体验优化上，同时期待 Trae 等 AI 编程工具能够提供更好的氛围编程体验。
感谢阅读！欢迎评论区沟通讨论👇。希望这份实践指南能为您的团队在 AI 辅助开发道路上提供有价值的参考。
