第1篇：认识ArkTS——搭建鸿蒙开发环境

本文介绍了鸿蒙系统开发入门教程的第一课内容，主要包含三部分：鸿蒙系统与ArkTS基础概念：鸿蒙系统是中国华为开发的多设备统一操作系统 ArkTS是基于TypeScript的鸿蒙专用开发语言，具有简单易学、声明式编程等特点开发环境搭建：详细讲解了DevEco Studio的下载安装步骤指导创建第一个ArkTS项目并解析项目结构实践操作：演示如何编写简单的ArkTS界面代码介绍两种运行

2501_92449685

160人浏览 · 2026-05-07 15:53:21

2501_92449685 · 2026-05-07 15:53:21 发布

第1篇：认识ArkTS——搭建鸿蒙开发环境

本课目标：成功搭建开发环境，运行第一个鸿蒙应用
**作者：**中文编程倡导者—— 李金雨
预计课时：2课时（90分钟）
难度等级：⭐（入门）

一、开篇引入

1.1 欢迎来到编程世界！

你好！很高兴你能打开这本教程。在接下来的学习中，你将学会如何制作属于自己的手机应用——不是玩游戏，而是创造游戏；不是刷视频，而是制作视频应用！

想象一下这些场景：

📱 你做了一个"班级通讯录"应用，同学们都能在手机上查看
🎮 你开发了一个"猜数字"小游戏，和朋友们一起玩
📚 你制作了一个"单词本"应用，帮助背单词

这些，你都能通过ArkTS实现！

1.2 本课我们要做什么？

今天这节课，我们要完成三件大事：

了解什么是鸿蒙系统和ArkTS语言
安装开发工具（就像画家需要画笔，我们需要编程工具）
运行你的第一个应用——在屏幕上显示"你好，鸿蒙！"

1.3 预期成果

完成本课后，你的电脑屏幕上会显示这样的画面：

┌─────────────────────────┐
│                         │
│                         │
│      你好，鸿蒙！        │
│                         │
│      （你的名字）        │
│                         │
│                         │
└─────────────────────────┘

很期待吧？让我们开始吧！

二、概念讲解

2.1 什么是鸿蒙系统？

生活例子：不同品牌的手机

你家里有不同品牌的电器吗？比如：

华为手机
小米电视
苹果平板

每个品牌都有自己的"操作系统"，就像每个国家有自己的语言一样。

鸿蒙系统（HarmonyOS） 是我们中国华为公司开发的操作系统，就像安卓（Android）和苹果（iOS）一样，是手机、平板等设备的"大脑"。

鸿蒙的特别之处

鸿蒙有个很厉害的特点——一套系统，多种设备都能用：

设备	鸿蒙能做什么
📱 手机	运行各种应用
⌚ 手表	显示时间、计步、测心率
📺 电视	播放视频、玩游戏
🚗 汽车	导航、听音乐
🏠 家电	智能控制

这意味着：你学会一次，就能给各种设备做应用！

2.2 什么是ArkTS？

生活例子：和外国人交流

假设你想和一个外国朋友说话，但你们语言不通，怎么办？

你可以学他的语言（英语、日语等）
或者找一个"翻译"

ArkTS 就像是程序员和鸿蒙系统之间的"翻译官"。

我们用ArkTS写"指令"，ArkTS帮我们把指令翻译成鸿蒙系统能听懂的话，然后鸿蒙系统就能按照我们的想法运行了。

ArkTS从哪来？

ArkTS是从一种叫 TypeScript 的语言发展来的，而TypeScript又是从 JavaScript 发展来的。

你可以这样理解：

JavaScript（爷爷）
    ↓
TypeScript（爸爸）
    ↓
ArkTS（儿子，专门为鸿蒙设计的）

为什么要学ArkTS？

原因1：简单易学

ArkTS用的是"声明式"编程，意思就是：你告诉它"要什么结果"，它就帮你实现
就像你去餐厅点菜，你说"我要一份炒饭"，厨师就会做好给你，你不用管怎么炒

原因2：效果立即可见

你写一行代码，马上就能看到界面变化
就像画画，画一笔马上能看到效果

原因3：一份代码，多处使用

写一次应用，手机、平板、电视都能运行
省时省力！

原因4：国产技术

学习国产技术，支持我们自己的科技生态
未来找工作也更有优势

2.3 ArkTS长什么样？

