鸿蒙 ArkTS 开发入门：Hello World 环境搭建与实战

2. 无线调试连接

① 在 DevEco Studio→「Run→Simulator and Device」中选择「Connect to Real Device→Wireless」； ② 在调试设备上获取「IP 地址 + 端口号」和「配对码」； ③ 在 DevEco Studio 中输入对应信息，点击「Connect」，连接成功后设备会显示绿色图标。

⚠️ 注意：无线调试仅适用于同一局域网内的设备，且首次连接需通过 USB 调试授权。

二、ArkTS 基础：编写第 1 个 Hello World！

2.1 Stage 模型：Next 纯原生架构

HarmonyOS Next 移除了 Android 兼容层，统一使用Stage 模型作为应用架构，核心概念包括：

2.2 ArkTS 基础语法

1. 变量声明

ArkTS 支持类型注解和类型推断：

// 类型注解
let message: string = 'Hello World!';
const age: number = 2025;

// 类型推断（编译器自动推断类型）
let count = 10; // 推断为 number 类型

2. 组件定义与使用

ArkTS 使用 @Component 注解定义组件，build() 方法中编写 UI 代码：

import router from '@ohos/router';

// 自定义组件：HelloWorldCard
@Component
struct HelloWorldCard {
  // 组件属性（支持数据双向绑定）
  @State title: string = 'Hello World!';
  @State content: string = '开启你的鸿蒙开发之旅';

  // 组件方法
  private onClick(): void {
    console.log('点击了 Hello World! 卡片');
    router.pushUrl({ url: 'pages/AboutPage' }); // 页面跳转
  }

  // UI 代码
  build() {
    Column({ space: 16 }) {
      Text(this.title).fontSize(24).fontWeight(FontWeight.Bold).textColor('#000000');
      Text(this.content).fontSize(14).textColor('#666666').maxLines(2).ellipsis({ overflow: TextOverflow.Ellipsis });
      Button('点击了解更多').width('60%').height(48).onClick(() => this.onClick());
    }.width('100%').height('100%').padding(24).backgroundColor('#F5F5F5');
  }
}

// 页面组件：入口页面
@Entry
@Component
struct Index {
  build() {
    Column() {
      HelloWorldCard();
    }.width('100%').height('100%');
  }
}

3. 布局容器

ArkTS 提供5 种常用布局容器：

• Column()：垂直布局；
• Row()：水平布局；
• Flex()：弹性布局（推荐）；
• Grid()：网格布局；
• Stack()：叠加布局。

2.3 实战：创建你的第 1 个 Next 应用

1. 项目创建

① 在 DevEco Studio 中点击「Create Project」； ② 选择「HarmonyOS→Application→Empty Ability」； ③ 配置项目信息：

• Project name：MyFirstHarmonyApp；
• Package name：com.harmony.firstapp（建议使用域名反转的格式）；
• SDK：HarmonyOS Next；
• Device：Phone（默认支持手机、平板、智慧屏）； ④ 点击「Finish」，项目会自动下载依赖库。

2. 编写 Hello World！代码

⌨️ entry/src/main/ets/pages/Index.ets（替换默认代码）

import router from '@ohos/router';

// 自定义组件：HelloWorldCard
@Component
struct HelloWorldCard {
  @State title: string = 'Hello World!';
  @State content: string = '开启你的鸿蒙开发之旅';

  private onClick(): void {
    console.log('点击了 Hello World! 卡片');
    router.pushUrl({ url: 'pages/AboutPage' });
  }

  build() {
    Column({ space: 16 }) {
      Text(this.title).fontSize(24).fontWeight(FontWeight.Bold).textColor('#000000');
      Text(this.content).fontSize(14).textColor('#666666').maxLines(2).ellipsis({ overflow: TextOverflow.Ellipsis });
      Button('点击了解更多').width('60%').height(48).onClick(() => this.onClick());
    }.width('100%').height('100%').padding(24).backgroundColor('#F5F5F5');
  }
}

