本示例是基于 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 目录:
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 abilityhilog.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'];// 当前显示文本的索引currentIndex: number = 0;// 控制动画状态的辅助状态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 布局,包含一个图片和一个文本组件:
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 版本}

