鸿蒙 HarmonyOS NEXT（星河版）作为华为最新的纯血鸿蒙系统，彻底剥离了安卓代码，基于自研内核，标志着鸿蒙生态进入了一个全新的独立阶段。对于零基础的小白来说，从入门到实战需要掌握开发环境搭建、UI基础语法、页面跳转逻辑以及数据存储等核心技能。

以下将手把手带你完成一个“简易待办事项”App的开发，涵盖从环境准备到代码实现的完整流程。

一、 开发准备：工欲善其事

在开始编写代码之前，必须配置好标准的开发环境。HarmonyOS NEXT 的开发主要依赖于华为提供的集成开发环境。

1. 核心工具介绍

  • DevEco Studio NEXT：这是官方推荐的 IDE（集成开发环境），提供了代码编辑、调试、预览和打包发布的一站式服务。
  • SDK：软件开发工具包，包含了编译和运行鸿蒙应用所需的库文件和模拟器镜像。

2. 环境搭建步骤

  1. 下载安装：访问华为开发者联盟官网，下载最新版本的 DevEco Studio NEXT。安装过程中，Node.js、JDK 等依赖项通常会由 IDE 自动引导安装。
  2. 配置环境：启动 DevEco Studio，进入 Settings -> SDK，下载 HarmonyOS NEXT 的对应版本的 SDK（API 12 及以上）。
  3. 创建项目：
    • 点击 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 是一个循序渐进的过程：

  1. 入门阶段：熟悉 ArkTS 的基本语法（装饰器、组件、状态管理）。重点掌握 Column、Row、Stack 等基础布局容器。
  2. 进阶阶段：学习页面路由、网络请求、动画效果以及数据持久化。
  3. 实战阶段：尝试开发一个包含完整功能的应用，如天气查询 App 或个人记账本，并尝试将其打包到真机或模拟器上运行。

HarmonyOS NEXT 带来了全新的分布式架构和元服务能力，未来在万物互联场景下大有可为。坚持动手写代码，多看官方文档，你也能快速掌握这一前沿技术。​​​​​

# harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙实战：用 want.param 实现视频播放器跨端迁移续播

avatar 人工智能6S服务平台
cover

鸿蒙 HarmonyOS 6 | SymbolGlyph动态视觉效果实战

avatar 人工智能6S服务平台
cover

鸿蒙NEXT下RTSP/RTMP播放器选型：SmartMediaKit 对决四大经典方案

avatar 人工智能6S服务平台