DevEco Studio 内置的AI编程辅助工具（三）

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

DevEco Studio 内置的AI编程辅助工具（一）

DevEco Studio 内置的AI编程辅助工具（二）

一、页面生成 

1.1 使用方式

1.1.1 访问入口

两种访问方式：

1. 输入框下拉菜单：在输入框左下角下拉框选择"Generate UI Code"

2. 命令触发：在输入框输入"/"调出命令面板，选择"Generate UI Code"

1.1.2 输入方式

支持三种输入方式：

1. 自由输入：手动输入页面主题和具体需求

2. 快捷模板：使用预设的模板快速生成

3. 图片参考：上传页面参考图片，AI解析生成对应代码

当前支持五大垂直领域：美食、旅游、购物、新闻、教育。

1.2.1 标签辅助

支持勾选：

• 行业领域标签

• 常用功能标签

1.2.2 多轮对话

• 持续优化：通过多轮对话新增或修改页面内容

• 关键字修改：可修改页面中的具体关键字信息

• 历史回溯：点击历史对话中的"回到本次"可回退到之前的页面状态

1.3 保存流程

1.3.1 保存设置

点击"Save to Project"后弹出设置窗口：

• 页面名称：设置生成的页面名称

• 模块指定：指定页面保存的目标模块

1.3.2 文件状态标识

保存时文件状态通过颜色标识：

• 绿色文件：新增文件

• 蓝色文件：已有文件但有更改

1.3.3 完成步骤

1. 点击"Next"将代码和资源保存到工程

2. 点击"Finish"完成添加

二、卡片生成

2.1 使用约束

2.1.1 需求描述维度建议

序号	描述维度	说明	举例
1	卡片用途	卡片的业务场景和用途	"电商购物卡片"、"娱乐类卡片"
2	卡片功能	包含的组件及其状态	"新品上市主标题"、"商品搜索按钮"
3	卡片尺寸	可选尺寸：1*2、2*2、2*4、4*4	"2*2尺寸卡片"、"中卡片"

注意：卡片尺寸为非必选项，AI会根据需求智能选择最佳尺寸。

2.1.2 限制说明

• 不支持在生成预览图后继续进行增量修改

2.2 使用流程

2.2.1 访问方式

两种访问方式：

1. 命令触发：输入"/"后选择"Service Widget"

2. 下拉菜单：在输入框左下角下拉框选择"Service Widget"

版本兼容性：

• DevEco Studio 6.0.0 Beta1之前版本：在对话区域下拉框中选择"Service Widget"

2.2.2 交互过程

1. 多轮交互：根据AI提示不断完善需求

2. 生成数量：每次生成1-3张卡片

3. 预览效果：生成卡片预览效果图

2.3 卡片保存

2.3.1 查看选项

点击查看图标可查看：

• 卡片UI代码

• 配置信息

• 静态资源文件

2.3.2 保存方式

方式一：手动保存

• 复制：复制代码到剪贴板

• 插入：插入到当前文件

• 创建文件：创建新文件保存

方式二：自动保存

• 点击"保存工程"按钮

• 自动保存以下内容到工程对应目录：

  • 卡片代码

  • 配置信息

  • 静态资源文件

• 默认勾选：保存逻辑代码（用于配置卡片事件和数据）

2.4 逻辑代码配置

2.4.1 逻辑代码功能（包含两类）:

1. 卡片数据交互：触发卡片页面刷新

   • 应用工程：支持数据库或网络请求方式

   • 元服务工程：仅支持网络请求方式

2. 卡片事件：

   • router事件：跳转到指定UIAbility

   • call事件：拉起UIAbility到后台

   • message事件：刷新卡片内容

2.4.2 目录结构

module > src > main > ets
└── formcommon          # 卡片逻辑代码目录
    ├── formsetting     # 用户可配置文件
    │   ├── formdbsetting      # 数据库刷新方式配置
    │   │   ├── formdbinfo     # 卡片信息文件
    │   │   └── UserSettings.ets  # 数据规则配置
    │   ├── formhttpsetting    # 网络请求刷新方式配置
    │   │   ├── formhttpinfo   # URL信息文件
    │   │   └── UserSettings.ets  # 请求规则配置
    │   └── FormAction.ets     # 卡片事件配置
    └── utils           # 工具类目录（用户不可修改）

2.4.3 说明

• 网络请求方式：需要在EntryFormAbility.ets中注释FormDbUpdate接口，启用FormHttpUpdate接口

• 工具目录：utils目录用户不可修改，再次生成时会刷新

2.5 自定义配置

2.5.1 卡片事件配置

1. FormAction.ets：配置卡片router事件的具体页面分发规则

2. EntryAbility.ets：在onWindowStageCreate方法中插入页面分发接口调用

接口位置调整：

• 默认插入到方法开头

• 可根据工程逻辑移动至合适位置

• 确保页面能正常跳转