熊大科技君：鸿蒙DevEco Studio零基础入门教程

熊大科技君为鸿蒙开发新手提供DevEco Studio入门教程，涵盖环境配置到应用调试全流程。主要内容包括：1）新建项目步骤与核心目录结构；2）ArkTS页面编写实战（HelloWorld示例）；3）开发常用快捷键；4）实时预览与模拟器运行；5）基础调试方法。教程采用实操方式，帮助开发者快速上手鸿蒙应用开发，并建议后续学习ArkUI组件、状态管理等进阶内容。

熊大科技君

166人浏览 · 2026-05-21 09:56:55

熊大科技君 · 2026-05-21 09:56:55 发布

熊大科技君专注鸿蒙开发实战教学，本文为新手整理了DevEco Studio完整入门实操教程，从环境准备到代码编写、预览调试，一步步带你上手鸿蒙应用开发，全程实操可直接跟着做。

DevEco Studio 是华为鸿蒙（HarmonyOS）官方IDE，核心开发语言为 ArkTS（类TS/前端），搭配 ArkUI 组件化开发，整体流程简洁：新建工程→熟悉目录→编写ArkTS→预览/模拟器→调试，新手可按以下步骤逐步操作。

一、准备与新建项目

核心前提：安装DevEco Studio（版本≥5.0），并完成SDK与模拟器的环境配置（安装过程略，可参考华为官方文档）。

新建工程步骤：

创建入口：软件首页点击 Create Project，或通过顶部菜单 File → New → Create Project 进入。
选择模板：勾选 Application → Empty Ability（空白模板），点击Next。
项目配置：填写 Project Name（示例：MyFirstApp）、选择 Compatible SDK（推荐5.0.0(12)）、设备类型选择「手机」，点击Finish。
等待项目自动生成基础目录与初始代码，直至索引加载完成（底部进度条消失即可）。

二、核心目录结构（重点记忆）

日常开发无需记住所有目录，重点掌握以下核心路径即可，其余目录可后续逐步了解：

entry/src/main/
├── ets/
│   ├── entryability/   # 应用入口，管控应用生命周期
│   └── pages/          # 核心编码区，存放所有页面
│       └── index.ets   # 默认首页，主要开发文件
├── resources/          # 静态资源目录（图片、文字、颜色等）
└── module.json5        # 模块配置（页面路由、应用权限等）

三、编写第一个ArkTS页面（HelloWorld实操）

找到路径：entry/src/main/ets/pages/index.ets（默认首页），删除原有代码，复制以下完整代码覆盖，保存即可：

// 装饰器：声明页面唯一入口
@Entry
// 装饰器：定义可复用自定义组件
@Component
struct Index {
  // 状态变量：数据变更时自动刷新UI（响应式）
  @State message: string = 'Hello DevEco Studio!';

  // UI构建核心函数（必写，用于描述页面布局）
  build() {
    // 根容器：全屏相对布局，包裹所有页面组件
    RelativeContainer() {
      // 文本组件：展示核心内容
      Text(this.message)
        .fontSize(24)          // 文字字号
        .fontWeight(FontWeight.Bold) // 文字加粗
        .fontColor('#007DFF') // 文字颜色（蓝色）
        // 约束文本居中显示
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        // 点击事件：点击文字修改内容
        .onClick(() => {
          this.message = '你好，鸿蒙！';
        })
    }
    .width('100%') // 容器宽度全屏
    .height('100%') // 容器高度全屏
    .backgroundColor('#F5F5F5') // 页面背景色（浅灰）
  }
}

关键语法说明（新手必记）

@Entry：标识当前页面为入口页面，一个页面只能有一个。
@Component：声明自定义组件，组件可复用（后续进阶会用到）。
@State：响应式状态变量，只要变量值改变，页面UI会自动刷新。
build()：UI构建函数，必须编写，用于描述页面所有组件的布局和样式。
组件链式调用：Text().fontSize().onClick()，简洁高效，是ArkTS核心写法。

四、编码常用快捷键（提高开发效率）

常用快捷键整理（适配Windows/macOS，新手必记）：

格式化代码：WindowsCtrl+Alt+L / macOS Option+Command+L
注释/取消注释：Ctrl+/（支持单行、选中块注释）
代码折叠：点击编辑器左侧「-」，或右键选择「Collapse」
查找引用：选中变量/函数 → 右键 → Find Usages（快捷键 Alt+F7）
快速查阅API：鼠标悬停组件/API，自动显示参数说明
生成函数注释：在函数上方输入 /** 后按回车，自动生成注释模板

五、预览与运行（即时查看效果）

两种方式，新手优先用「实时预览」，快速验证代码；模拟器用于查看真实运行效果。

1. 实时预览（最常用）

打开 index.ets 页面，点击编辑器右上角「Preview」（眼睛图标），右侧会实时渲染页面效果，修改代码后秒更新，无需编译，高效便捷。

2. 模拟器运行（真实效果验证）

启动模拟器：顶部菜单 → Tools → HVD Manager，选择手机设备（如Huawei_Phone），点击绿色三角启动。
运行项目：点击工具栏绿色三角（Run），快捷键 Shift+F10，选择已启动的模拟器，等待应用自动安装并启动。
预期效果：点击页面中的文字，会从「Hello DevEco Studio!」切换为「你好，鸿蒙！」。

六、调试基础（排错必备）

代码出错不用慌，掌握基础调试方法，快速定位问题：

设置断点：点击代码行号左侧，出现红色圆点即为断点（程序运行到此处会自动暂停）。
启动调试：点击工具栏「Debug」（虫子图标），选择模拟器，进入调试模式。
常用调试操作：
1. Step Over（F8）：逐行执行代码，不进入函数内部。
2. Step Into（F7）：进入函数内部，查看详细执行逻辑。
3. Variables面板：实时查看当前所有变量的数值，快速定位错误原因。