✅ 核心目标：帮小白快速掌握鸿蒙开发“基本功”，能独立开发简单的单页面/多页面应用
✅ 通俗易理解：用“写笔记”“搭积木”等生活化场景类比，避开专业术语堆砌，每个知识点配实操例子
✅ 条理清晰：按“环境准备→语法基础→UI开发→页面交互→项目实战”循序渐进，符合小白学习节奏
✅ 重点突出：只讲基础核心知识点，不冗余，为后续进阶（分布式、多端适配）打牢基础

一、入门准备：先搞定“开发环境”（工欲善其事）

就像学写字要先准备纸和笔，鸿蒙开发第一步是搭建开发环境，核心工具是华为官方的 DevEco Studio，类似前端的VS Code、后端的IDEA。

1. 环境搭建步骤

1. 下载安装DevEco Studio

   • 官网地址：华为鸿蒙开发者官网，选择对应系统（Windows/macOS）的最新稳定版；

   • 安装注意：Windows系统默认路径即可，macOS需拖拽到应用程序文件夹；安装过程中会自动下载Java开发环境，无需额外配置。

2. 配置鸿蒙SDK

   • 首次打开DevEco Studio，会提示“Configure HarmonyOS SDK”，点击“Next”；

   • 选择需要的SDK版本（新手推荐选最新的“API 10”或“API 9”，兼容性更好），勾选“HarmonyOS SDK”和“Previewer”（预览工具），点击“Download”自动下载；

   • 下载完成后点击“Finish”，等待环境初始化完成（约1-2分钟）。

3. 创建模拟器（用于预览应用）

   • 点击DevEco Studio顶部工具栏的“Tools”→“Device Manager”；

   • 在弹出的窗口中，选择“Phone”（手机模拟器），点击“New Device”；

   • 选择一款手机型号（如“P40”），选择系统版本（与SDK版本一致），点击“Create”创建；

   • 创建完成后，点击模拟器右侧的“Start”启动，等待1-2分钟即可看到模拟手机界面。

2. 第一个鸿蒙项目：Hello World（验证环境）

环境搭好后，用“Hello World”测试是否能正常运行，步骤如下：

1. 点击DevEco Studio首页的“Create Project”；

2. 选择项目模板：左侧选“HarmonyOS”，右侧选“Empty Ability”（空项目），点击“Next”；

3. 配置项目信息：

   • Project Name：项目名称（如“HelloHarmony”）；

   • Package Name：应用包名（类似身份证号，默认即可，如“com.example.helloharmony”）；

   • Save Location：项目保存路径（不要有中文，如“D:\HarmonyProjects”）；

   • Compile SDK：选择与之前下载的SDK一致的版本；

   • Model：选择“Stage”（最新的应用模型，官方推荐，比“FA”模型更简单）；

   • Language：选择“ArkTS”（鸿蒙官方推荐的开发语言，比JavaScript/TypeScript更适配鸿蒙）。

4. 点击“Finish”，等待项目初始化完成（约2-3分钟，首次创建会下载依赖）；

5. 启动模拟器后，点击顶部工具栏的“Run”（绿色三角图标），等待应用安装到模拟器，最终会看到模拟器上显示“Hello World”，说明环境搭建成功！

二、核心基础：ArkTS语言入门

ArkTS是鸿蒙开发的核心语言，基于TypeScript，语法和JavaScript很像，但增加了更适配鸿蒙UI开发的装饰器、组件等特性。新手不用怕，先掌握最基础的语法，能看懂和写简单代码即可。

1. 变量与数据类型

变量就像一个个“盒子”，用来存储数据（如姓名、年龄、价格）。ArkTS的变量声明用let（可修改）或const（不可修改，常量），数据类型和JavaScript基本一致，重点掌握以下几种：

数据类型	通俗解释	示例代码
string（字符串）	存储文本，如姓名、标题	let name: string = "小明"; // 声明一个叫name的字符串变量，值为"小明"
number（数字）	存储数字，如年龄、价格	let age: number = 20; let price: number = 18.5; // 整数和小数都可以
boolean（布尔值）	存储“是”或“否”，只有true（是）和false（否）两个值	let isStudent: boolean = true; let hasMoney: boolean = false;
Array（数组）	存储一组同类型的数据，如多个姓名、多个价格	let names: string[] = ["小明", "小红", "小刚"]; let prices: number[] = [18, 20, 25];
Object（对象）	存储一组相关的数据和方法，如一个人的完整信息	let person: {name: string, age: number} = {name: "小明", age: 20};
✨ 小技巧：ArkTS是“强类型语言”，声明变量时最好指定数据类型（如: string），这样写代码时会有语法提示，减少错误。

2. 函数（可重复使用的“代码块”）

