对于零基础开发者而言，HarmonyOS 开发的核心门槛在于 “陌生的技术栈” 与 “系统级开发思维”。本文结合新手学习规律，设计了 “7 天阶梯式学习计划”，从环境搭建到实战项目落地，全程覆盖 ArkTS 语法、ArkUI 组件、API 调用等核心知识点，每个知识点配套 “极简示例 + 实战练习”，帮助零基础开发者快速入门，轻松打造第一款鸿蒙应用。

一、学习前准备：明确目标与环境配置

1. 学习目标

7 天内掌握 HarmonyOS 开发核心能力，最终实现一款 “本地备忘录 APP”，包含 “添加、查看、删除” 功能，覆盖：

• ArkTS 基础语法（变量、函数、接口、异步）；
• ArkUI 声明式 UI（布局、组件、状态管理）；
• 系统 API 调用（文件存储、弹窗提示）；
• 工程配置与应用调试。

2. 环境搭建（1 天）

（1）安装 DevEco Studio

• 下载地址：HarmonyOS 官方开发者网站（选择最新稳定版）；
• 安装步骤：

（2）创建第一个项目

1. 打开 DevEco Studio，点击 “Create Project”，选择 “Empty Ability”；
2. 配置项目信息：
3. 点击 “Finish”，等待项目构建完成（首次构建需下载依赖，耗时约 5-10 分钟）。

（3）运行第一个应用

1. 选择已创建的模拟器，点击顶部 “Run” 按钮（绿色三角）；
2. 等待应用安装完成，模拟器会显示默认首页（“Hello World”），说明环境配置成功。

二、7 天学习计划：从语法到实战

Day 1：ArkTS 基础语法（核心：变量、函数、接口）

ArkTS 是 HarmonyOS 原生开发语言，基于 TypeScript 扩展，语法贴近前端，零基础也能快速上手。

1. 核心知识点

• 变量声明：使用let（可变变量）、const（常量），需指定类型（如string、number）；
• 函数定义：支持箭头函数、异步函数（async/await）；
• 接口（Interface）：规范数据结构，提升代码可读性。

2. 极简示例

typescript

运行

// 1. 变量声明（指定类型）
let noteTitle: string = "我的第一条备忘录";
const noteId: number = 1; // 常量不可修改

// 2. 函数定义（箭头函数）
const getNoteInfo = (id: number, title: string): string => {
  return `备忘录ID：${id}，标题：${title}`;
};

// 3. 接口（规范备忘录数据结构）
interface Note {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

// 4. 使用接口
const newNote: Note = {
  id: 2,
  title: "学习ArkTS",
  content: "今天学习了变量、函数和接口",
  createTime: "2024-05-20"
};

console.log(getNoteInfo(newNote.id, newNote.title)); // 输出：备忘录ID：2，标题：学习ArkTS

3. 实战练习

定义一个 “计算备忘录数量” 的函数，接收Note类型数组，返回数组长度；再定义一个异步函数，模拟 “从本地读取备忘录”（使用setTimeout延迟 1 秒）。

Day 2：ArkUI 基础组件（核心：布局、文本、按钮）

ArkUI 是鸿蒙原生 UI 框架，采用 “声明式编程”，无需手动操作 DOM，只需描述 UI 结构即可。

1. 核心知识点

• 布局组件：Column（垂直布局）、Row（水平布局），通过space设置间距；
• 基础组件：Text（文本）、Button（按钮）、TextInput（输入框）；
• 样式设置：fontSize（字体大小）、width（宽度）、margin（外边距）、padding（内边距）。

2. 极简示例（备忘录首页布局）

typescript

运行

@Entry // 标记为入口组件
@Component // 标记为UI组件
struct NoteHome {
  build() {
    // 垂直布局：从上到下排列
    Column({ space: 20 }) {
      // 文本组件：标题
      Text("本地备忘录")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 30 }) // 顶部外边距

