当前位置：首页 > news >正文

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

news 2026/5/8 0:10:24

第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@Componentstruct 我的页面{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@Componentstruct Index{@Statemessage: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文件
找到这行代码：
```
@Statemessage:string='Hello World'
```

改成：

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

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

完整代码：

// 完整可运行代码，复制到 Index.ets 即可运行@Entry@Componentstruct 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@Componentstruct 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@Componentstruct 页面名字{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