函数就像“预制菜”，把一段常用的代码封装起来，需要时直接调用，不用重复写。比如计算两个数的和、获取用户信息等。

（1）基础函数语法

// 声明一个函数：计算两个数的和
function add(a: number, b: number): number {
  return a + b; // 函数返回值
}

// 调用函数
let result = add(10, 20); // 传入参数10和20，result的值为30
console.log(result); // 在控制台打印结果（DevEco Studio底部的Console面板可查看）

（2）箭头函数（简化写法）

如果函数逻辑简单，可写成箭头函数，更简洁，后续开发中常用：

// 箭头函数写法：计算两个数的和
const add = (a: number, b: number): number => a + b;

// 调用函数
let result = add(15, 25);
console.log(result); // 输出40

3. 条件判断与循环

就像生活中“如果下雨就带伞，否则不带”“重复跑步5圈”，代码也需要逻辑控制，核心是if-else（条件判断）和for（循环）。

（1）条件判断：if-else

let score: number = 85;

// 根据分数判断等级
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

（2）循环：for循环（遍历数组常用）

// 定义一个数组：存储3个商品价格
let prices: number[] = [18, 20, 25];

// 循环遍历数组，计算总价
let total: number = 0;
for (let i = 0; i < prices.length; i++) {
  total += prices[i]; // 把每个价格加到总价中
}

console.log("商品总价：", total); // 输出63

（3）简化循环：for…of（更直观）

let prices: number[] = [18, 20, 25];
let total: number = 0;

// for...of直接遍历数组中的每个元素
for (let price of prices) {
  total += price;
}

console.log("商品总价：", total); // 输出63

三、UI开发：用ArkUI搭“页面积木”（核心重点）

鸿蒙的UI开发用ArkUI框架，采用“声明式开发”，就像搭积木：你只需要告诉框架“要放什么积木（组件）、放在哪里”，框架就会自动渲染出页面，不用关心底层渲染逻辑。

核心组件：Text（文字）、Image（图片）、Button（按钮）、TextInput（输入框）、List（列表）、Column（垂直布局）、Row（水平布局）等。

1. 布局组件：Column与Row（控制组件排列）

布局组件就像“积木底座”，用来控制其他组件的排列方向：

• Column：垂直布局（从上到下排列），比如手机页面的文字、按钮依次往下放；

• Row：水平布局（从左到右排列），比如一行中的图标和文字。

示例：垂直排列的文字和按钮

@Entry // 标识这是一个页面入口组件
@Component // 标识这是一个自定义组件
struct LayoutDemo {
  build() {
    // 垂直布局，居中对齐，上下padding为20
    Column({ space: 20, alignItems: ItemAlign.Center }) {
      Text("欢迎来到鸿蒙世界")
        .fontSize(28) // 字体大小
        .fontWeight(FontWeight.Bold); // 字体加粗

      Button("点击我")
        .fontSize(24)
        .padding(15) // 内边距
        .backgroundColor(Color.Blue); // 背景色
    }
    .padding(20)
    .width("100%") // 宽度占满整个屏幕
    .height("100%"); // 高度占满整个屏幕
  }
}

✨ 效果：模拟器上会显示居中的“欢迎来到鸿蒙世界”文字，下方是蓝色的“点击我”按钮，两者间距20。

2. 基础组件：Text、Image、Button、TextInput

（1）Text：文字组件（显示文本）

Text("这是一段文字")
  .fontSize(24) // 字体大小
  .fontColor(Color.Red) // 字体颜色
  .fontWeight(FontWeight.Normal) // 字体粗细（Normal/Medium/Bold）
  .textAlign(TextAlign.Center) // 文字对齐方式（Left/Center/Right）
  .margin({ bottom: 10 }); // 外边距（底部留10的空隙）

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

✨ 注意：鸿蒙的图片资源要放在main_pages同级的resources文件夹下的media目录（没有就自己创建），支持png、jpg、svg等格式。

Image($r("app.media.logo")) // $r是资源引用，app.media.logo表示media目录下的logo图片
  .width(100) // 宽度
  .height(100) // 高度
  .borderRadius(50) // 圆角（50表示圆形，前提是宽高相等）
  .objectFit(ImageFit.Cover); // 图片适配方式（Cover：填充容器，可能裁剪）

（3）Button：按钮组件（触发交互）

Button("点击提交")
  .fontSize(22)
  .padding(12)
  .backgroundColor(Color.Green)
  .onClick(() => {
    // 点击按钮触发的逻辑
    console.log("按钮被点击了！");
  });

（4）TextInput：输入框组件（获取用户输入）

// 定义一个变量存储输入的内容
@State inputValue: string = "";

