(目錄)

前言

大家好，我是若城。本文將通過實戰案例，帶大家深入瞭解如何使用 CodeWave 智能開發平台 快速搭建一款功能完整的記賬應用，體驗 AI 驅動的智能開發模式。

CodeWave 智能開發平台簡介

CodeWave 智能開發平台 是網易推出的新一代智能開發工具，具有以下核心特性：

• 智能大模型驅動：基於 AI 大模型和全棧智能架構，提供智能化的軟件生產方式
• 低代碼 + AI 融合：支持從"智能生成"到"可視化拖拽調整"的靈活開發模式
• 全棧開發能力：通過自研的 NASL 編程語言，打通前後端開發壁壘
• 四大核心模塊：覆蓋應用開發全生命週期

快速開始

本教程將通過實戰演示，帶你從零開始構建一個完整的記賬應用。整個開發過程分為以下幾個步驟：

準備工作：訪問 網易 CodeWave 官網 完成註冊，點擊右上角的 智能開發平台 按鈕進入開發環境。

步驟一：創建應用

操作步驟：

1. 進入 應用中心，點擊右上角的 創建應用 按鈕
2. 在彈窗中選擇 創建空白應用

配置應用信息：

• 組件庫：選擇 Vue3 版本
• 初始類型：選擇 H5 端
• 其他信息：根據實際需求填寫

填寫完成後點擊 創建 按鈕，約 5 秒後開發環境即可創建完成。

創建完成後的開發環境如下所示：

步驟二：AI 智能生成組件

雖然 CodeWave 支持通過拖拽組件的方式完成開發，但本文將重點展示其 AI 智能開發 功能，讓你體驗 AI 驅動的高效開發模式。

操作步驟：

1. 點擊左側文件樹中的 Index（首頁）
2. 在右側 Tab 欄選擇 組件 欄目
3. 點擊輸入框旁邊的 智能生成按鈕
4. 在彈窗中輸入需求描述

提示詞示例：

開發首頁記賬表單和統計功能：
1. 創建快速記賬表單（收入/支出切換、金額、分類、備註、時間）
2. 實現分類選擇器（網格佈局，內置圖標）
3. 實現當月統計看板（總收入、總支出、結餘）
4. 表單驗證和提交邏輯
5. 記賬成功後提示並刷新數據

視覺風格要求：
1. 簡潔現代的設計風格
2. 清新、專業的配色方案
3. 圖標清晰易懂
4. 響應式佈局，適配不同屏幕尺寸

輸入完成後，點擊 開始創建 按鈕，系統將自動生成組件代碼。

智能修復：構建過程中如果出現錯誤，系統會自動檢測並提供修復選項，點擊 修復 按鈕即可。

組件生成完成後的效果：

步驟三：發佈組件並集成到應用

組件創建完成後，需要將其發佈並集成到主應用中。

發佈組件：點擊右上角的 發佈 或 調試發佈 按鈕。

集成組件：回到應用界面，在右側 組件 Tab 中點擊 擴展，選擇剛才創建的組件即可使用。

步驟四：AI 輔助問題修復

在實際開發中，組件可能需要進行適配調整。CodeWave 的 AI 能力同樣可以幫助我們快速解決問題。

問題示例：組件拖拽到應用後，寬度未能正確適配。

AI 修復流程：

1. 回到組件編輯界面
2. 在輸入框中描述問題：

快速記賬表單的寬度沒有適配，請修復

3. 等待 AI 修復完成後重新發布
4. 回到應用界面查看效果

修復後的效果：

步驟五：應用預覽

確認項目無誤後，點擊右上角的 預覽 按鈕查看實際運行效果。

等待構建流程完成：

應用運行效果：

從預覽效果可以看出，通過 AI 智能生成的界面，無論是視覺設計還是交互體驗都達到了較高的水準。

數據庫集成

界面搭建完成後，下一步需要為應用添加數據持久化能力。同樣，我們將利用 AI 能力來完成數據庫操作功能的開發。

使用提示詞優化功能

CodeWave 提供了 一鍵優化 功能，可以幫助我們完善需求描述。

原始需求描述：

修改快速記賬表單組件，在點擊確認記賬時觸發數據存儲操作。
此外需要新增一個數據庫查詢的組件

點擊一鍵優化後的描述：

修改快速記賬表單組件，在點擊確認記賬時觸發數據存儲操作。

同時，新增一個數據查詢組件，用於展示數據庫中的數據。

**快速記賬表單組件：**

*   **屬性 (Props):**
    *   `onConfirm`: (Function) 確認記賬時觸發的回調函數。
*   **事件 (Events):**
    *   `confirm`: (Event) 確認記賬時觸發，並傳遞記賬數據。

**數據查詢組件：**

*   **屬性 (Props):**
    *   `dataSource`: (Array) 用於展示的數據源。
    *   `columns`: (Array) 定義表格列的配置。
*   **事件 (Events):**
    *   `refreshData`: (Event) 觸發數據刷新操作。
*   **插槽 (Slots):**
    *   `header`: (Slot) 自定義表格頭部內容。
    *   `rowAction`: (Slot) 自定義每行操作按鈕。

優化後的描述更加規範和詳細，有助於 AI 生成更符合需求的代碼。

發佈並集成數據查詢組件

組件生成完成後，點擊 發佈 按鈕。回到應用界面，在 擴展 選項卡中可以看到新增的數據查詢組件。

創建底部導航與頁面切換

為了展示數據查詢功能，我們需要創建一個多頁面導航結構。

添加底部標籤欄：

1. 在首頁底部拖拽 標籤欄 組件
2. 配置標籤欄選項（首頁、查詢等）

創建查詢頁面：

1. 新建 記賬查詢 頁面
2. 添加相同的標籤欄組件

配置頁面跳轉：

1. 選中標籤欄組件
2. 在右側交互屬性中配置對應的鏈接地址

説明：標準做法應使用 Tab 內容切換，本文為演示效果採用頁面跳轉方式。

配置完成後，點擊 預覽 按鈕即可體驗完整的記賬應用。

總結

通過本教程，我們使用 CodeWave 智能開發平台快速完成了一個功能完整的記賬應用開發。 CodeWave 智能開發平台為我們展示了 AI 時代軟件開發的新範式。隨着 AI 技術的不斷進步，未來的開發工作將更加註重創意和業務理解，而繁瑣的代碼編寫將交由 AI 完成。

---

相關資源：

• CodeWave 官網