从零开始的鸿蒙开发教程

一、鸿蒙开发预备知识

1.1 什么是鸿蒙系统？

鸿蒙系统（HarmonyOS）是华为自主研发的分布式操作系统，专为万物互联时代设计。与传统操作系统不同，它像一个智能管家，可以让你的手机、平板、手表、家电等设备协同工作，形成一个"超级终端"。

核心特点：

• 一次开发，多端部署：写一套代码，可在多种设备上运行
• 分布式能力：设备间无缝协同，比如用手机控制家电
• 低延迟高响应：操作响应快，适合实时交互场景
• 安全性高：从底层设计就注重数据安全和隐私保护

为什么学习鸿蒙开发：

• 市场需求大：2025年鸿蒙开发者缺口预计达80万
• 技术领先：分布式架构代表未来发展方向
• 入门友好：中文文档丰富，开发工具易用
• 政策支持：国家大力推动自主操作系统发展

1.2 开发前的心态准备

初学者常见误区：

• "我没有编程基础，能学会吗？"——完全可以！本教程从零开始，无需任何编程经验
• "需要买很贵的设备吗？"——不需要，电脑+模拟器即可开始
• "学不会怎么办？"——跟着步骤一步步操作，遇到问题参考"常见问题"章节

学习建议：

• 每天固定学习时间（建议1-2小时）
• 边学边练，不要只看不动手
• 遇到问题先尝试自己解决，培养独立解决问题的能力
• 加入学习社群，和其他初学者交流

二、开发环境搭建详解

2.1 准备工作

电脑要求：

• 操作系统：Windows 10/11 64位 或 macOS 12+
• 内存：至少8GB（推荐16GB）
• 硬盘：至少40GB可用空间
• 网络：稳定的互联网连接（下载工具和依赖）

需要下载的工具：

• DevEco Studio（鸿蒙官方开发工具）
• 鸿蒙系统模拟器（用于运行应用）

2.2 安装DevEco Studio

Step 1：下载安装包

1. 访问华为开发者联盟官网：华为开发者联盟-HarmonyOS开发者官网，共建鸿蒙生态
2. 搜索"DevEco Studio"，进入下载页面
3. 根据你的操作系统选择对应版本下载（Windows或macOS）

Step 2：安装步骤

1. 双击下载的安装文件，启动安装向导
2. 点击"Next"，阅读并接受许可协议
3. 选择安装路径（建议默认路径，避免中文和空格）
4. 选择组件（默认全选即可）
5. 点击"Install"开始安装（约5-10分钟）
6. 安装完成后，勾选"Run DevEco Studio"，点击"Finish"

Step 3：首次启动配置

1. 首次启动会提示安装HarmonyOS SDK（约2GB）
2. 点击"Next"，等待SDK下载安装完成
3. 安装Node.js（开发工具会自动安装，无需额外操作）
4. 完成后点击"Finish"进入主界面

2.3 配置模拟器

Step 1：申请模拟器权限

1. 在DevEco Studio中，点击顶部菜单"Tools" → "Device Manager"
2. 点击"Sign In"登录华为账号（没有账号需先注册）
3. 按照提示完成实名认证（需要身份证信息，免费）
4. 申请模拟器使用权限（一般24小时内审核通过）

Step 2：创建模拟器

1. 权限通过后，在设备管理器中点击"+"创建模拟器
2. 选择设备类型：推荐选择"Phone" → "P50 Pro"
3. 选择系统版本：HarmonyOS NEXT Developer Preview
4. 点击"Download"下载系统镜像（约3GB，需耐心等待）
5. 下载完成后点击"Finish"创建模拟器

Step 3：启动模拟器

1. 在设备管理器中选择创建好的模拟器
2. 点击"Start"启动模拟器（首次启动较慢，约3-5分钟）
3. 等待模拟器启动完成，你会看到一个虚拟的华为手机界面

2.4 常见安装问题解决

问题1：安装时提示"需要管理员权限"

• 解决：右键安装文件，选择"以管理员身份运行"

问题2：模拟器启动失败，提示"虚拟化未开启"

• 解决：
  1. 重启电脑，开机时按F2或Del键进入BIOS设置
  2. 找到"Virtualization Technology"选项，设置为"Enabled"
  3. 保存设置并重启电脑

问题3：SDK下载缓慢或失败

• 解决：
  1. 点击"Configure" → "Settings" → "System Settings" → "HarmonyOS SDK"
  2. 点击"Edit"，选择"Add Mirror"添加华为镜像源
  3. 重启DevEco Studio后重新尝试

