第1篇：认识ArkTS——搭建鸿蒙开发环境
第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开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
5
0- 0
已为社区贡献22条内容
所有评论(0)