2、第一个鸿蒙应用:使用DevEco Studio创建第一个HarmonyOS应用项目
说实话,每次带新人入门,我最怕的就是环境搭好了,结果卡在第一个项目上。今天咱们就一步到位,把第一个鸿蒙应用跑起来。
我个人习惯是,学任何新框架,先别急着看文档,先动手跑个Hello World。跑通了,心里就有底了。你想想看,代码都没跑起来,看再多理论也是白搭。
2.1 创建项目:从零到一
打开DevEco Studio,你会看到欢迎界面。别慌,点那个「Create Project」就行。
关键选择:模板选「Empty Ability」,语言选「ArkTS」。ArkTS是鸿蒙的主力语言,说白了就是TypeScript的鸿蒙定制版,写起来很顺手。
填项目名的时候,我建议用英文小写加下划线,比如 hello_harmony。为什么?我在项目中遇到过,有些中文字符在路径里会引发奇奇怪怪的编译错误,省心点好。
其他配置保持默认,点Finish。等个几十秒,项目就创建好了。
2.2 项目目录结构:别被吓到
项目创建完后,你会看到一堆文件夹。嗯,我第一次看也懵。但别怕,核心就三个:
| 目录 | 作用 | 我的经验 |
|---|---|---|
entry/ |
应用的主入口模块,你的代码主要写在这里 | 90%的时间你都在这个目录里折腾 |
ohos/ |
鸿蒙系统的核心库和依赖 | 一般不用动,除非你要加原生能力 |
resources/ |
存放图片、字符串、颜色等资源文件 | 我曾经把图片直接放代码里,后来被同事骂了……资源就该放这里 |
咱们重点看 entry/src/main/ets/pages/ 下的 Index.ets 文件。这就是你的第一个页面。
2.3 Hello World 代码:其实就几行
打开 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%')
}
}
别被 @Entry 和 @Component 吓到。说白了,@Entry 就是告诉系统「这是我的入口页面」,@Component 就是「这是一个组件」。
@State message 是状态变量。你改这个值,界面会自动刷新。嗯,这就是响应式编程,不用手动操作DOM。
小技巧:把 Hello World 改成你的名字,看看效果。我当年第一次改的时候,盯着屏幕看了半天,觉得特神奇。
2.4 运行到模拟器:见证奇迹
代码写好了,怎么跑?点工具栏上的「Run」按钮(绿色三角)。
如果提示没有模拟器,点「Device Manager」创建一个。选 Phone,API版本选最新的就行。创建过程大概一两分钟,喝口水等一等。
注意:模拟器启动后,可能会有点慢。别急着点第二次,我曾经连续点了三次,结果开了三个模拟器……内存直接爆了。
等模拟器启动完毕,DevEco Studio会自动安装并运行你的应用。看到屏幕上出现「Hello World」了吗?恭喜,你的第一个鸿蒙应用跑起来了!
2.5 核心逻辑:一张图看懂
为了让你更清楚整个流程,我画了张图:
这张图展示了从创建项目到看到结果的完整链路。注意那个虚线箭头,代表热重载——你改完代码保存,模拟器会自动刷新,不用重新运行。这个功能我天天用,省了不少时间。
2.6 避坑指南
- 模拟器启动失败? 检查一下电脑的虚拟化有没有开启。BIOS里把Intel VT-x或AMD-V打开就行。
- 代码报红? 别慌,有时候是DevEco Studio的语法检查太敏感。先点一下「Build」看看能不能编译通过。
- 运行按钮是灰色的? 确认一下你选了模拟器。没选设备的话,按钮是点不了的。
我的习惯:每次新建项目,我都会先跑一次空项目,确认环境没问题。然后再开始写代码。这样出了问题,能快速定位是环境问题还是代码问题。
好了,第一个应用跑起来了。是不是比想象中简单?其实鸿蒙开发的门槛并不高,只要你把环境搭好,剩下的就是写代码的事了。