TextInput({ placeholder: "请输入用户名" }) // placeholder：提示文字
  .fontSize(22)
  .padding(12)
  .border({ width: 1, color: Color.Gray }) // 边框
  .borderRadius(8)
  .onChange((value) => {
    // 输入内容变化时触发，更新inputValue变量
    this.inputValue = value;
  })
  .margin({ bottom: 10 });

// 显示输入的内容
Text(`你输入的用户名：${this.inputValue}`)
  .fontSize(22);

3. 列表组件：List（显示多条数据）

List组件用来显示多条同类数据，比如商品列表、消息列表等，配合ListItem使用（每个ListItem是列表中的一项）。

示例：显示3个商品的列表

@Entry
@Component
struct ListDemo {
  // 定义列表数据：3个商品
  private goodsList: { name: string, price: number }[] = [
    { name: "珍珠奶茶", price: 18 },
    { name: "草莓奶昔", price: 20 },
    { name: "芒果布丁", price: 15 }
  ];

  build() {
    Column() {
      Text("商品列表")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 });

      // 列表组件
      List() {
        // 遍历商品列表，生成每个列表项
        ForEach(this.goodsList, (item) => {
          ListItem() {
            // 每个列表项用水平布局：商品名在左，价格在右
            Row({ space: 20, justifyContent: FlexAlign.SpaceBetween }) {
              Text(item.name)
                .fontSize(24);

              Text(`¥${item.price}`)
                .fontSize(24)
                .fontColor(Color.Red);
            }
            .padding(15)
          }
          .borderBottom({ width: 1, color: Color.Gray }); // 每个列表项底部加边框分隔
        }, (item) => item.name); // 第二个参数：列表项的唯一标识（避免渲染错乱）
      }
      .width("100%")
    }
    .padding(20)
    .width("100%")
    .height("100%");
  }
}

四、页面交互：路由跳转（多页面切换）

一个完整的应用通常有多个页面（如首页、详情页、我的页面），页面之间的切换需要用到“路由”，鸿蒙用router模块实现。

1. 路由跳转步骤

（1）准备：创建第二个页面

1. 在main_pages文件夹下右键，选择“New”→“ArkTS File”；

2. 文件名输入“DetailPage”，点击“OK”；

3. 在DetailPage.ets中编写页面代码（简单示例）：

// DetailPage.ets（详情页）
import router from '@ohos.router';

@Entry
@Component
struct DetailPage {
  build() {
    Column({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("这是详情页")
        .fontSize(28)
        .margin({ bottom: 30 });

      Button("返回首页")
        .fontSize(24)
        .padding(15)
        .onClick(() => {
          // 返回上一页
          router.back();
        });
    }
    .width("100%")
    .height("100%");
  }
}

（2）配置路由：在module.json5中注册页面

鸿蒙的页面需要在module.json5（项目根目录下）的pages数组中注册，否则无法跳转：

// module.json5
{
  "module": {
    "pages": [
      "main_pages/Index", // 首页（已存在）
      "main_pages/DetailPage" // 新增的详情页
    ]
  }
}

（3）实现跳转：从首页跳转到详情页

// Index.ets（首页）
import router from '@ohos.router';

@Entry
@Component
struct Index {
  build() {
    Column({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("这是首页")
        .fontSize(28)
        .margin({ bottom: 30 });

      Button("跳转到详情页")
        .fontSize(24)
        .padding(15)
        .onClick(() => {
          // 跳转到详情页
          router.pushUrl({
            url: "main_pages/DetailPage" // 页面路径，与module.json5中注册的一致
          });
        });
    }
    .width("100%")
    .height("100%");
  }
}

（4）带参数跳转

如果需要把首页的数据传递到详情页（如点击商品列表项，跳转到商品详情页并显示商品信息），可以在跳转时携带参数：

// 首页：带参数跳转
router.pushUrl({
  url: `main_pages/DetailPage?name=珍珠奶茶&price=18` // 用?拼接参数，&分隔多个参数
});

// 详情页：接收参数
import router from '@ohos.router';

@Entry
@Component
struct DetailPage {
  // 定义变量存储接收的参数
  @State goodsName: string = "";
  @State goodsPrice: number = 0;

  aboutToAppear() {
    // 页面加载前获取路由参数
    const params = router.getParams();
    this.goodsName = params.name as string;
    this.goodsPrice = params.price as number;
  }