三、ArkTS语言入门

3.1 基本概念

什么是ArkTS？

ArkTS是鸿蒙应用开发的主要语言，它基于TypeScript扩展而来，就像普通话是在方言基础上规范形成的官方语言一样，ArkTS让不同设备上的鸿蒙应用开发有了统一的"普通话"。

为什么选择ArkTS？

• 语法简洁，容易学习
• 类型安全，减少错误
• 专为鸿蒙系统优化，性能更好
• 支持声明式UI，开发界面更直观

3.2 变量与数据类型

变量与常量

变量就像一个贴了标签的盒子，可以存放数据并随时更换内容；常量则是一个贴了封条的盒子，内容一旦放入就不能更改。

// 变量：用let声明，可以修改
let age: number = 18;
age = 19; // 合法，变量可以修改

// 常量：用const声明，不能修改
const pi: number = 3.14;
// pi = 3.1415; // 错误！常量不能修改

基本数据类型

表格

复制

类型	描述	例子	生活类比
number	数字	42 或 3.14	像一个标有刻度的量杯，专门用来存放数字
string	字符串	"Hello"	像一个贴了标签的信封，用来存放文字信息
boolean	布尔值	true 或 false	像一个开关，只有开和关两种状态
Array	数组	[1, 2, 3]	像一个文件柜，有多个抽屉可以分类存放数据

使用示例：

// 数字类型
let score: number = 95;
let temperature: number = 36.5;

// 字符串类型
let name: string = "小明";
let message: string = `我的名字是${name}`; // 模板字符串，可嵌入变量

// 布尔类型
let isStudent: boolean = true;
let hasFinished: boolean = false;

// 数组类型
let fruits: string[] = ["苹果", "香蕉", "橙子"];
let numbers: number[] = [1, 2, 3, 4, 5];

3.3 函数基础

函数就像一个自动售货机，你投入"参数"，它会按照预设的逻辑处理，然后返回"结果"。

函数定义与调用：

// 定义一个加法函数
function add(a: number, b: number): number {
  return a + b;
}

// 调用函数
let result: number = add(3, 5);
console.log(result); // 输出：8

函数的参数与返回值：

• 参数：函数需要的输入数据，放在函数名后的括号中
• 返回值：函数处理后的输出结果，用return语句返回

简化写法：

对于简单函数，可以使用箭头函数简化写法：

// 箭头函数写法
const multiply = (a: number, b: number): number => a * b;

let product: number = multiply(4, 5);
console.log(product); // 输出：20

四、UI开发基础

4.1 声明式UI概念

声明式UI就像画一幅画，你只需要告诉系统"画什么"，而不需要告诉它"怎么画"。例如，你说"画一个红色的圆在中间"，系统会自动帮你完成绘制。

传统命令式 vs 声明式：

// 命令式（传统方式）：一步步告诉系统怎么做
let button = new Button();
button.setText("点击我");
button.setColor("red");
button.setPosition(100, 200);
page.add(button);

// 声明式（鸿蒙方式）：直接描述想要的结果
Button("点击我")
  .backgroundColor("red")
  .position({x: 100, y: 200})

4.2 常用基础组件

Text（文本组件）：显示文字内容

Text("Hello 鸿蒙")
  .fontSize(30)          // 字体大小
  .fontColor("#007AFF")  // 字体颜色（华为蓝）
  .fontWeight(FontWeight.Bold) // 字体粗细
  .margin(10)            // 外边距

Button（按钮组件）：响应用户点击

Button("点击我")
  .width(150)           // 宽度
  .height(40)           // 高度
  .backgroundColor("#007AFF") // 背景色
  .onClick(() => {      // 点击事件
    console.log("按钮被点击了");
  })

Image（图片组件）：显示图片

Image($r("app.media.icon")) // 使用应用资源中的图片
  .width(100)            // 宽度
  .height(100)           // 高度
  .borderRadius(10)      // 圆角
  .objectFit(ImageFit.Cover) // 图片适配方式

4.3 布局容器

布局容器就像家里的家具，帮助你合理摆放和组织UI元素。

Column（垂直布局）：垂直排列子组件

Column() {
  Text("第一项")
  Text("第二项")
  Text("第三项")
}
.width("100%")  // 宽度占满父容器
.spacing(10)    // 子组件之间的间距
.padding(20)    // 内边距

Row（水平布局）：水平排列子组件

