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

CodeGenie 基于 AI 大模型，支持通過自然語言描述生成 HarmonyOS 萬能卡片工程，覆蓋 UI 布局、邏輯代碼及資源文件。

1. 使用約束

需求描述維度：需明確卡片用途（如 “導(dǎo)航出行”）、功能（如 “搜索按鈕 + 路線圖標(biāo)”），尺寸可選（12/22/24/44，AI 可智能推薦）。

限制：生成預(yù)覽圖后不支持增量修改，需一次性完善需求。

2. 生成流程

輸入需求：在 CodeGenie 面板選擇 “Service Widget”，描述卡片功能（例：“導(dǎo)航出行卡片，包含搜索框和駕車 / 打車按鈕”）。

智能生成：AI 返回 1~3 張卡片預(yù)覽圖及 UI 代碼，支持查看尺寸、布局和交互效果。

保存工程：

手動保存：復(fù)制代碼、插入編輯區(qū)或創(chuàng)建文件。

自動保存：點擊 “保存工程”，代碼、配置和資源文件自動存入項目目錄（新增??formcommon??等文件夾存放邏輯代碼）。

3. 目錄結(jié)構(gòu)與自定義配置

邏輯代碼：

數(shù)據(jù)交互：支持?jǐn)?shù)據(jù)庫或網(wǎng)絡(luò)請求刷新卡片（元服務(wù)僅支持網(wǎng)絡(luò)請求）。

卡片事件：通過??router???跳轉(zhuǎn)頁面、??call???拉起應(yīng)用、??message???刷新內(nèi)容，配置在??FormAction.ets??中。

目錄路徑：??module/src/main/ets/formcommon???下存放配置文件（如??formdbsetting???/??formhttpsetting???），??utils??目錄為工具類（不可修改）。

二、編譯報錯智能分析

當(dāng) DevEco Studio 編譯失敗時，CodeGenie 自動分析錯誤原因并提供解決方案，提升問題定位效率。

1. 觸發(fā)方式

編譯報錯后，點擊報錯信息右側(cè)的 “Explain with AI” 圖標(biāo)（需先登錄 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 自動生成逐條注釋和功能總結(jié)，幫助開發(fā)者快速理解復(fù)雜邏輯。

1. 操作步驟

選中??.ets???或??.cpp??文件中的代碼行（最多 20000 字符）。

右鍵選擇 “CodeGenie> Explain Code”，AI 返回注釋說明。

2. 解讀示例

代碼片段：

Button('搜索')
  .fontSize(30)
  .onClick(() => {
    router.pushUrl({ url: 'pages/Search' });
    console.info('跳轉(zhuǎn)搜索頁面');
  })

解讀結(jié)果：

// 創(chuàng)建文本為“搜索”的按鈕，字體大小30px  
// 點擊事件觸發(fā)頁面跳轉(zhuǎn)至'pages/Search'，并打印日志  

四、工具集成與最佳實踐

統(tǒng)一入口：通過 DevEco Studio 右側(cè)邊欄 CodeGenie 面板或快捷鍵（Alt+U）訪問所有功能，需先登錄華為賬號。

協(xié)同使用：生成卡片后若編譯報錯，可結(jié)合報錯分析功能修正代碼；復(fù)雜邏輯通過代碼解讀輔助理解。

注意事項：

卡片生成后需手動驗證交互邏輯，代碼解讀結(jié)果需結(jié)合業(yè)務(wù)場景確認(rèn)準(zhǔn)確性。

編譯報錯分析依賴網(wǎng)絡(luò)，需確保網(wǎng)絡(luò)連接穩(wěn)定。

##??鴻蒙開發(fā)??工具##CodeGenie##商務(wù)#

審核編輯 黃宇