TypeScript大前端
鸿蒙 ArkTS 开发入门：Hello World 环境搭建与实战
本文介绍鸿蒙 Next 开发环境搭建、Stage 模型理解及 ArkTS 基础语法。通过 DevEco Studio 创建 Hello World 应用，演示真机调试、布局预览与 Git 版本控制流程，帮助开发者快速上手纯原生鸿蒙应用开发。
本文介绍鸿蒙 Next 开发环境搭建、Stage 模型理解及 ArkTS 基础语法。通过 DevEco Studio 创建 Hello World 应用，演示真机调试、布局预览与 Git 版本控制流程，帮助开发者快速上手纯原生鸿蒙应用开发。
这是《鸿蒙 APP 开发从入门到精通》的第 1 篇——入门基石篇。后续文章将以此为基础，逐步构建一个完整的鸿蒙电商购物车全栈项目。
学习目标：
学习重点：
⚠️ 注意：HarmonyOS Next 应用市场已全面开放，必须使用 DevEco Studio 5.0+ 和HarmonyOS Next SDK（移除了 Android 兼容层）进行开发。
① 访问华为开发者中心下载对应版本的 IDE； ② 运行安装程序，安装路径建议不含中文； ③ 首次启动 DevEco Studio，会自动下载 HarmonyOS Next SDK（约 10G）。
① 访问 Node.js 官网下载 Node.js 18.0+ LTS 版本，安装后通过 node -v 验证；
② 访问 Git 官网下载 Git，安装后通过 git --version 验证；
③ 在 DevEco Studio→「Settings→Tools→External Tools→Node.js and NPM」「Git」中配置对应路径。
① 访问华为开发者中心注册账号； ② 完成实名认证（需身份证正反面照片），审核时间约 10 分钟； ③ 在 DevEco Studio→「Settings→Account」中登录已认证的账号。
① 打开调试设备→「设置→关于本机→多次点击版本号」开启开发者模式； ② 进入「系统和更新→开发人员选项」→开启「USB 调试」「无线调试」「允许调试权限」； ③ 安装 HarmonyOS 应用测试证书（DevEco Studio 会自动生成并安装）。
① 在 DevEco Studio→「Run→Simulator and Device」中选择「Connect to Real Device→Wireless」； ② 在调试设备上获取「IP 地址 + 端口号」和「配对码」； ③ 在 DevEco Studio 中输入对应信息，点击「Connect」，连接成功后设备会显示绿色图标。
⚠️ 注意：无线调试仅适用于同一局域网内的设备，且首次连接需通过 USB 调试授权。
HarmonyOS Next 移除了 Android 兼容层，统一使用Stage 模型作为应用架构，核心概念包括：
| 概念 | 功能 |
|---|---|
| Application | 应用入口，管理所有 UIAbility 的生命周期 |
| UIAbility | 页面容器，一个 UIAbility 对应一个用户任务流 |
| Page | 具体的应用页面，使用 ArkTS/ArkUI 开发 |
| ServiceAbility | 后台服务，无界面，用于处理长时间运行的任务 |
ArkTS 支持类型注解和类型推断：
// 类型注解
let message: string = 'Hello World!';
const age: number = 2025;
// 类型推断（编译器自动推断类型）
let count = 10; // 推断为 number 类型
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%');
}
}
ArkTS 提供5 种常用布局容器：
Column()：垂直布局；Row()：水平布局；Flex()：弹性布局（推荐）；Grid()：网格布局；Stack()：叠加布局。① 在 DevEco Studio 中点击「Create Project」； ② 选择「HarmonyOS→Application→Empty Ability」； ③ 配置项目信息：
⌨️ 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%');
}
}
① 在「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');
}
}
① 在 DevEco Studio 中打开「Index.ets」； ② 点击代码编辑器右上角的「Preview」按钮； ③ 等待编译完成，会在右侧显示布局预览图，可选择不同设备尺寸预览。
① 确保调试设备已开启无线调试并连接到 DevEco Studio； ② 点击代码编辑器右上角的「Run」按钮； ③ 选择调试设备，点击「OK」； ④ 等待编译安装完成，应用会自动在设备上启动。
✅ 页面 1：显示「Hello World!」卡片和「点击了解更多」按钮； ✅ 页面跳转：点击「点击了解更多」按钮→跳转至 AboutPage； ✅ 返回功能：点击 AboutPage 的「返回」按钮→返回至 Index； ✅ 控制台输出：点击卡片会在 DevEco Studio 的「Console」窗口输出「点击了 Hello World! 卡片」。
① 在 DevEco Studio 中点击「VCS→Enable Version Control Integration」； ② 选择 Git，点击「OK」； ③ 在「Commit」窗口中选择要提交的文件，输入提交信息（如「feat: 创建第一个 Hello World! 应用」）； ④ 点击「Commit and Push」→配置远程仓库（GitHub/Gitee 等）→点击「Push」。
本文作为《鸿蒙 APP 开发从入门到精通》的第 1 篇，完成了：
恭喜你！你已经完成了《鸿蒙 APP 开发从入门到精通》的第 1 篇，正式开启了你的鸿蒙开发之旅。
从现在开始，你已具备了开发鸿蒙 Next 纯原生应用的基础能力。未来的文章将逐步构建一个完整的鸿蒙电商购物车全栈项目。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online