// 页面组件：入口页面
@Entry
@Component
struct Index {
  build() {
    Column() {
      HelloWorldCard();
    }.width('100%').height('100%');
  }
}

3. 创建 AboutPage 页面

① 在「entry/src/main/ets/pages」右键点击→「New→Page」； ② 命名为 AboutPage，点击「Finish」； ③ 编写 AboutPage 代码：

⌨️ entry/src/main/ets/pages/AboutPage.ets

import router from '@ohos/router';

@Entry
@Component
struct AboutPage {
  build() {
    Column({ space: 16 }) {
      Text('关于 MyFirstHarmonyApp').fontSize(20).fontWeight(FontWeight.Bold).textColor('#000000');
      Text('这是一个使用 ArkTS 开发的 Next 纯原生应用').fontSize(14).textColor('#666666');
      Button('返回').width('60%').height(48).onClick(() => router.back());
    }.width('100%').height('100%').padding(24).backgroundColor('#F5F5F5');
  }
}

三、项目运行：布局预览与真机调试

3.1 布局预览

① 在 DevEco Studio 中打开「Index.ets」； ② 点击代码编辑器右上角的「Preview」按钮； ③ 等待编译完成，会在右侧显示布局预览图，可选择不同设备尺寸预览。

3.2 实战：真机调试

① 确保调试设备已开启无线调试并连接到 DevEco Studio； ② 点击代码编辑器右上角的「Run」按钮； ③ 选择调试设备，点击「OK」； ④ 等待编译安装完成，应用会自动在设备上启动。

效果验证

✅ 页面 1：显示「Hello World!」卡片和「点击了解更多」按钮； ✅ 页面跳转：点击「点击了解更多」按钮→跳转至 AboutPage； ✅ 返回功能：点击 AboutPage 的「返回」按钮→返回至 Index； ✅ 控制台输出：点击卡片会在 DevEco Studio 的「Console」窗口输出「点击了 Hello World! 卡片」。

四、代码管理：使用 Git 进行版本控制

4.1 Git 初始化与提交

① 在 DevEco Studio 中点击「VCS→Enable Version Control Integration」； ② 选择 Git，点击「OK」； ③ 在「Commit」窗口中选择要提交的文件，输入提交信息（如「feat: 创建第一个 Hello World! 应用」）； ④ 点击「Commit and Push」→配置远程仓库（GitHub/Gitee 等）→点击「Push」。

五、总结与未来学习路径

5.1 总结

本文作为《鸿蒙 APP 开发从入门到精通》的第 1 篇，完成了：

• 100% 的 Next 开发环境搭建；
• 对 Stage 模型与 ArkTS 基础语法的理解；
• 你的第 1 个 Next 纯原生应用的创建、编写、调试；
• 布局预览、真机调试、Git 版本控制的完整流程。

5.2 未来学习路径

• 第 2 篇：ArkUI 组件库详解与常用组件的使用；
• 第 3 篇：自定义组件与数据双向绑定；
• 第 4 篇：网络请求与数据持久化；
• 第 5 篇：页面路由与组件跳转；
• 第 6 篇：原子化服务与元服务卡片的开发；
• 第 7 篇：超级终端多设备协同开发；
• 第 8 篇：服务联邦跨服务无缝打通；
• 第 9 篇：安全加固与组件化架构；
• 第 10 篇：AI 原生与用户增长；
• 第 11 篇：性能优化与 Next 原生合规；
• 第 12 篇：运维监控、生态运营与专属变现。

结语

恭喜你！你已经完成了《鸿蒙 APP 开发从入门到精通》的第 1 篇，正式开启了你的鸿蒙开发之旅。

从现在开始，你已具备了开发鸿蒙 Next 纯原生应用的基础能力。未来的文章将逐步构建一个完整的鸿蒙电商购物车全栈项目。