开源鸿蒙（OpenHarmony）实战入门：从 Hello World 到 UI 交互设计

开源鸿蒙（OpenHarmony）实战入门：从 Hello World 到 UI 交互设计

摘要 ：本文以一张典型的 OpenHarmony 开发环境截图为基础，深入解析一个标准的 Hello World 应用项目。通过代码结构、UI 布局、预览器功能和开发工具链的全面剖析，帮助初学者快速掌握 OpenHarmony 的核心开发流程与最佳实践。

---

一、引言：走进 OpenHarmony 开发世界

在上一篇《Electron 与开源鸿蒙的关系》中，我们探讨了跨平台框架与国产操作系统的生态融合。而本篇将聚焦于 OpenHarmony 的实际开发场景，以一张真实的 DevEco Studio 开发界面截图为例，带领读者从零开始构建一个基础应用。

图1：DevEco Studio 中的 HelloWord 项目结构与 Index.ets 代码

该截图展示了：

• 项目目录结构
• 使用 ArkTS 编写的主页面组件
• 实时预览功能
• 横竖屏切换按钮
• 字体样式修改提示

我们将逐层拆解这个"Hello World"应用，理解其背后的架构设计与技术细节。

---

二、项目结构解析

2.1 核心目录说明

hm_project/
├── entry/                  # 主入口模块
│   ├── src/
│   │   └── main/
│   │       ├── ets/          # ArkTS 源码
│   │       │   ├── entryability/  # 入口 Ability
│   │       │   │   └── Index.ets ← 当前文件
│   │       │   └── pages/     # 页面组件
│   │       └── app.ets        # 应用主入口
│   └── build/               # 构建输出
├── oh_modules/              # 第三方模块
└── config.json             # 配置文件

2.2 关键文件功能

文件	功能
Index.ets	主页面组件，显示"Hello World"
app.ets	应用启动入口，注册 Ability
config.json	定义应用名称、图标、权限等

---

三、核心组件：Index.ets 深度解析

3.1 代码概览

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(150)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Pink)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.2 技术要点详解

1. 组件声明与入口标记

@Entry
@Component
struct Index {

• @Component：声明这是一个可渲染的 UI 组件。
• @Entry：标记为应用入口组件，由系统自动加载。

2. 状态管理

@State message: string = 'Hello World';

• @State：标记为响应式状态变量，当值变化时自动触发 UI 更新。
• 初始值为 'Hello World'，后续可通过事件或异步请求修改。

3. 声明式 UI 构建

build() {
  Row() {
    Column() {
      Text(this.message)
        .fontSize(150)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Pink)
    }.width('100%')
  }.height('100%')
}

• Row()：水平排列子元素，占据整个屏幕宽度。
• Column()：垂直堆叠子元素，用于居中内容。
• Text()：文本显示组件，支持链式调用设置样式。
• .fontSize(150)：字体大小为 150sp。
• .fontWeight(FontWeight.Bold)：加粗字体。
• .fontColor(Color.Pink)：粉红色文字。
• .width('100%') 和 .height('100%')：容器占满父级空间。

提示：ArkUI 支持链式调用，语法简洁，类似 React 或 Flutter。

---

四、开发工具：DevEco Studio 功能区详解

4.1 左侧项目树

• 显示项目所有文件和目录。
• 可展开 src/main/ets/pages 查看页面组件。
• Index.ets 被选中，表示当前编辑文件。

4.2 中间编辑器

• 显示 Index.ets 源码。
• 语法高亮支持 TypeScript、ArkTS 特性。
• 行号、折叠、断点等功能齐全。

4.3 右侧 Previewer（预览器）

• 实时预览 UI 效果。
• 提供多种设备模拟器：
  • Phone (medium)：普通手机屏幕。
  • Foldable (large)：折叠屏设备。
• 支持横竖屏切换（红色箭头标注处），便于适配不同方向。

优势：无需编译运行即可看到视觉效果，大幅提升开发效率。

---

五、UI 交互与调试技巧

5.1 修改字体特性

如图中红色框所示：

Text(this.message)
  .fontSize(150)
  .fontWeight(FontWeight.Bold)
  .fontColor(Color.Pink)

• 注意严格区分大小写 ：
  • FontWeight.Bold 必须大写 Bold。
  • Color.Pink 必须大写 Pink。
  • 错误写法如 color.pink 会导致编译错误。

5rais 5.2 横竖屏切换

点击预览器右上角的旋转图标（方块内带箭头），可在横屏和竖屏之间切换。

用途：

• 验证布局是否适应不同屏幕方向。
• 测试响应式设计（如 Column 在横屏下可能改为 Row）。

5.3 实时更新与热重载

• 修改代码后，预览器会自动刷新。
• 若未更新，可点击刷新按钮或使用快捷键 Ctrl + Shift + R。

---

六、运行与部署流程

6.1 启动模拟器

点击顶部工具栏的绿色三角按钮，选择 HUAWEI Phone [NewDevice_from_Huawei_Phone] 启动模拟器。

6.2 构建与安装

底部终端显示构建命令：

$ hdc file send .../entry-default-unsigned.hap /sdcard/...
$ hdc shell bm install ...
$ hdc shell rm -rf /sdcard/...
$ hdc shell aa start -a EntryAbility -b com.example.helloworld

说明：

• hdc：HarmonyOS Device Connector，用于连接设备。
• hap：Harmony Ability Package，即应用包。
• aa start：启动 Ability。

6.3 日志查看

• 使用 Log 标签页查看运行日志。
• 可添加 console.log() 输出调试信息。

---

七、优化建议与扩展方向

7.1 性能优化

1. 避免频繁更新状态：

   @State message: string = 'Hello World';

   不要频繁修改 message，除非必要。

2. 使用 @Prop 传递数据：

   • 如果 message 来自父组件，应使用 @Prop 接收。

7.2 功能扩展

扩展功能	实现方式
点击改变文字	添加 onClick 事件
动画效果	使用 Animation 组件
多语言支持	引入 string.json 资源文件
图标展示	添加 Image 组件

---

八、总结：从 Hello World 看 OpenHarmony 开发范式

通过分析这张截图中的 Index.ets，我们总结出 OpenHarmony 应用开发的五大核心特征：

1. 声明式 UI ：使用 Row, Column, Text 等组件构建界面。
2. 响应式状态 ：@State 实现数据驱动视图更新。
3. 模块化设计：组件独立，易于复用。
4. 强类型支持：ArkTS 提供 TypeScript 类型安全。
5. 实时预览：DevEco Studio 提供所见即所得体验。

给初学者的建议：

• 优先学习 @Component, @State, Row, Column, Text 等基础组件。
• 掌握 Previewer 的使用方法。
• 注意大小写规范，避免低级错误。
• 尝试修改字体颜色、大小、对齐方式，熟悉样式设置。

---

附录：相关资源

• OpenHarmony 官方文档
• DevEco Studio 下载
• ArkTS 语言指南
• UI 组件参考

---