uniaap用AI转换成uniapp x

欢迎到专业群（ uni-app x技术交流群 ） 咨询，群中有相关专业的管理员和群友。

针对你的情况（1万行代码的 uni-app 项目，仅适配 App，想用 AI 转换成 uni-app x），我给出大层面的操作建议和推荐的 Skills。

核心认知：这不是简单的代码翻译，而是架构重构

首先要有心理准备：uni-app 转 uni-app x 不是一键转换，本质上是重写项目。原因是：

• uni-app x 不使用 Webview，使用原生渲染，底层机制完全不同
• 页面类型从 .vue 变成 .uvue，脚本语言从 JavaScript 变成强类型的 UTS
• 不支持 plus API、weex，不支持 npm/JS 生态的第三方库
• CSS 支持是子集，大量 Web 属性不可用

所以 AI 的作用是加速重构过程，而不是自动完成转换。

大层面的操作步骤

第一步：评估现有项目的"可迁移度"

在动手前，先梳理你项目中哪些东西可以直接迁移，哪些必须替换或重写：

可以直接迁移的部分（AI 转换成功率较高）：

• Vue 2/3 选项式 API → 组合式 API 的语法转换
• 基础 UI 布局（flex 布局）
• uni-app 基础组件（view、text、image、button 等）
• uni-app 基础 API（request、storage、navigator 等）

必须手动处理的部分（AI 无法直接解决）：

• 使用了 plus.* API 的代码（需迁移到 uni-app x 原生 API 或 UTS 插件）
• 引用了任何 npm 上的 JS 库（需找到 UTS 替代方案或原生库替代）
• 第三方 UI 库（需替换为 uni-ui-x 或原生 UI）
• 使用了 Web 特有的 CSS 属性
• nvue 页面（uni-app x 不支持此类型）

第二步：搭建 AI 辅助环境

推荐的 AI 工具和 Skills：

1. uni-agent（强烈推荐）

   • 这是 DCloud 官方推出的最了解 uni 产品的 AI 工具
   • 支持自动读取编译日志并自动修复错误，实现"自迭代"
   • 可以自动将选项式 API 转为组合式 API
   • 访问地址：https://doc.dcloud.net.cn/uni-app-x/ai/

2. uni-app-x-mcp

   • 可以让 AI 自动读取你项目中的组件信息，生成代码时更准确
   • 文档：https://doc.dcloud.net.cn/uni-app-x/tutorial/rules_mcp.html

3. AI Rules / Skills 配置

   • DCloud 提供了专门的 AI Rules，让 AI 更懂 uni-app x 的规范
   • 地址：https://gitcode.com/dcloud/uni-app-x-ai-rules

第三步：分阶段执行转换

按照官方迁移指南，分 6 个阶段逐步推进（每个阶段完成后先验证，再进入下一阶段）：

阶段1：改造布局为纯 flex

• 使用 AI 把所有布局改为 flex 布局（uni-app x 不支持 block、grid）
• 在 uni-app 中先验证通过

阶段2：文字必须包裹在 text 组件中

• 所有文字节点必须放在 <text> 组件内，样式不从父继承
• 在 uni-app 中验证

阶段3：收敛 CSS 用法

• 选择器改成简单的 class 写法
• 单位只保留 px、rpx、%
• 去掉不支持的 CSS 属性和 @rule

阶段4：升级到 Vue3 组合式 API

• 选项式 API → 组合式 API
• 替换 vuex 为 pinia
• 去掉 mixin，替换 this 为 getCurrentInstance()!.proxy!
• 在 uni-app 中验证

阶段5：创建 uni-app x 项目，先跑 Web/小程序

• 新建 uni-app x 项目，复制代码，批量将 .vue/.nvue 重命名为 .uvue
• 先运行到 Web 端和微信小程序，验证基础功能

阶段6：适配 App 端（Android/iOS）

• 替换所有 plus API 为 uni-app x 原生 API
• 处理 UTS 强类型问题
• 适配平台差异

完整迁移指南：https://doc.dcloud.net.cn/uni-app-x/uniapptox.html

针对你项目的具体建议

由于你项目只有 1 万行代码且仅适配 App，建议：

1. 不要追求一次性全转完，先挑一个功能简单的页面做试点，跑通整个流程

2. 优先用 uni-agent，因为它可以：

   • 自动读取 Android/iOS 控制台日志
   • 自动修复编译错误
   • 自动截图对比 UI
   • 自动排查是否属于 uni-app x 的已知 bug

3. 对于用到的第三方 JS 库：

   • 去插件市场搜索 UTS 版本替代：https://ext.dcloud.net.cn/search
   • 如果没有，可以用 UTS 直接调用 Android/iOS 原生库（如 Kotlin、Swift 生态的库）

4. UI 组件替换：

   • 官方提供了 uni-ui-x 组件库（插件 ID：27852）
   • 如果需要更完整的 UI 方案，可以在插件市场搜索，如 TMUI 等第三方 UI 库

5. 编译到 App 时的注意点：

   • Android 端：可混用 Kotlin/Java，使用 Gradle 仓库
   • iOS 端：可混用 Swift（OC 需封装为库）
   • 代码默认在 UI 主线程运行，耗时操作需放到子线程

推荐的 AI 提示词

如果使用其他 AI 工具（非 uni-agent），可以发送以下系统提示词锁定技术栈：

你作为一位精通 Vue 3 组合式 API 和 UTS 的资深 uni-app x 跨平台应用开发专家，  
在开发过程中需兼顾 Android、iOS 多端兼容性，通过条件编译处理平台差异，  
严格遵循 uni-app x 最佳实践与性能优化建议，  
优先使用 flex 布局，文字必须包裹在 text 组件中，  
UTS 是强类型语言，注意类型声明，  
CSS 只使用 uni-app x 支持的属性和单位（px、rpx、%）。

本助手使用国产模型，生成代码准确率较低。强烈建议使用uni-agent生成代码

有什么具体的转换问题，可以继续交流。