零基础入门鸿蒙NEXT开发实战
鸿蒙 HarmonyOS NEXT（星河版）作为华为最新的纯血鸿蒙系统，彻底剥离了安卓代码，基于自研内核，标志着鸿蒙生态进入了一个全新的独立阶段。对于零基础的小白来说，从入门到实战需要掌握开发环境搭建、UI基础语法、页面跳转逻辑以及数据存储等核心技能。
以下将手把手带你完成一个“简易待办事项”App的开发，涵盖从环境准备到代码实现的完整流程。
一、 开发准备：工欲善其事
在开始编写代码之前，必须配置好标准的开发环境。HarmonyOS NEXT 的开发主要依赖于华为提供的集成开发环境。
1. 核心工具介绍
- DevEco Studio NEXT：这是官方推荐的 IDE（集成开发环境），提供了代码编辑、调试、预览和打包发布的一站式服务。
- SDK：软件开发工具包，包含了编译和运行鸿蒙应用所需的库文件和模拟器镜像。
2. 环境搭建步骤
- 下载安装：访问华为开发者联盟官网，下载最新版本的 DevEco Studio NEXT。安装过程中，Node.js、JDK 等依赖项通常会由 IDE 自动引导安装。
- 配置环境：启动 DevEco Studio，进入
Settings->SDK，下载 HarmonyOS NEXT 的对应版本的 SDK（API 12 及以上）。 - 创建项目：
- 点击
New Project。 - 选择模板：对于新手，建议选择"Empty Ability"（空模板），这样可以清晰地看到项目结构。
- 填写项目名称（如
MyTodoApp）、包名（如com.example.todo）和保存路径。 - 设备类型：选择"Phone"（手机）。
- 语言选择：推荐选择ArkTS（TypeScript 的扩展，鸿蒙主力开发语言）。
- 点击
二、 核心概念：ArkTS 声明式 UI 开发基础
HarmonyOS NEXT 采用 ArkTS 语言，其核心特点是声明式 UI。你不需要像写安卓 Java 那样去findViewById，而是通过描述 UI 的结构来构建界面。
1. 基本语法结构
所有的 UI 页面都由@Entry和@Component装饰器修饰的结构体构成。
// 基础页面结构示例 import { TitleBar, Button } from '@kit.ArkUI'; // 引入系统组件 @Entry // 标记该页面为应用入口 @Component // 标记该结构体为一个自定义组件 struct ToDoPage { // 1. 状态变量：UI会根据这些变量的变化自动刷新 @State taskTitle: string = "学习鸿蒙开发"; build() { // 2. build方法内部描述UI结构 Column() { // 列容器，垂直排列子组件 Text(this.taskTitle) // 文本组件，显示状态变量 .fontSize(24) // 设置字体大小 .fontWeight(FontWeight.Bold) Button("点击完成任务") .onClick(() => { // 点击事件 this.taskTitle = "任务已完成！"; // 修改变量，UI自动更新 }) } .width('100%') // 容器宽度占满屏幕 .height('100%') } }2. 模块化开发思想
随着项目变大，不能把所有代码写在一个文件里。鸿蒙支持模块化开发，可以将通用的 UI 组件或功能函数抽取出来，通过export导出，再在需要的地方import导入。
| 模块类型 | 说明 | 作用 |
|---|---|---|
| HAP (Harmony Ability Package) | 应用模块包，包含代码、资源、配置文件。 | 应用的基本单元，可以直接安装运行。 |
| HAR (Harmony Archive) | 静态共享包。 | 封装通用组件、工具类，供多个 HAP 引用，代码复用。 |
| HSP (Harmony Shared Package) | 动态共享包。 | 多个 HAP 共享代码和资源，运行时动态加载，减少包体积。 |
三、 实战演练：开发一个“待办事项”App
我们将创建一个包含列表展示、添加任务功能的简单应用。
1. 数据模型定义
首先，我们需要定义一个任务的数据结构。
// TodoItem.ets (定义任务数据模型) export class TodoItem { id: number; // 唯一标识 title: string; // 任务内容 isCompleted: boolean; // 是否完成 constructor(title: string) { this.id = Date.now(); // 使用时间戳作为简单ID this.title = title; this.isCompleted = false; } }2. 主页面逻辑实现
在Index.ets中实现列表的渲染和添加功能。这里使用了ForEach循环渲染列表，这是 ArkUI 中处理列表数据的核心语法。
// Index.ets (主页面) import { TodoItem } from './TodoItem'; // 引入数据模型 @Entry @Component struct Index { // 状态变量：存储任务列表 @State todoList: Array<TodoItem> = [ new TodoItem("搭建鸿蒙开发环境"), new TodoItem("学习ArkTS基础语法") ]; // 状态变量：输入框的文本内容 @State inputText: string = ""; build() { Column() { // 1. 顶部标题区 Text("我的待办清单") .fontSize(30) .fontWeight(FontWeight.Bold) .margin({ top: 20, bottom: 20 }) // 2. 输入区域 (行容器) Row() { TextInput({ placeholder: "输入新任务..." }) .layoutWeight(1) // 占用剩余空间 .height(40) .onChange((value: string) => { this.inputText = value; // 实时更新输入内容 }) Button("添加") .height(40) .onClick(() => { if (this.inputText.length > 0) { // 添加新任务到数组头部 this.todoList.unshift(new TodoItem(this.inputText)); this.inputText = ""; // 清空输入框 } }) } .width('100%') .padding({ left: 10, right: 10 }) .margin({ bottom: 20 }) // 3. 列表展示区域 List() { // 列表容器 ForEach(this.todoList, (item: TodoItem) => { ListItem() { // 列表项 Row() { Text(item.title) .fontSize(18) .decoration({ type: item.isCompleted ? TextDecorationType.LineThrough : TextDecorationType.None }) // 完成则划线 .layoutWeight(1) Checkbox({ name: 'check' + item.id }) .select(item.isCompleted) // 选中状态 .onChange((value: boolean) => { item.isCompleted = value; // 更新状态 }) } .width('100%') .padding(10) } }, (item: TodoItem) => item.id.toString()) // key生成器，必须唯一 } .layoutWeight(1) // 占用剩余垂直空间 .width('100%') .divider({ strokeWidth: 1, color: Color.Gray }) // 分割线 } .width('100%') .height('100%') .backgroundColor('#F1F1F1') } }3. 代码详解（小白必看）
@State装饰器：这是响应式编程的关键。只要被@State修饰的变量（如todoList）发生变化，UI 就会自动重新渲染。你不需要手动去刷新界面。TextInput&Button：系统提供的通用组件，分别用于输入和点击操作。ForEach：用于循环渲染数组。它接收三个参数：数据源、子组件生成函数、键值生成函数。layoutWeight：类似安卓中的layout_weight或 CSS 的 flex 布局，用于在父容器中按比例分配剩余空间。
四、 进阶：页面跳转与数据持久化
一个完整的 App 通常由多个页面组成。
1. 页面路由跳转
假设我们要点击某个任务跳转到详情页。
// 引入路由模块 import router from '@ohos.router'; // 在点击事件中 router.pushUrl({ url: 'pages/DetailPage', // 目标页面路径 params: { // 传递参数 taskId: item.id, taskTitle: item.title } });2. 数据持久化
应用关闭后数据不丢失，需要将数据保存到本地。鸿蒙推荐使用Preferences（轻量级键值对存储）。
// 数据存储示例 import preferences from '@ohos.data.preferences'; // 保存数据 async saveData(key: string, value: string) { let dataPreferences = await preferences.getPreferences(getContext(), 'mystore'); await dataPreferences.put(key, value); await dataPreferences.flush(); // 异步保存到文件 } // 读取数据 async loadData(key: string) { let dataPreferences = await preferences.getPreferences(getContext(), 'mystore'); let value = await dataPreferences.get(key, 'default_value'); return value; }五、 总结与学习建议
学习 HarmonyOS NEXT 是一个循序渐进的过程：
- 入门阶段：熟悉 ArkTS 的基本语法（装饰器、组件、状态管理）。重点掌握
Column、Row、Stack等基础布局容器。 - 进阶阶段：学习页面路由、网络请求、动画效果以及数据持久化。
- 实战阶段：尝试开发一个包含完整功能的应用，如天气查询 App 或个人记账本，并尝试将其打包到真机或模拟器上运行。
HarmonyOS NEXT 带来了全新的分布式架构和元服务能力，未来在万物互联场景下大有可为。坚持动手写代码，多看官方文档，你也能快速掌握这一前沿技术。