一、萬能卡片生成（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##商務#

審核編輯 黃宇