鸿蒙零基础实战教程Day1：HarmonyOS ArkUI 入门实战

好的，Day1 博客已更新，加入实际运行效果图：

鸿蒙零基础实战教程Day1：HarmonyOS ArkUI 入门实战

前言

HarmonyOS NEXT 已经正式发布，作为纯血鸿蒙应用开发的核心框架，ArkUI 提供了声明式 UI 开发范式。今天我们从最基础的组件开始，快速上手。

今日目标

搭建一个简单的页面，掌握以下核心概念：

Text 文本组件
Button 按钮组件
事件处理（点击事件）
promptAction 弹窗提示
页面路由配置

一、创建页面文件

在 entry/src/main/ets/pages/ 目录下新建文件夹和文件：

复制代码

pages/
├── Day_one/              # 新建文件夹
│   └── IndexPage.ets     # Day1 页面
└── Index.ets             # 默认首页

二、编写页面代码

entry/src/main/ets/pages/Day_one/IndexPage.ets：

typescript 复制代码

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct IndexPage {
  build() {
    Column({ space: 2 }) {
      // 1. 文本组件
      Text("Hello HarmonyOS")
        .width(200)
        .height(100)
        .fontSize(24)
        .fontColor(Color.Red)
        .backgroundColor(Color.Orange)
        .onClick(() => {
          // 点击文本弹出 Toast
          promptAction.showToast({
            message: 'Welcome'
          })
        })

      // 2. 按钮组件
      Button("welcome")
        .width(100)
        .height(50)
        .onClick(() => {
          // 点击按钮弹出 Dialog
          promptAction.showDialog({
            message: "Hello HarmonyOS"
          })
        })
    }
    .width("100%")
  }
}

三、注册页面路由

修改 entry/src/main/resources/base/profile/main_pages.json：

json 复制代码

{
  "src": [
    "pages/Index",
    "pages/Day_one/IndexPage"
  ]
}

四、修改入口加载路径

打开 entry/src/main/ets/entryability/EntryAbility.ets，找到 onWindowStageCreate 方法，修改 loadContent 的路径：

typescript 复制代码

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    // ⭐ 修改这里：指定 Day1 页面为启动页
    windowStage.loadContent('pages/Day_one/IndexPage', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

⚠️ 关键修改 ：将默认的 'pages/Index' 改为 'pages/Day_one/IndexPage'，与 main_pages.json 中注册的路径保持一致。

五、运行效果

5.1 初始页面

页面包含：

橙色背景、红色字体的 "Hello HarmonyOS" 文本
蓝色圆角 "welcome" 按钮

5.2 点击按钮弹出 Dialog

点击 welcome 按钮后，屏幕中央弹出模态对话框，显示 "Hello HarmonyOS"。

💡 注意：点击文本区域会弹出 Toast（底部轻提示 "Welcome"），因截图时机原因未在图中展示，Toast 会自动消失。

六、知识点拆解

6.1 装饰器

装饰器	作用
`@Entry`	标记页面入口，每个页面必须有且只有一个
`@Component`	标记自定义组件

6.2 布局容器

Column 是垂直方向线性布局容器，space: 2 设置子组件之间的间距为 2vp。

6.3 组件链式调用

ArkUI 采用声明式语法，通过 .属性() 链式设置样式：

typescript 复制代码

Text("Hello HarmonyOS")
  .width(200)           // 宽度 200vp
  .height(100)          // 高度 100vp
  .fontSize(24)         // 字体大小 24fp
  .fontColor(Color.Red) // 字体颜色
  .backgroundColor(Color.Orange)

6.4 promptAction 弹窗

从 @kit.ArkUI 导入：

方法	效果	特点
`showToast`	底部轻提示	自动消失，不打断用户
`showDialog`	模态对话框	需手动确认，居中显示

6.5 页面路由机制

步骤	文件	操作
1	`pages/Day_one/IndexPage.ets`	创建页面组件
2	`main_pages.json`	注册页面路径
3	`EntryAbility.ets`	`loadContent` 指定启动页

七、小结

要点	说明
声明式语法	描述 UI 应该长什么样，而非命令式操作 DOM
链式调用	属性设置更简洁
事件绑定	`.onClick(() => { ... })`
弹窗 API	`promptAction` 统一处理 Toast/Dialog
页面路由	`main_pages.json` 注册 + `loadContent` 加载

下节预告

鸿蒙零基础实战教程Day2 ------ 将学习 Row 横向布局 、Flex 弹性布局 以及 状态管理（@State），实现一个可以交互的计数器。

💡 小提示 ：组件名建议大写驼峰（如 IndexPage），与变量区分更清晰。