      // 输入框：添加备忘录标题
      TextInput({ placeholder: "请输入备忘录标题" })
        .width('90%')
        .height(50)
        .padding(12)
        .backgroundColor("#F5F5F5")
        .borderRadius(8)

      // 按钮：添加备忘录
      Button("添加备忘录")
        .width('90%')
        .height(50)
        .backgroundColor("#007AFF")
        .fontSize(18)
        .onClick(() => {
          console.log("点击了添加按钮");
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Top) // 内容靠上排列
  }
}

3. 实战练习

完善布局：添加 “备忘录列表” 区域（用Text模拟一条备忘录），设置列表项的背景色、圆角和内边距，使其更美观。

Day 3：ArkUI 状态管理（核心：@State、数据驱动 UI）

状态管理是 ArkUI 的核心，通过@State装饰器标记变量，变量变化时 UI 会自动刷新（数据驱动 UI）。

1. 核心知识点

• @State 装饰器：组件内部私有状态，修改后触发 UI 刷新；
• 数据绑定：将状态变量关联到 UI 组件的属性（如Text的value）。

2. 极简示例（点击按钮修改文本）

typescript

运行

@Entry
@Component
struct StateDemo {
  // 状态变量：标记为@State，初始值为false
  @State isAdded: boolean = false;

  build() {
    Column({ space: 20 }) {
      Text(this.isAdded ? "备忘录添加成功！" : "未添加备忘录")
        .fontSize(20)
        .color(this.isAdded ? Color.Green : Color.Gray)

      Button("添加备忘录")
        .width('90%')
        .height(50)
        .backgroundColor("#007AFF")
        .onClick(() => {
          // 修改状态变量，UI自动刷新
          this.isAdded = true;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 实战练习

实现 “备忘录计数” 功能：定义@State变量noteCount: number = 0，点击 “添加备忘录” 按钮时noteCount加 1，UI 实时显示当前备忘录数量。

Day 4：列表渲染与事件处理（核心：ForEach、onClick）

备忘录 APP 需要展示多条数据，需使用ForEach循环渲染列表；同时需要处理 “点击删除” 等交互事件。

1. 核心知识点

• ForEach 循环：遍历数组，渲染列表项，需指定唯一key；
• 事件处理：onClick（点击事件）、onChange（输入框变化事件）；
• 列表组件：List（可滚动列表）、ListItem（列表项）。

2. 极简示例（备忘录列表）

typescript

运行

@Entry
@Component
struct NoteList {
  // 状态变量：备忘录数组
  @State noteList: Note[] = [
    { id: 1, title: "学习ArkUI", content: "布局、组件、状态管理", createTime: "2024-05-20" },
    { id: 2, title: "练习列表渲染", content: "使用ForEach循环", createTime: "2024-05-21" }
  ];

  build() {
    Column({ space: 15 }) {
      Text("备忘录列表")
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 30 })

      // 可滚动列表
      List() {
        // 循环渲染备忘录数组
        ForEach(this.noteList, (note) => {
          ListItem() {
            Column({ space: 8 }) {
              Text(note.title)
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
              Text(note.content)
                .fontSize(14)
                .color(Color.Gray)
              Text(`创建时间：${note.createTime}`)
                .fontSize(12)
                .color(Color.LightGray)
            }
            .width('100%')
            .padding(12)
            .backgroundColor("#F5F5F5")
            .borderRadius(8)
            .onClick(() => {
              console.log(`点击了备忘录：${note.title}`);
            })
          }
          .margin({ bottom: 10 })
        }, (note) => note.id.toString()) // 唯一key：备忘录ID
      }
      .width('90%')
      .flexGrow(1) // 占满剩余空间，支持滚动
    }
    .width('100%')
    .height('100%')
  }
}

// 复用Day1定义的Note接口
interface Note {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

3. 实战练习

为每个列表项添加 “删除” 按钮，点击按钮时从noteList数组中删除对应项（使用filter方法），UI 自动刷新列表。

Day 5：系统 API 调用（核心：文件存储、弹窗提示）

备忘录数据需要持久化存储（关闭 APP 后不丢失），需调用 HarmonyOS 的文件存储 API；同时需要弹窗提示操作结果（如 “删除成功”）。

1. 核心知识点

• 文件存储：使用@ohos.data.preferences模块（轻量级存储，键值对形式）；
• 弹窗提示：使用@ohos.promptAction模块的showToast方法。

2. 极简示例（数据持久化存储）

typescript

运行

import preferences from '@ohos.data.preferences';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct NoteStorage {
  @State noteList: Note[] = [];
  private preferences: preferences.Preferences | null = null;

  // 页面加载时初始化存储，读取数据
  async aboutToAppear() {
    // 初始化Preferences（存储文件名：noteStorage）
    this.preferences = await preferences.getPreferences(this.context, "noteStorage");
    // 读取存储的备忘录数据（默认空数组）
    const storedNotes = await this.preferences.get("noteList", "[]");
    this.noteList = JSON.parse(storedNotes);
  }

  // 保存备忘录到本地存储
  async saveNoteToStorage(note: Note) {
    if (!this.preferences) return;
    // 添加新备忘录到数组
    this.noteList.push(note);
    // 写入存储（需转为字符串）
    await this.preferences.put("noteList", JSON.stringify(this.noteList));
    await this.preferences.flush(); // 提交修改
    // 弹窗提示
    promptAction.showToast({ message: "添加成功！", duration: 1500 });
  }

  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: "请输入备忘录标题" })
        .width('90%')
        .height(50)
        .padding(12)
        .backgroundColor("#F5F5F5")
        .borderRadius(8)
        .onChange((value) => {
          this.newNoteTitle = value;
        })

      Button("添加并保存")
        .width('90%')
        .height(50)
        .backgroundColor("#007AFF")
        .onClick(() => {
          const newNote: Note = {
            id: Date.now(), // 用时间戳作为唯一ID
            title: this.newNoteTitle,
            content: "测试存储功能",
            createTime: new Date().toLocaleDateString()
          };
          this.saveNoteToStorage(newNote);
        })
    }
    .width('100%')
    .height('100%')
  }