Row() {
  Text("左侧")
  Text("中间")
  Text("右侧")
}
.width("100%")
.justifyContent(FlexAlign.SpaceBetween) // 子组件两端对齐

Stack（层叠布局）：层叠显示子组件

Stack() {
  Image($r("app.media.background")) // 背景图片
  Text("在图片上方的文字")          // 文字在图片上方
    .fontColor(Color.White)
}
.width("100%")
.height(200)

五、第一个应用开发实战

5.1 项目创建

Step 1：新建项目

1. 打开DevEco Studio，点击"Create Project"
2. 选择"Empty Ability"模板，点击"Next"
3. 配置项目信息：
   • Project Name: MyFirstApp（项目名称）
   • Package Name: com.example.myfirstapp（反向域名格式）
   • Device Type: Phone（选择手机设备）
   • Language: ArkTS（选择ArkTS语言）
4. 点击"Finish"，等待项目创建完成（约1分钟）

Step 2：项目结构介绍

创建完成后，你会看到如下项目结构：

MyFirstApp/
├── AppScope/           // 应用全局配置
├── entry/              // 主模块
│   ├── src/main/ets/   // 源代码目录
│   │   ├── pages/      // 页面目录
│   │   │   └── Index.ets // 主页面文件
│   │   └── EntryAbility.ts // 应用入口
│   └── resources/      // 资源文件（图片、字符串等）
└── oh_modules/         // 依赖库

5.2 实现一个计数器应用

需求：创建一个简单的计数器应用，有一个显示数字的文本和两个按钮，点击"+"按钮数字增加，点击"-"按钮数字减少。

Step 1：编写代码

打开entry/src/main/ets/pages/Index.ets文件，替换为以下代码：

@Entry
@Component
struct CounterApp {
  // 定义状态变量，用于存储计数值
  @State count: number = 0
  
  build() {
    // 垂直布局
    Column() {
      // 显示计数值的文本
      Text(`当前计数: ${this.count}`)
        .fontSize(40)
        .margin(30)
        .fontWeight(FontWeight.Bold)
      
      // 水平布局放置按钮
      Row() {
        // 减号按钮
        Button("-")
          .width(80)
          .height(80)
          .fontSize(30)
          .backgroundColor("#F53F3F")
          .onClick(() => {
            // 点击事件：减少计数
            this.count--
          })
        
        // 加号按钮（两个按钮之间的间距）
        Button("+")
          .width(80)
          .height(80)
          .fontSize(30)
          .backgroundColor("#00B42A")
          .margin({ left: 40 })
          .onClick(() => {
            // 点击事件：增加计数
            this.count++
          })
      }
      
      // 根据计数显示不同文本
      if (this.count > 0) {
        Text("计数为正数")
          .fontSize(18)
          .margin(20)
          .fontColor(Color.Green)
      } else if (this.count < 0) {
        Text("计数为负数")
          .fontSize(18)
          .margin(20)
          .fontColor(Color.Red)
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center) // 垂直居中对齐
  }
}

5.3 代码解释

核心代码解析：

1. 状态变量：

@State count: number = 0

• @State装饰器标记这是一个状态变量
• 当count的值改变时，使用该变量的UI组件会自动更新

1. UI布局：

Column() { ... } // 垂直布局容器
Row() { ... }    // 水平布局容器

• 使用布局容器组织UI元素
• 通过链式调用设置属性（如.width()、.margin()）

1. 事件处理：

Button("+")
  .onClick(() => {
    this.count++
  })

• .onClick()方法为按钮添加点击事件
• 点击时修改count的值，UI会自动更新

1. 条件渲染：

if (this.count > 0) {
  Text("计数为正数")
    .fontColor(Color.Green)
} else if (this.count < 0) {
  Text("计数为负数")
    .fontColor(Color.Red)
}

• 根据count的值显示不同文本
• 条件变化时，UI会自动更新

5.4 运行应用

Step 1：启动模拟器

1. 点击DevEco Studio顶部工具栏中的"Device Manager"
2. 选择之前创建的模拟器，点击"Start"启动（首次启动较慢）

Step 2：运行应用

1. 确保模拟器已启动
2. 点击工具栏中的"Run"按钮（绿色三角形图标）
3. 选择已启动的模拟器作为运行目标
4. 等待应用编译部署（首次运行约1-2分钟）

Step 3：交互测试

应用运行后，你会看到：

• 中间显示当前计数（初始为0）
• 下方有"+"和"-"两个按钮
• 点击按钮可以改变计数
• 正数显示绿色文本，负数显示红色文本

恭喜！你已经成功开发并运行了第一个鸿蒙应用！

六、核心概念深入

6.1 状态管理基础

什么是状态管理？

状态管理就像一个智能仓库，当仓库里的物品（数据）发生变化时，所有需要这些物品的地方（UI组件）都会自动得到通知并更新。

常用状态装饰器：

表格

复制

装饰器	作用	生活类比
@State	组件内部状态，修改时自动更新UI	个人日记本，只有自己能修改，修改后自己能看到
@Prop	父子组件传值，子组件只读	学校通知，由学校（父组件）发布，学生（子组件）只能阅读
@Link	父子组件双向绑定	共享文档，父组件和子组件都能修改，双方都能看到最新内容

@State示例：

@State message: string = "Hello"

build() {
  Column() {
    Text(this.message)
    Button("修改文本")
      .onClick(() => {
        this.message = "Hello World" // 修改状态变量，UI自动更新
      })
  }
}

6.2 组件生命周期

组件就像一个人，有出生（创建）、成长（渲染）、衰老（销毁）的过程，这些过程称为生命周期。

主要生命周期函数：

• aboutToAppear()：组件即将显示时调用（出生）
• aboutToDisappear()：组件即将消失时调用（死亡）

使用示例：

@Component
struct LifeCycleDemo {
  @State count: number = 0
  
