基于凌羽派的OpenHarmony北向应用开发：Hello World 示例应用

本示例是基于 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 # 应用构建配置文件

二、环境准备

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

安装 DevEco Studio 开发工具

配置 OpenHarmony SDK 环境

准备好 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. 安装到设备

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

使用以下命令安装应用：

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是应用的主界面，它实现了动态文本显示和点击切换功能。

数据定义

// 存储多段文本privatemessages:Array = ['Hello World','Welcome to OpenHarmony','Enjoy Coding','Lockzhiner Electronics'];// 当前显示文本的索引@StatecurrentIndex:number=0;// 控制动画状态的辅助状态@StateisFadingOut: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布局，包含一个图片和一个文本组件：

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

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

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

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

交互逻辑

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

户点击文本时：

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

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

触发淡入动画 (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 版本}