  // 临时变量：存储输入框内容
  private newNoteTitle: string = "";
}

interface Note {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

3. 实战练习

实现 “删除备忘录并更新存储” 功能：点击删除按钮时，删除数组中的项，同时更新本地存储，并弹窗提示 “删除成功”。

Day 6：完善备忘录 APP 功能（核心：整合知识点）

将前 5 天的知识点整合，完善备忘录 APP 的完整功能：

1. 首页：展示 “添加备忘录” 输入框（标题 + 内容）和 “备忘录列表”；
2. 功能：添加备忘录（持久化存储）、查看备忘录详情、删除备忘录（更新存储 + 弹窗）；
3. UI 优化：调整布局间距、字体大小、颜色，提升美观度。

核心代码片段（整合后）

typescript

运行

// 完整代码整合了布局、状态管理、文件存储、弹窗提示
@Entry
@Component
struct NoteApp {
  @State noteList: Note[] = [];
  @State newNoteTitle: string = "";
  @State newNoteContent: string = "";
  private preferences: preferences.Preferences | null = null;

  async aboutToAppear() {
    this.preferences = await preferences.getPreferences(this.context, "noteStorage");
    const storedNotes = await this.preferences.get("noteList", "[]");
    this.noteList = JSON.parse(storedNotes);
  }

  async saveNote() {
    if (!this.newNoteTitle.trim()) {
      promptAction.showToast({ message: "标题不能为空！", duration: 1500 });
      return;
    }
    const newNote: Note = {
      id: Date.now(),
      title: this.newNoteTitle,
      content: this.newNoteContent,
      createTime: new Date().toLocaleString()
    };
    this.noteList.push(newNote);
    await this.preferences?.put("noteList", JSON.stringify(this.noteList));
    await this.preferences?.flush();
    promptAction.showToast({ message: "添加成功！", duration: 1500 });
    // 清空输入框
    this.newNoteTitle = "";
    this.newNoteContent = "";
  }