  // 组件即将显示
  aboutToAppear() {
    console.log("组件即将显示")
    this.count = 10 // 初始化数据
  }
  
  // 组件即将消失
  aboutToDisappear() {
    console.log("组件即将消失")
    // 清理资源
  }
  
  build() {
    Text(`Count: ${this.count}`)
  }
}

6.3 页面路由

什么是页面路由？

页面路由就像手机的导航软件，帮助用户在不同页面（界面）之间切换。

实现页面跳转：

1. 创建第二个页面
   在pages目录右键 → "New" → "Page"，命名为"SecondPage.ets"

2. 编写第二个页面代码：

@Entry
@Component
struct SecondPage {
  build() {
    Column() {
      Text("第二个页面")
        .fontSize(30)
      
      Button("返回")
        .margin(20)
        .onClick(() => {
          // 返回上一页
          router.back()
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

1. 在第一个页面添加跳转按钮：

import router from '@ohos.router' // 导入路由模块

// 在build方法中添加：
Button("跳转到第二个页面")
  .margin(20)
  .onClick(() => {
    // 跳转到第二个页面
    router.pushUrl({
      url: "pages/SecondPage"
    })
  })

七、进阶学习路径

7.1 下一步学习内容

基础巩固：

• ArkTS语言深入学习（面向对象、泛型等）
• 更多UI组件使用（列表、输入框、滑动组件等）
• 布局技巧（响应式布局、多设备适配）

中级进阶：

• 数据存储（本地数据库、文件存储）
• 网络请求（API调用、数据解析）
• 动画效果（属性动画、转场动画）

高级应用：

• 分布式能力（多设备协同）
• 性能优化（启动速度、UI流畅度）
• 元服务开发（免安装应用）

7.2 推荐学习资源

社区资源：

• 鸿蒙开发燾啊的动态 - 哔哩哔哩

书籍推荐：

• 《鸿蒙应用开发快速入门》
• 《ArkTS语言开发详解》
• 《鸿蒙开发实战》

7.3 常见问题解决

开发环境问题：

表格

复制

问题	解决方案
模拟器启动失败	检查虚拟化是否开启，关闭360等安全软件
项目编译错误	检查SDK版本是否匹配，尝试"Build → Clean Project"
依赖下载失败	配置华为镜像源，检查网络连接

代码问题：

表格

复制

问题	解决方案
状态变量不更新UI	确保使用了正确的状态装饰器，数组修改需创建新数组
布局错乱	使用"Previewer"实时预览，检查布局容器属性
页面跳转失败	检查页面路径是否正确，确保在main_pages.json中注册

结语：开启鸿蒙开发之旅

恭喜你完成了"从零开始的鸿蒙开发教程"的学习！通过本教程，你已经掌握了鸿蒙开发的基础知识，能够创建简单的应用并理解核心概念。

学习编程是一个持续探索的过程，记住：

• 多动手实践，不要害怕犯错
• 遇到问题先尝试自己解决，培养独立思考能力
• 关注鸿蒙生态发展，了解最新特性
• 参与开发者社区，分享你的学习成果