让我们看看ArkTS代码的样子：

@Entry
@Component
struct 我的页面 {
  build() {
    Column() {
      Text("你好，鸿蒙！")
        .fontSize(30)
        .fontColor("#FF0000")
      
      Button("点我")
        .onClick(() => {
          console.log("按钮被点击了")
        })
    }
    .width("100%")
    .height("100%")
  }
}

看不懂？没关系！我们解释一下：

代码	意思
`@Entry`	标记：这是应用的"入口"，从这里开始运行
`@Component`	标记：这是一个"组件"（界面的一部分）
`struct 我的页面`	定义一个叫"我的页面"的组件
`build()`	"组装"界面的方法
`Column()`	垂直排列的容器（像一列火车车厢）
`Text()`	显示文字的组件
`Button()`	按钮组件
`.fontSize(30)`	设置字体大小为30
`.onClick()`	当按钮被点击时做什么

注意：在这个教程里，我们会用中文来命名！比如我的页面、用户名、计算按钮等。这样更容易理解！

三、动手实践

3.1 安装开发工具 DevEco Studio

什么是DevEco Studio？

就像写作文需要纸和笔，做应用也需要工具。DevEco Studio就是华为给我们提供的"编程工作台"。

它集成了所有你需要的东西：

✏️ 代码编辑器（写代码的地方）
🔍 代码检查（帮你发现错误）
📱 模拟器（在电脑上模拟手机运行）
🐛 调试工具（找错误、修错误）

安装步骤

第一步：下载安装包

打开浏览器，访问华为开发者官网：https://developer.harmonyos.com/
点击"开发" → “开发工具”
找到 DevEco Studio，点击下载
选择适合你电脑系统的版本（Windows选Windows版，Mac选Mac版）

第二步：安装软件

Windows电脑：

双击下载的安装包（.exe文件）
点击"下一步"，选择安装位置（建议用默认位置）
勾选"创建桌面快捷方式"
点击"安装"，等待安装完成
点击"完成"

Mac电脑：

双击下载的.dmg文件
把DevEco Studio拖到"应用程序"文件夹
从"应用程序"中打开它

第三步：首次启动设置

打开DevEco Studio
选择"Do not import settings"（不导入设置）
选择主题（推荐选"Light"浅色主题，对眼睛好）
安装必要的SDK（软件工具包）
- 点击"Next"
- 勾选"HarmonyOS SDK"
- 点击"Next"，等待下载安装
- 这可能需要一些时间，耐心等待

💡 小贴士：安装过程中如果提示需要重启电脑，就重启一下。

3.2 创建第一个项目

现在，让我们创建你的第一个ArkTS项目！

第一步：新建项目

打开DevEco Studio
点击 “Create Project”（创建项目）
在弹出的窗口中，选择 “Empty Ability”（空应用）
点击 “Next”

第二步：配置项目

你会看到一个配置页面，填写以下信息：

项目	填写内容	说明
Project name	`我的第一个应用`	项目的名字
Bundle name	`com.example.myfirstapp`	应用的唯一标识（类似身份证号）
Save location	选择一个文件夹	项目保存在哪里
Compile SDK	选择最新的版本	用最新的功能
Model	Stage	开发模式
Enable Super Visual	不勾选	不用低代码模式
Language	ArkTS	编程语言

填好后，点击 “Finish”。

第三步：等待项目创建

DevEco Studio会自动创建项目文件，这个过程可能需要几分钟。你会看到底部有个进度条在走。

创建完成后，你会看到类似这样的项目结构：

我的第一个应用/
├── entry/                    ← 主要代码在这里
│   └── src/
│       └── main/
│           └── ets/
│               └── pages/
│                   └── Index.ets    ← 主页面代码
├── resources/                ← 图片、文字等资源
└── ...

3.3 认识项目结构

让我们了解一下项目里的重要文件：

1. Index.ets —— 主页面代码

这是最重要的文件！你的应用界面就是在这里写的。

打开 entry/src/main/ets/pages/Index.ets，你会看到默认生成的代码：

// 完整可运行代码，复制到 Index.ets 即可运行
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2. 资源文件夹

在 entry/src/main/resources 里存放着：

图片（放在 rawfile 或 media 文件夹）
文字（放在 element/string.json）
颜色定义（放在 element/color.json）

3.4 运行你的第一个应用

现在，让我们运行这个应用，看看效果！