  async deleteNote(id: number) {
    this.noteList = this.noteList.filter(note => note.id !== id);
    await this.preferences?.put("noteList", JSON.stringify(this.noteList));
    await this.preferences?.flush();
    promptAction.showToast({ message: "删除成功！", duration: 1500 });
  }

  build() {
    Column({ space: 20 }) {
      Text("本地备忘录APP")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 30 })

      // 输入区域
      Column({ space: 10 }) {
        TextInput({ placeholder: "备忘录标题", text: this.newNoteTitle })
          .width('90%')
          .height(50)
          .padding(12)
          .backgroundColor("#F5F5F5")
          .borderRadius(8)
          .onChange((value) => this.newNoteTitle = value)

        TextInput({ placeholder: "备忘录内容", text: this.newNoteContent })
          .width('90%')
          .height(80)
          .padding(12)
          .backgroundColor("#F5F5F5")
          .borderRadius(8)
          .onChange((value) => this.newNoteContent = value)

        Button("添加备忘录")
          .width('90%')
          .height(50)
          .backgroundColor("#007AFF")
          .onClick(() => this.saveNote())
      }

      // 列表区域
      List() {
        ForEach(this.noteList, (note) => {
          ListItem() {
            Column({ space: 8 }) {
              Text(note.title)
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
              Text(note.content)
                .fontSize(14)
                .color(Color.Gray)
                .maxLines(2) // 最多显示2行，超出省略
                .textOverflow(TextOverflow.Ellipsis)
              Row({ space: 10 }) {
                Text(note.createTime)
                  .fontSize(12)
                  .color(Color.LightGray)
                Button("删除")
                  .width(60)
                  .height(30)
                  .fontSize(12)
                  .backgroundColor(Color.Red)
                  .onClick(() => this.deleteNote(note.id))
              }
            }
            .width('100%')
            .padding(12)
            .backgroundColor("#F5F5F5")
            .borderRadius(8)
          }
          .margin({ bottom: 10 })
        }, (note) => note.id.toString())
      }
      .width('90%')
      .flexGrow(1)
    }
    .width('100%')
    .height('100%')
  }
}

interface Note {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

Day 7：应用调试与打包（核心：排查错误、生成安装包）

完成 APP 开发后，需要调试错误、优化体验，最终打包生成 APK 文件（可安装到真实设备）。

1. 应用调试

• 日志调试：使用console.log()打印关键数据（如存储的备忘录数组），在 DevEco Studio 的 “Logcat” 面板查看；
• 断点调试：在关键代码行（如saveNote方法）左侧点击，设置断点，点击 “Debug” 按钮运行，程序会在断点处暂停，可逐步查看变量值；
• 常见错误排查：

2. 应用打包

1. 点击 DevEco Studio 顶部 “Build → Build HAP (s)/APP (s) → Build APP (s)”；
2. 选择打包类型（默认 “Debug”，用于测试；发布时选择 “Release”）；
3. 等待打包完成，在项目目录的 “build/outputs/app/release” 文件夹中找到 APK 文件；
4. 将 APK 文件拷贝到 HarmonyOS 手机，点击安装即可使用。

三、进阶学习建议

7 天入门后，若想深入学习 HarmonyOS 开发，可重点关注以下方向：

1. 进阶组件：学习Scroll（滚动组件）、Tabs（标签页）、Picker（选择器）等复杂组件；
2. 状态管理进阶：掌握@Link（父子组件双向同步）、@Provide/@Consume（跨层级状态共享）；
3. 分布式能力：学习分布式数据管理、跨设备跳转等鸿蒙核心特性；
4. 官方文档与社区：优先查阅HarmonyOS 官方文档，关注 “鸿蒙开发者联盟” 公众号获取实战案例，在 CBI 传媒 HarmonyOS 社区与其他开发者交流。
6. 零基础开发者只要遵循 “语法→组件→API→实战” 的学习路径，多写代码、多调试，就能快速掌握 HarmonyOS 开发能力，为后续复杂应用开发打下坚实基础。