本示例是基于 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 版本}