本示例是基于 OpenHarmony 开发的第一个简单应用，用于展示如何创建、构建和部署一个基本的应用程序。

环境配置如下所示：

• API：18

• SDK：OpenHarmony-v5.1.0-Release

• 代码仓：https://gitee.com/Lockzhiner-Electronics/lingyu-rk3566-openharmony/tree/master/samples/C01_HelloWorld

一、目录结构

helloword/
├── entry/                    # 主模块目录
│   ├── src/main/             # 源代码目录
│   │   ├── ets/              # ArkTS 代码目录
│   │   │   ├── entryability/ # 应用 Ability 入口
│   │   │   └── pages/        # 页面组件
│   │   └── resources/        # 资源文件目录
│   └── build-profile.json5   # 模块构建配置文件
├── AppScope/                 # 应用全局配置目录
├── build/                    # 构建输出目录
├── oh_modules/               # 依赖库目录
└── build-profile.json5       # 应用构建配置文件

二、环境准备

在开始之前，请确保已完成以下准备工作：

1. 安装 DevEco Studio 开发工具

2. 配置 OpenHarmony SDK 环境

3. 准备好 OpenHarmony 设备或模拟器

如未完成环境搭建，请参考：开发环境搭建指南

三、快速开始

1. 打开项目

使用 DevEco Studio 打开项目中的 helloword 目录：

系统可能会提示您同步项目，点击 "Trust Project" 信任项目：

2. 配置构建文件

检查并更新 build-profile.json5 文件中的 SDK 版本信息：

{
  "app": {
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
        "compileSdkVersion": 18,
        "compatibleSdkVersion": 18,
        "targetSdkVersion": 18,
        "runtimeOS": "OpenHarmony",
        "buildOption": {
          "strictMode": {
            "caseSensitiveCheck": true,
            "useNormalizedOHMUrl": false
          }
        }
      }
    ]
  }
}

3. 同步项目配置

修改配置文件后，点击右上角的 "Sync Now" 提示来同步项目：

确认同步操作：

等待同步完成，并确保没有错误：

4. 编译项目

点击菜单栏中的 "Build" > "Build Project" 或使用快捷键进行项目构建：

构建成功后，可以在 build/default/outputs/default 目录下找到生成的 HAP（HarmonyOS Ability Package）文件：

5. 安装到设备

1. 连接设备并通过命令行进入 HDC 工具所在目录

2. 使用以下命令安装应用：

hdc install [hap文件路径]

例如：

hdc install ./entry/default/entry-default-unsigned.hap

安装过程示例：

6. 运行应用

在设备上找到已安装的应用图标，点击运行：

打开应用后，可以看到显示 "Hello World" 的界面：

四、核心代码解析

应用入口文件 (EntryAbility.ets)

应用的入口文件是 EntryAbility.ets，它继承自 UIAbility 类，是应用的主入口点。其中最重要的方法是 onWindowStageCreate，它负责加载应用的主页面：

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (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.');
  });
}

windowStage.loadContent('pages/Index', ...) 这一行代码加载了 Index 页面，即我们应用的主界面。

主界面代码 (Index.ets)

Index.ets 是应用的主界面，它实现了动态文本显示和点击切换功能。

数据定义

// 存储多段文本
private messages: Array<string> = ['Hello World', 'Welcome to OpenHarmony', 'Enjoy Coding', 'Lockzhiner Electronics'];

// 当前显示文本的索引
@State currentIndex: number = 0;

// 控制动画状态的辅助状态
@State isFadingOut: boolean = false;

• messages 数组存储了要显示的文本内容

• currentIndex 用于跟踪当前显示的文本索引

• isFadingOut 控制文本的淡入淡出动画效果

UI 结构

RelativeContainer() {
  Image($r('app.media.logo'))
    .width(250)
    .height(75)
    .alignRules({
      center: { anchor: '__container__', align: VerticalAlign.Center },
      middle: { anchor: '__container__', align: HorizontalAlign.Center }
    })
    .offset({x:0,y:this.imageOffsetY-200})
    
  Text(this.messages[this.currentIndex])
    .fontSize($r('app.float.page_text_font_size'))
    .fontWeight(FontWeight.Bold)
    .alignRules({
      center: { anchor: '__container__', align: VerticalAlign.Center },
      middle: { anchor: '__container__', align: HorizontalAlign.Center }
    })
    .opacity(this.isFadingOut ? 0 : 1)
    .animation({
      duration: 300,
      curve: Curve.EaseInOut
    })
    .onClick(() => {
      // 点击事件处理逻辑
    })
}

界面使用 RelativeContainer 布局，包含一个图片和一个文本组件：

1. Logo 图片：使用 $r('app.media.logo') 引用资源文件中的 logo.png 图片

2. 动态文本：从 messages 数组中根据 currentIndex 显示当前文本

3. 字体大小：使用 $r('app.float.page_text_font_size') 从资源配置中获取字体大小

4. 动画效果：通过 opacity 和 animation 实现淡入淡出效果

交互逻辑

.onClick(() => {
  // 触发淡出动画
  this.isFadingOut = true;

  // 在淡出动画结束后更新文本索引并触发淡入
  setTimeout(() => {
    // 更新文本索引 (循环)
    this.currentIndex = (this.currentIndex + 1) % this.messages.length;

    // 触发淡入动画
    this.isFadingOut = false;
  }, 300);
})

当用户点击文本时：

1. 触发淡出动画 (isFadingOut 设置为 true)

2. 300ms 后更新文本索引 (currentIndex)

3. 触发淡入动画 (isFadingOut 设置为 false)

五、项目配置说明

应用签名配置

项目中的签名配置位于 build-profile.json5 文件中，示例如下：

{
  "signingConfigs": [
    {
      "name": "default",
      "material": {
        "certpath": "证书路径",
        "keyAlias": "密钥别名",
        "keyPassword": "密钥密码",
        "profile": "配置文件路径",
        "signAlg": "签名算法",
        "storeFile": "密钥存储文件路径",
        "storePassword": "存储密码"
      }
    }
  ]
}

SDK 版本配置

{
  "compileSdkVersion": 18,      // 编译时使用的 SDK 版本
  "compatibleSdkVersion": 18,    // 兼容的最低 SDK 版本
  "targetSdkVersion": 18        // 目标 SDK 版本
}