方法一：使用预览器（推荐初学者）

在DevEco Studio右上角，找到并点击 “Previewer”（预览器）标签
等待几秒钟
你会看到右侧出现一个"手机"画面，显示 “Hello World”

方法二：使用模拟器

点击顶部工具栏的 “Tools” → “Device Manager”（设备管理器）
点击 “Create Emulator”（创建模拟器）
选择一个手机型号，点击 “Next”
下载系统镜像（第一次需要），点击 “Finish”
在设备列表中，点击启动按钮（▶️）
等待模拟器启动（像真手机开机一样）
回到代码界面，点击顶部工具栏的绿色运行按钮（▶️）
选择你的模拟器，点击 “OK”
等待应用安装并启动

方法三：使用真机（如果你有鸿蒙手机）

用数据线把手机连接到电脑
手机会提示"允许USB调试吗？“，点击"确定”
在DevEco Studio中，点击运行按钮
选择你的手机设备
应用会安装到你的手机上

3.5 修改你的应用

现在，让我们修改代码，让它显示"你好，鸿蒙！"和你的名字。

练习1：修改文字内容

打开 Index.ets 文件
找到这行代码：
```
@State message: string = 'Hello World'
```

改成：

@State 欢迎语: string = '你好，鸿蒙！'

找到 Text(this.message)，改成 Text(this.欢迎语)
保存文件（按 Ctrl+S 或 Cmd+S）
看预览器，文字变了！

完整代码：

// 完整可运行代码，复制到 Index.ets 即可运行
@Entry
@Component
struct Index {
  @State 欢迎语: string = '你好，鸿蒙！'

