CodeGenie 工具功能汇总

一、万能卡片生成（Service Widget）

CodeGenie 基于 AI 大模型，支持通过自然语言描述生成 HarmonyOS 万能卡片工程，覆盖 UI 布局、逻辑代码及资源文件。

1. 使用约束

需求描述维度：需明确卡片用途（如 “导航出行”）、功能（如 “搜索按钮 + 路线图标”），尺寸可选（12/22/24/44，AI 可智能推荐）。

限制：生成预览图后不支持增量修改，需一次性完善需求。

2. 生成流程

输入需求：在 CodeGenie 面板选择 “Service Widget”，描述卡片功能（例：“导航出行卡片，包含搜索框和驾车 / 打车按钮”）。

智能生成：AI 返回 1~3 张卡片预览图及 UI 代码，支持查看尺寸、布局和交互效果。

保存工程：

手动保存：复制代码、插入编辑区或创建文件。

自动保存：点击 “保存工程”，代码、配置和资源文件自动存入项目目录（新增​​formcommon​​等文件夹存放逻辑代码）。

3. 目录结构与自定义配置

逻辑代码：

数据交互：支持数据库或网络请求刷新卡片（元服务仅支持网络请求）。

卡片事件：通过​​router​​​跳转页面、​​call​​​拉起应用、​​message​​​刷新内容，配置在​​FormAction.ets​​中。

目录路径：​​module/src/main/ets/formcommon​​​下存放配置文件（如​​formdbsetting​​​/​​formhttpsetting​​​），​​utils​​目录为工具类（不可修改）。

二、编译报错智能分析

当 DevEco Studio 编译失败时，CodeGenie 自动分析错误原因并提供解决方案，提升问题定位效率。

1. 触发方式

编译报错后，点击报错信息右侧的 “Explain with AI” 图标（需先登录 CodeGenie）。

开启路径：​​File > Settings > General​​，勾选 “Compilation error explainer”。

2. 解决示例

错误类型：ArkTS 类型推断错误（如 “any” 类型警告）。

解决方案：检查类型注解、定义接口、更新​​tsconfig.json​​​的​​strict​​选项，示例如下：

 

// 错误代码（缺少类型注解）
function sum(a, b) { return a + b; }
// 修正后
function sum(a: number, b: number): number { return a + b; }

 

三、代码智能解读（Explain Code）

选中代码片段后，CodeGenie 自动生成逐条注释和功能总结，帮助开发者快速理解复杂逻辑。

1. 操作步骤

选中​​.ets​​​或​​.cpp​​文件中的代码行（最多 20000 字符）。

右键选择 “CodeGenie> Explain Code”，AI 返回注释说明。

2. 解读示例

代码片段：

 

Button('搜索')
  .fontSize(30)
  .onClick(() = > {
    router.pushUrl({ url: 'pages/Search' });
    console.info('跳转搜索页面');
  })

 

解读结果：

 

// 创建文本为“搜索”的按钮，字体大小30px  
// 点击事件触发页面跳转至'pages/Search'，并打印日志  

 

四、工具集成与最佳实践

统一入口：通过 DevEco Studio 右侧边栏 CodeGenie 面板或快捷键（Alt+U）访问所有功能，需先登录华为账号。

协同使用：生成卡片后若编译报错，可结合报错分析功能修正代码；复杂逻辑通过代码解读辅助理解。

注意事项：

卡片生成后需手动验证交互逻辑，代码解读结果需结合业务场景确认准确性。

编译报错分析依赖网络，需确保网络连接稳定。

##​​鸿蒙开发​​工具##CodeGenie##商务#

审核编辑 黄宇