OKEx for Android
283.16MB · 2025-09-16
本文分享使用 TRAE 作为主要 AI 编程工具，开发 uni-app 跨平台小程序的完整实践经验。通过深入探索 AI 辅助开发的具体应用场景，我们整理出一套完整的开发流程和工具链集成方案。
在这个项目中，我们使用 TRAE 作为主要 AI 编程工具，集成 Figma、Alova 网络请求框架、WotUI 组件库等现代化工具，通过 AI 辅助实现了开发效率的显著提升，在本案例中整体开发时间从传统的 40 人日缩短至 22 人日，效率提升约 45%。根据团队的实际体验，相比传统开发方式，开发体验有了明显改善。
本文使用的 TRAE 为国际版，目前 TRAE 已经内置了 Figma 工具，可以尝试直接使内置的 Figma 工具 来还原 UI，本文所写项目为使用 Figma MCP 实现。
在传统开发场景下，存在很多场景可以使用 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-…
核心框架： @uni-helper
开发引擎： uni-app
构建工具： Vite
样式方案： UnoCSS
代码质量： ESLint + TypeScript
UI 组件库： Wot UI
CI/CD: uni-mini-ci
路由管理： uni-mini-router
网络请求： Alova
状态管理： Pinia
我们首先对 TRAE 进行一些配置：包括 figma mcp、文档集、规则等，使 TRAE 的开发思路更加符合我们的要求。
figma mcp 有多种配置方式。这里我们直接使用 figma 官方提供的 Figma Dev Mode MCP。
目前也可以使用 TRAE 提供的内置的 figma 插件，即可不进行此配置。
计划要求： Professional、Organization 或 Enterprise 计划
席位要求： Dev 或 Full 席位
应用要求： 必须使用 Figma beta 版桌面应用：www.figma.com/downloads/
重要：服务器将在本地运行于 http://127.0.0.1:3845/mcp，请记住此地址用于下一步配置。
按照如下操作，打开 AI 功能管理->MCP
选择手动配置
填入以下配置
{
"mcpServers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
看到如下图，Figma MCP 即可使用了，其他 MCP 接入方案也大同小异
还是 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 提供完整的类型定义
还是 AI 功能管理界面，我们定位到上下文页签，选择添加文档集
填入 wot-design-uni.cn/llms-full.t… 即可
整个项目的开发大致可以总结为以下五个阶段：
原则：架构设计靠人工，标准实现靠 AI
项目结构设计（人工主导）
选择 wot-demo 作为项目基础架构，代码结构如下
src/
├── components/ # 通用基础组件
├── business/ # 业务组件
├── composables/ # 组合式 API
├── store/ # Pinia 状态管理
├── utils/ # 工具函数
├── api/ # API 层（Alova 自动生成）
├── pages/ # 主包页面
├── pagesBase/ # 基础功能页面（子包）
├── pagesSubA/ # 模块A功能页面（子包）
├── pagesSubB/ # 模块B功能页面（子包）
└── static/ # 静态资源
基础组件开发（AI 擅长）
适合 AI 开发的组件类型：
示例：基础卡片组件
<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>
复杂组件开发（人工主导）
需要人工开发的组件特征：
涉及全局状态管理
复杂的交互逻辑
性能敏感的组件
通过 Figma MCP 插件，TRAE 可以直接读取设计稿并生成对应的小程序代码。
右键点击 Figma 中的 Frame 或图层
选择 Copy/Paste As → Copy Link to Selection
或使用快捷键 ⌘ + L （macOS） / Ctrl + L （Windows）
打开 TRAE 的对话框，选择 Builder with MCP，粘贴 Figma 链接，然后输入提示词即可。
由于项目 UI 不方便展示，这里贴一个 TRAE 生成的叮咚决策器的效果，还原度还是比较高的。
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>
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 编程工具能够提供更好的氛围编程体验。
283.16MB · 2025-09-16
286.59MB · 2025-09-16
286.72MB · 2025-09-16
