本示例是基于 OpenHarmony 開發(fā)的第一個(gè)簡單應(yīng)用，用于展示如何創(chuàng)建、構(gòu)建和部署一個(gè)基本的應(yīng)用程序。

環(huán)境配置如下所示：

API：18

SDK：OpenHarmony-v5.1.0-Release

代碼倉：https://gitee.com/Lockzhiner-Electronics/lingyu-rk3566-openharmony/tree/master/samples/C01_HelloWorld

一、目錄結(jié)構(gòu)

helloword/├── entry/ # 主模塊目錄│ ├── src/main/ # 源代碼目錄│ │ ├── ets/ # ArkTS 代碼目錄│ │ │ ├── entryability/# 應(yīng)用 Ability 入口│ │ │ └── pages/ # 頁面組件│ │ └── resources/ # 資源文件目錄│ └──build-profile.json5 # 模塊構(gòu)建配置文件├── AppScope/ # 應(yīng)用全局配置目錄├── build/ # 構(gòu)建輸出目錄├── oh_modules/ # 依賴庫目錄└──build-profile.json5 # 應(yīng)用構(gòu)建配置文件

二、環(huán)境準(zhǔn)備

在開始之前，請(qǐng)確保已完成以下準(zhǔn)備工作：

安裝 DevEco Studio 開發(fā)工具

配置 OpenHarmony SDK 環(huán)境

準(zhǔn)備好 OpenHarmony 設(shè)備或模擬器

如未完成環(huán)境搭建，請(qǐng)參考：開發(fā)環(huán)境搭建指南

三、快速開始

1. 打開項(xiàng)目

使用DevEco Studio打開項(xiàng)目中的helloword目錄：

系統(tǒng)可能會(huì)提示您同步項(xiàng)目，點(diǎn)擊 "Trust Project" 信任項(xiàng)目：

2. 配置構(gòu)建文件

檢查并更新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. 同步項(xiàng)目配置

修改配置文件后，點(diǎn)擊右上角的 "Sync Now" 提示來同步項(xiàng)目：

確認(rèn)同步操作：等待同步完成，并確保沒有錯(cuò)誤：

4. 編譯項(xiàng)目

點(diǎn)擊菜單欄中的 "Build" > "Build Project" 或使用快捷鍵進(jìn)行項(xiàng)目構(gòu)建：

構(gòu)建成功后，可以在build/default/outputs/default目錄下找到生成的 HAP（HarmonyOS Ability Package）文件：

5. 安裝到設(shè)備

連接設(shè)備并通過命令行進(jìn)入 HDC 工具所在目錄

使用以下命令安裝應(yīng)用：

hdc install [hap文件路徑]

例如：

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

安裝過程示例：

6. 運(yùn)行應(yīng)用

在設(shè)備上找到已安裝的應(yīng)用圖標(biāo)，點(diǎn)擊運(yùn)行：

打開應(yīng)用后，可以看到顯示 "Hello World" 的界面：

四、核心代碼解析

應(yīng)用入口文件 (EntryAbility.ets)

應(yīng)用的入口文件是EntryAbility.ets，它繼承自 UIAbility 類，是應(yīng)用的主入口點(diǎn)。其中最重要的方法是onWindowStageCreate，它負(fù)責(zé)加載應(yīng)用的主頁面：

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 頁面，即我們應(yīng)用的主界面。

主界面代碼 (Index.ets)

Index.ets是應(yīng)用的主界面，它實(shí)現(xiàn)了動(dòng)態(tài)文本顯示和點(diǎn)擊切換功能。

數(shù)據(jù)定義

// 存儲(chǔ)多段文本privatemessages:Array = ['Hello World','Welcome to OpenHarmony','Enjoy Coding','Lockzhiner Electronics'];// 當(dāng)前顯示文本的索引@StatecurrentIndex:number=0;// 控制動(dòng)畫狀態(tài)的輔助狀態(tài)@StateisFadingOut:boolean=false;

messages數(shù)組存儲(chǔ)了要顯示的文本內(nèi)容

currentIndex用于跟蹤當(dāng)前顯示的文本索引

isFadingOut控制文本的淡入淡出動(dòng)畫效果

UI 結(jié)構(gòu)

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(() => { // 點(diǎn)擊事件處理邏輯 })}

界面使用RelativeContainer布局，包含一個(gè)圖片和一個(gè)文本組件：

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

動(dòng)態(tài)文本：從messages數(shù)組中根據(jù)currentIndex顯示當(dāng)前文本

字體大小：使用$r('app.float.page_text_font_size')從資源配置中獲取字體大小

動(dòng)畫效果：通過opacity和animation實(shí)現(xiàn)淡入淡出效果

交互邏輯

.onClick(() => { // 觸發(fā)淡出動(dòng)畫 this.isFadingOut =true; // 在淡出動(dòng)畫結(jié)束后更新文本索引并觸發(fā)淡入 setTimeout(() => { // 更新文本索引 (循環(huán)) this.currentIndex = (this.currentIndex +1) %this.messages.length; // 觸發(fā)淡入動(dòng)畫 this.isFadingOut =false; },300);})

戶點(diǎn)擊文本時(shí)：

觸發(fā)淡出動(dòng)畫 (isFadingOut設(shè)置為 true)

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

觸發(fā)淡入動(dòng)畫 (isFadingOut設(shè)置為 false)

五、項(xiàng)目配置說明

應(yīng)用簽名配置

項(xiàng)目中的簽名配置位于build-profile.json5文件中，示例如下：

{ "signingConfigs":[ { "name":"default", "material":{ "certpath":"證書路徑", "keyAlias":"密鑰別名", "keyPassword":"密鑰密碼", "profile":"配置文件路徑", "signAlg":"簽名算法", "storeFile":"密鑰存儲(chǔ)文件路徑", "storePassword":"存儲(chǔ)密碼" } } ]}

SDK 版本配置

{ "compileSdkVersion":18, // 編譯時(shí)使用的 SDK 版本 "compatibleSdkVersion":18, // 兼容的最低 SDK 版本 "targetSdkVersion":18 // 目標(biāo) SDK 版本}