前言

大家好，我是若城。本文将通过实战案例，带大家深入了解如何使用 CodeWave 智能开发平台 快速搭建一款功能完整的记账应用，体验 AI 驱动的智能开发模式。

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

• 智能大模型驱动：基于 AI 大模型和全栈智能架构，提供智能化的软件生产方式
• 低代码 + AI 融合：支持从"智能生成"到"可视化拖拽调整"的灵活开发模式
• 全栈开发能力：通过自研的 NASL 编程语言，打通前后端开发壁垒
• 四大核心模块：覆盖应用开发全生命周期

CodeWave 平台架构

快速开始

本教程将通过实战演示，带你从零开始构建一个完整的记账应用。整个开发过程分为以下几个步骤：

准备工作：访问 网易 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. 在输入框中描述问题：

快速记账表单的宽度没有适配，请修复

输入修复需求

1. 等待 AI 修复完成后重新发布
2. 回到应用界面查看效果

修复后的效果：

修复完成

步骤五：应用预览

确认项目无误后，点击右上角的 预览 按钮查看实际运行效果。

预览按钮

等待构建流程完成：

构建流程

应用运行效果：

应用演示

从预览效果可以看出，通过 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 官网