  build() {
    Column({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(`商品名称：${this.goodsName}`)
        .fontSize(28)
        .margin({ bottom: 10 });

      Text(`商品价格：¥${this.goodsPrice}`)
        .fontSize(28)
        .fontColor(Color.Red)
        .margin({ bottom: 30 });

      Button("返回首页")
        .fontSize(24)
        .padding(15)
        .onClick(() => {
          router.back();
        });
    }
    .width("100%")
    .height("100%");
  }
}

五、实战入门：开发一个简单的“个人信息页”

整合前面的知识点，开发一个包含“输入个人信息”“显示信息”“跳转到信息详情页”的简单应用，巩固基础。

1. 功能需求

1. 首页：包含姓名输入框、年龄输入框、“提交”按钮；

2. 点击“提交”按钮后，跳转到详情页；

3. 详情页：显示用户输入的姓名和年龄，并有“返回首页”按钮。

2. 完整代码实现

（1）首页：Index.ets

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State name: string = "";
  @State age: string = "";

  build() {
    Column({ space: 20, alignItems: ItemAlign.Center }) {
      Text("个人信息录入")
        .fontSize(28)
        .fontWeight(FontWeight.Bold);

      // 姓名输入框
      TextInput({ placeholder: "请输入姓名" })
        .fontSize(24)
        .padding(12)
        .border({ width: 1, color: Color.Gray })
        .borderRadius(8)
        .width("80%")
        .onChange((value) => {
          this.name = value;
        });

      // 年龄输入框
      TextInput({ placeholder: "请输入年龄" })
        .fontSize(24)
        .padding(12)
        .border({ width: 1, color: Color.Gray })
        .borderRadius(8)
        .width("80%")
        .type(InputType.Number) // 只允许输入数字
        .onChange((value) => {
          this.age = value;
        });

      // 提交按钮
      Button("提交")
        .fontSize(24)
        .padding(15)
        .width("80%")
        .backgroundColor(Color.Blue)
        .onClick(() => {
          // 简单验证：输入不能为空
          if (!this.name || !this.age) {
            console.log("姓名和年龄不能为空！");
            return;
          }
          // 跳转到详情页，携带参数
          router.pushUrl({
            url: `main_pages/InfoDetail?name=${this.name}&age=${this.age}`
          });
        });
    }
    .width("100%")
    .height("100%")
    .padding(20);
  }
}

（2）详情页：InfoDetail.ets

import router from '@ohos.router';

@Entry
@Component
struct InfoDetail {
  @State name: string = "";
  @State age: string = "";

  aboutToAppear() {
    // 获取路由参数
    const params = router.getParams();
    this.name = params.name as string;
    this.age = params.age as string;
  }

  build() {
    Column({ space: 30, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("个人信息详情")
        .fontSize(28)
        .fontWeight(FontWeight.Bold);

      Text(`姓名：${this.name}`)
        .fontSize(26);

      Text(`年龄：${this.age} 岁`)
        .fontSize(26);

      Button("返回首页")
        .fontSize(24)
        .padding(15)
        .width("60%")
        .backgroundColor(Color.Gray)
        .onClick(() => {
          router.back();
        });
    }
    .width("100%")
    .height("100%");
  }
}

（3）配置路由：module.json5

{
  "module": {
    "pages": [
      "main_pages/Index",
      "main_pages/InfoDetail"
    ]
  }
}

3. 运行效果

1. 启动模拟器，运行应用，首页显示两个输入框和提交按钮；

2. 输入姓名（如“小明”）和年龄（如“20”），点击提交，跳转到详情页；

3. 详情页显示输入的姓名和年龄，点击“返回首页”可回到首页。

六、基础避坑清单

1. ❌ 忘记注册页面路由：新创建的页面必须在module.json5的pages数组中注册，否则无法跳转；

2. ❌ 图片资源路径错误：图片必须放在resources/media目录下，引用时用$r("app.media.图片名")，不要写错文件名；

3. ❌ 变量未初始化：用@State装饰的变量如果是字符串，默认值设为""，数字设为0，避免undefined错误；

4. ❌ 路由跳转路径错误：url必须和module.json5中注册的页面路径一致（如“main_pages/InfoDetail”）；

5. ❌ 组件没有闭合标签：ArkTS的组件都需要闭合，比如Text("文字")不能写成Text("文字")（虽然编辑器会提示，但新手容易忽略）；

6. ❌ 模拟器启动失败：检查SDK版本和模拟器版本是否一致，不一致会导致启动失败。

七、总结

1. 基础核心：鸿蒙开发基础的核心是“ArkTS语法+ArkUI组件+路由跳转”，掌握这三点就能开发简单的多页面应用；

2. 学习方法：先搭环境跑通Hello World，再逐个学习组件和语法，最后通过实战项目整合知识点，不要碎片化学习；

3. 进阶方向：基础掌握后，可继续学习“数据持久化”“全局状态管理”“分布式能力”等进阶知识点，实现更复杂的应用（如智能家居控制、跨设备同步）。

---

推荐学习：鸿蒙开发零基础衔接进阶知识点详解【进阶版】