  build() {
    Row() {
      Column() {
        Text(this.欢迎语)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

练习2：修改文字颜色和大小

在 Text(this.欢迎语) 下面添加：

Text(this.欢迎语)
  .fontSize(50)           // 字体大小
  .fontWeight(FontWeight.Bold)  // 字体粗细
  .fontColor('#FF0000')   // 字体颜色（红色）

颜色代码说明：

#FF0000 = 红色
#00FF00 = 绿色
#0000FF = 蓝色
#000000 = 黑色
#FFFFFF = 白色
#FFA500 = 橙色
#800080 = 紫色

练习3：添加背景颜色

在 Column() 下面添加：

Column() {
  // ... Text组件
}
.width('100%')
.backgroundColor('#FFF8DC')  // 浅黄色背景

练习4：添加你的名字

在欢迎语下面再添加一个Text：

Column() {
  Text(this.欢迎语)
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .fontColor('#FF0000')
  
  Text('我是张三')           // 改成你的名字
    .fontSize(30)
    .fontColor('#0000FF')
    .margin({ top: 20 })    // 上边距20
}

3.6 完整代码示例

这是你第一个应用的完整代码：

// 完整可运行代码，复制到 Index.ets 即可运行
@Entry
@Component
struct Index {
  @State 欢迎语: string = '你好，鸿蒙！'

  build() {
    Row() {
      Column({ space: 20 }) {        // space: 子组件之间的间距
        Text(this.欢迎语)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FF0000')
        
        Text('我是编程小达人')
          .fontSize(30)
          .fontColor('#0000FF')
        
        Text('这是我第一个鸿蒙应用')
          .fontSize(20)
          .fontColor('#666666')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF8DC')
      .justifyContent(FlexAlign.Center)  // 内容垂直居中
    }
    .height('100%')
  }
}

运行效果：

┌─────────────────────────┐
│                         │
│                         │
│      你好，鸿蒙！        │  ← 红色大字
│                         │
│     我是编程小达人       │  ← 蓝色中字
│                         │
│   这是我第一个鸿蒙应用    │  ← 灰色小字
│                         │
│                         │
└─────────────────────────┘
    浅黄色背景

四、知识总结

4.1 今天我们学了什么？

鸿蒙系统：华为开发的操作系统，可以用在手机、电视、手表等各种设备上
ArkTS：一种编程语言，是我们和鸿蒙系统"对话"的方式
DevEco Studio：开发工具，用来写代码、运行应用
项目结构：
- Index.ets：主页面代码
- resources：存放图片、文字等资源

基础代码结构：

@Entry
@Component
struct 页面名字 {
  build() {
    Column() {
      Text("文字内容")
    }
  }
}

4.2 关键代码速查表

功能	代码
显示文字	`Text("内容")`
设置字体大小	`.fontSize(30)`
设置字体颜色	`.fontColor("#FF0000")`
设置背景颜色	`.backgroundColor("#FFF8DC")`
设置宽度	`.width("100%")`
设置高度	`.height("100%")`
垂直排列	`Column()`
水平排列	`Row()`
内容居中	`.justifyContent(FlexAlign.Center)`

4.3 常见错误提醒

错误现象	可能原因	解决方法
代码报错红色	拼写错误	检查单词拼写，特别是中文标点
预览器空白	代码有语法错误	看底部"Problems"面板，根据提示修改
文字不显示	忘记写`this.`	状态变量要用`this.变量名`
颜色没变化	颜色代码格式不对	确保是`#`开头，6位十六进制数
应用运行不了	模拟器没启动	先启动模拟器，再运行应用

五、课后作业

5.1 巩固练习（必做）

练习1：个性化你的欢迎页面

修改你的应用，让它显示：

标题：“我的鸿蒙之旅”
你的名字和年龄
你最喜欢的颜色作为背景
三行文字使用三种不同的颜色

练习2：尝试不同的布局

把 Column 改成 Row，看看效果有什么不同？

练习3：调整间距

使用 .margin() 和 .padding() 调整文字之间的距离。

示例：

Text("你好")
  .margin({ top: 10, bottom: 10 })  // 上下外边距10
  .padding(20)                       // 四边内边距20

5.2 创意编程（选做）

创意1：制作个人名片

做一个展示你自己的页面，包含：

你的名字（大字）
你的班级
你的爱好
一句你喜欢的话

创意2：节日贺卡

做一个电子贺卡，比如：

春节贺卡：红色背景，写上"新年快乐"
生日贺卡：彩色背景，写上"生日快乐"
教师节贺卡：写上对老师的祝福

5.3 探索发现

打开 resources/base/element/string.json，看看里面有什么？
试着修改里面的文字，然后在代码中引用它（用 $r('app.string.xxx')）
在网上搜索"ArkTS 组件"，看看还有哪些组件可以用

5.4 下篇预习

下一篇，我们将学习数据与类型，了解如何在程序中存储信息。预习问题：

想一想：程序怎么记住你的名字？
程序怎么知道你是15岁而不是"十五岁"？
程序怎么判断"今天是晴天"是真是假？

附录：学习资源

官方资源

鸿蒙开发者官网：https://developer.harmonyos.com/
ArkTS开发文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-get-started-0000001438067044-V3

颜色代码参考

颜色	代码	颜色	代码
红色	#FF0000	橙色	#FFA500
黄色	#FFFF00	绿色	#00FF00
青色	#00FFFF	蓝色	#0000FF
紫色	#800080	粉色	#FFC0CB
黑色	#000000	白色	#FFFFFF
灰色	#808080	棕色	#A52A2A

💡 小技巧：在网上搜索"颜色选择器"，可以找到更多颜色代码！

恭喜你完成了第1篇的学习！ 🎉

你已经迈出了编程之旅的第一步。记住，编程就像学骑自行车，一开始可能会摔跤，但只要坚持练习，你一定能骑得又快又稳！

下节课见！

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

一文带你走进HarmonyOS APP开发里的 GPM到底是啥

你通过告诉系统“我是谁、我在哪、我多重要”，再通过把系统的温度/负载倾向拿回来，最后在你的画质/帧率预算里做“可控降级/回弹”——谁能把这个闭环接稳，谁的 30 分钟续航与掉帧曲线就会明显好看一圈。

HarmonyOS开发者社区

HarmonyOS鸿蒙三方库移植：选 vcpkg 还是 lycium_plusplus？两种“框架化”方案对比

HarmonyOS开发者社区

阿里 AGenUI 开源库前后端实战教程 —— Day 7 附录：鸿蒙多轮对话修复坑点实录

本文总结了实现多轮对话流式交互时遇到的4个典型问题及解决方案：1）闭包捕获导致消息错位，需用局部变量保存状态快照；2）数组响应式更新失效，应遵循不可变原则创建新引用；3）Surface生命周期管理不当，需避免全局状态覆盖历史资源；4）消息定位回退逻辑缺陷，应增加时间窗口限制和状态标记。这些案例揭示了流式交互中时序竞争和状态管理的复杂性，强调精确匹配、资源隔离和边界条件的重要性。