鴻蒙應(yīng)用開發(fā)初體驗(yàn)HelloWorld

9月25日，華為常務(wù)董事、終端BGCEO、智能汽車解決方案BU董事長(zhǎng)余

承東華為秋季全場(chǎng)景新品發(fā)布會(huì)上介紹了鴻蒙系統(tǒng)的最新進(jìn)展：HarmonyOS4

發(fā)布后，短短一個(gè)多月升級(jí)用戶已經(jīng)超過6000萬，成為史上升級(jí)速度最快的

HarmonyOS版本。余承東宣布，鴻蒙原生應(yīng)用全面啟動(dòng)，HarmonyOSNEXT開

發(fā)者預(yù)覽版將在2024年第一季度面向開發(fā)者開放，移動(dòng)開發(fā)的春天來了？

今天我們來體驗(yàn)下鴻蒙OS應(yīng)用開發(fā)。

|下載與安裝DevEcoStudio|

在HarmonyOS應(yīng)用開發(fā)學(xué)習(xí)之前，需要進(jìn)行一些準(zhǔn)備工作，首先需要完成開

發(fā)工具DevEcoStudio的下載與安裝以及環(huán)境配置。

進(jìn)入DevEc。Studio下載官網(wǎng)，單擊“立即下載”進(jìn)入下載頁面。

5

Hrrrcny9E2k?tf舞及XR

HUAWEIDevEcoStudio

遹吉金tSXSWfii楂依?監(jiān)Jt約介向世L廂開差節(jié)臺(tái)受工分布HB31月裒分布我￡戊譏：￡逸快tlERL片方t：的M記憶安

2￥1*,

<s>一?<現(xiàn)吻同學(xué)

DevEcoStudio提供了Windows版本和Mac版本選擇，可.以根據(jù)操作系統(tǒng)選

擇對(duì)應(yīng)的版本進(jìn)行下教。

這里以Windows為例進(jìn)行安裝。

下載完成后，雙擊下載的"deveco-studio-xxxx.exe",進(jìn)入DevEcoStudio安裝向

導(dǎo)，在如下界面選擇安裝路徑，默認(rèn)安裝于"C:\ProgramFiles”下，也可以單擊

“Browse...”指定其他安裝路徑，然后單擊“Next”。

GDevEcoStudioSetup—X

ChooseInstallLocation

AChoosethefolderinwhichtoinstalDevEcoStudo.

SetupwiinstalDevEcoStudointhefollowingfolder.Toinstaiinadfferentfbider,dick

Browseandselectanotherfolder.CkkNexttocontinue.

DestinobonFoHer

。:一夕前HesVluaweflvEeStudoBrowse...

Spacerequired:1.8G8

Spaceavailable:104.4G8

<BackNext>>：；同

如下安裝選項(xiàng)界面勾選DevEcuStudio后，單擊“Nexl”，直至安裝完成。

GDevEcoStudioSetupX

InstallationOptions

AConfigureyourDevEcoStudioinstallation

CreateDesktopShortcutUpdatePATHVariable(restartneeded)

0DevEcoStudio□Add"bin"foldertothePATH

updateContextMenu

□Add"OpenFolderasProjectr

(BackNext>>二F改凝一

安裝完成后，單擊“Finish”完成安裝。

CDevEcoStudioSetup

CompletingDevEcoStudioSetup

DevEcoStudiohasbeeninstalledonyourcomputer.

ClickFinishtodoseSetup.

□RunDevEcoStudio

<BackFinish廠啜劃應(yīng)同學(xué)

配置環(huán)境

SetupWizard

Node.jssetupfrom

1BasicSetup

Local?InstallfromHuaweiMirrorvl6.19.1

D:\configuration\node.js

SDKSetup

Ohpmsetupfrom?

Local?Install

SummaryD:\configuration\ohpm

Anewversion1.2.0exists.Installthelatestversion

單擊'Next，進(jìn)入SDK配置，設(shè)置為合適的路徑,

SetupWizard

.c?cConfigHarmonyOSSDK

1fBasicSetup”

D:\environments\SDK\hmSDK

Totaldownloadsize:306.00MBAvailabledisksp,

2SDKSetup

SDKComponentstoDownload:

3.1.0(API9)

3)Summary?Previewer75.00MB

?Toolchains32.3.637.65MB

OpenHarmony(API9)

?ArkTS54.02MB

?JS23.67MB

?Previewer3.2.12,5100.74MB

?Toolchains14.92MB

Previc

點(diǎn)擊'Next'后會(huì)顯示'SDKLicenseAgreement',閱讀相關(guān)協(xié)議后，勾選'Accept'。

SetupWizard

SDKLicenseAgreement

1BasicSetup

LicensesOPENHARMONYSOFTWAR

yHarmonyOS-SDKAGREEMENT

上Previewer()

AToolchains()

2SDKSetupThisOpenHarmonySoftwar

▼OpenHarmony-SDKAgreement(this'Agreemen

±ArkTS()andbetweenYouandOper

±JS()"OpenAtom"),whoseregisti

Room2018,BlockA,No.66

SummaryAPreviewer()

AToolchains()Beijing,thePeople'sRepub

youruseoftheOpenHarmc

Agreementcarefully.ByCLI

belowthisAgreementorby

SDKs,youshallbedeemed

andacceptedthetermscor

agreetothetermsofthisA

theOpenHarmonySDKs.

1.DEFINITIONS

ForpurposesofthisAgreer

shallhavethefollowingme<

1.1'OpenHarmony'refer

projectofOpenAtomFounc

Decline?Accept

Previc

單擊'Next'進(jìn)入配置預(yù)覽頁，在這里進(jìn)行配置項(xiàng)的確認(rèn)。

ASetupWizard

11BasicSetup_._.

尸BasicSetup

?Location:D:\configuration\nodejs

?Thenodewillbedownloadedandinstalled

2SDKSetup?Location:D:\configuration\ohpm

?Theohpmwillbeinstalled

3SummarySDKSetup

Location:D:\environments\SDK\hmSDK

SDKComponentstoDownload:

3.1.0(API9)

?Previewer75.00MB

?Toolchains32.3.637.65MB

OpenHarmony(API9)

?ArkTS54.02MB

?JS23.67MB

?Previewer3.2.12,5100.74MB

?Toolchains14.92MB

Previc

確認(rèn)完成后，單擊'Next',進(jìn)入下一步。

ASetupWizard

runupmxuiiui.urucuaxxa

,npminstall'executed

MovingtheSDK...

Installtaskfinished:JS3.2.12.5

Installtaskstarted:Toolchains3.2.12.5

Downloadinghttps://contentcenter-drcn.dbankcdn.cn/pub_l/DevEcoSpace_l_900_9/d3/v3/nEu0RqfC

UnzippingD:\environment3\SDK\hmSDK\.ten?>\toolchains\3.2.12.5\install\CG01ievOQaqSfAFmSuFjL

MovingtheSDK...

Installtaskfinished:Toolchains3.2.12.5

Installtaskstarted:Previewer3.2.3.6

Downloading

/download/data/pub_13/HWHOTA_hota_900_9/cd/v3/6-EgOKinCSpOpkqSEm-

UnzippingD:\environments\SDK\hmSDK\.ten5>\previewer\3.2.3.6\install\previewer-windows-x€4-3

MovingtheSDK...

Installtaskfinished:Previewer3.2.3.6

Installtaskstarted:Toolchains3.2.3.€

Downloading

/download/data/pub_13/HWHOTA_hota_900_9/cd/v3/6-Eg0I0nCSpOpkqSEm-

UnzippingD:\environments\SDK\hmSDK\.temp\toolchains\3.2.3.€\install\toolchains-windows-x€4

DisconnectingfromHDC

MovingtheSDK...

Installtaskfinished:Toolchains3.2.3.6

Configurationresult:

Basicsetupsuccessful

SDKsetupsuccessful

Previc

等待配置自動(dòng)下載完成，完成后，單擊'Finish，，IDE會(huì)進(jìn)入歡迎頁，我們也就

成功配置好了開發(fā)環(huán)境。

DevEcoStudio

CreateProject

OpenProject

GetfromVCS

ImportSample

ConfigureyHelp~

準(zhǔn)備工作完成后，接下來將進(jìn)入DevEcoStudio進(jìn)行工程創(chuàng)建和運(yùn)行。

［創(chuàng)建項(xiàng)目|

如果你是首次打開DevEcoStudio,那么首先會(huì)進(jìn)入歡迎頁。

△\VekarwI。DevEeo4db-OX

A

D?IIECOStudio

QeatePrqed

OpenProject

GelfromVCS

ImportSample、/］、

一

No

金吳小龍同學(xué)

Cw6gu，eyHelpp

在歡迎頁中單擊CreateProject,進(jìn)入項(xiàng)目創(chuàng)建頁面。

ACreateProject

ChooseYourAbilityTemplate

ApplicationTemplateMarket

AtomicService

EmptyAbility

Application:

Aninstallation-requiredapp.

Accesstheappbytouchingthe

appicononthehomescreen.

EmptyAbility

ThisFeatureAbilitytemplateimplementsthebasicHelh

選擇'Application',然后選擇'EmptyAbility',單擊'Next'進(jìn)入工程配置頁。

八CreateProject

ConfigureYourProject

Projectname:HelloWorlc^

Bundlename:com.example.helloworld

Savelocation:D:\learnProject\HelloWorldE

CompileSDK:3.1.0(API9),

Model:StageFA@

EnableSuperVisual:?

Language:ArkTS

CompatibleSDK:3.1.0(API9)

Devicetype:PhonevTablet

配置頁中，詳細(xì)信息如下：

Projectname是開發(fā)者可以自行設(shè)置的項(xiàng)目名稱，這里根據(jù)自己選擇修

改為自己項(xiàng)目名稱。

Bundlename是包名稱，默認(rèn)情況下應(yīng)用ID也會(huì)使用該名稱，應(yīng)用發(fā)

布時(shí)對(duì)應(yīng)的ID需要保持一致。

Savelocation為工程保存路徑，建議用戶自行設(shè)置相應(yīng)位置。

CompileSDK是編譯的API版本，這里默認(rèn)選擇API9。

Model選擇Stage模型，其他保持默認(rèn)即可。

然后單擊“Finish”完成工程創(chuàng)建，等待工程同步完成。

|認(rèn)識(shí)DevEcoStudio界面

進(jìn)入IDE后,我們首先了解一下基礎(chǔ)的界面。整個(gè)IDE的界面大致上可以分

為四個(gè)部分，分別是代碼編輯區(qū)、通知欄、工程目錄區(qū)以及預(yù)覽區(qū)。

A￡fleE&工odeSdxto*fluidJooHVCJItfndowHiiloWoAi-IndMdt

.ctfywmain從MdeieH

JK!??I^-晶—B衛(wèi)XF_1、代碼編輯區(qū)

*▼H*IIcWoHdxJ￡?try

?>Mi局(XM

>?&?St2t：n<.{

>.AppScop#耗lateMessage:string?iwtlo?orUJ'

*

DvUtfO<

6011n{

3、工程目錄區(qū)ColuanO{

>?/”迎,Textthia.Mssa^e)

v

出lc6?A、.footlel^ntFontWiQht.BoW)

}

.wi5h「；eov)

>?oh<xTE

J

禽.gMgnae

.helgntClW%')

偏34pro?75?c5

}

ftohp?do?ge0OR5

>?曲2^

國(guó)2。MOM13)5

&Z^orfUrii

DhviQOrw

fihM9orwiMC

f|tUxMpfopert^.

H,ohgdca^elockMcS

■IcEiKiy

Pre*rwertog

Q?_JLR<9??

?2、通知欄

5

EU

；■1

4

■

PControl?Mn?TOOC。二foOkwfllTomtcjr不內(nèi)。Mrfil.0QQCodeunte?O$?v<?Pre*WMTrtoQ

1.

代碼編輯區(qū)

2.

中間的是代碼編輯區(qū)，你可以在這里修改你的代碼，以及切換顯示的文件。通過

按住Ctrl加鼠標(biāo)滾輪，可以實(shí)現(xiàn)界面的放大與縮小。

3.

4.

通知欄

AiEtry

勵(lì)吳小龍同學(xué)

?Run三*000。ProMewSLog-DITermirwlX*，?*0CodeUnter

在編輯器底部有一行工具欄，主要介紹常用信息欄，其中Run是項(xiàng)目運(yùn)行時(shí)的

信息欄，Problems是當(dāng)前工程錯(cuò)誤與提醒信息欄，Terminal是命令行終端，

在這里執(zhí)行命令行操作，PreviewerLog是預(yù)覽器日志輸出欄，Log是模擬器和

真機(jī)運(yùn)行時(shí)的日志輸出欄。在后續(xù)使用中會(huì)陸續(xù)接觸。

G.

7.

工程目錄區(qū)

左側(cè)為工程目錄區(qū)，后續(xù)章節(jié)會(huì)詳細(xì)介紹。

HelloWorldentrysrcmainetspages翡lndex.ets

也三?

dSProject▼O4-

-

d▼isHelloWorldD:\Ha

■

>..hvigor

>*.idea

>?AppScope

▼“entry

>-3.preview

7■main

~■ets

>?entryability

v■pages

罵Index.ets

》■resources

宿module.json5

>■ohosTest

離.gitignore

翡build-profile.json5

禺hvigorfile.ts

瞅oh-package.json5

>?hvigor

>ohmodules

離.gitignore

跟build-profilejson5

rahvigorfile.ts

□hvigorw

自hvigorw.bat

輸loca.properties

oh-package.json5

跟oh-package-lockjson5除吳小龍同學(xué)

9.>lllllExternalLibraries

10.

預(yù)覽區(qū)

單擊右上角Previewer,可以預(yù)覽相應(yīng)的文件UI展示效果。

PreviewerTr。，*一0

??口??日言

entry:/pages/indexe

w

e

r

Q

Phone(medium)u

a

S

VOb…at

tr

F

A

Q

D

w

e

l

o

p

e

r

D

o

c

u

m

e

n

t

d

t

-

o

n

HelloWorld

電吳小龍同學(xué)

12.

預(yù)覽器提供了?些基本功能，包括旋轉(zhuǎn)屏幕，切換顯示設(shè)備及多設(shè)備預(yù)覽等。單

擊旋轉(zhuǎn)按鈕，可以切換豎屏和橫屏顯示的效果。

13.

也可以單擊如下列表按鈕，切換顯示的設(shè)備類型。彈出框內(nèi)會(huì)顯示Available

Profiles,即可用的設(shè)備類型。

14.

如單擊Foldable切換設(shè)備，也可以單擊旋轉(zhuǎn)按鈕切換Foldable的橫豎屏顯示

模式。

15.

打開Muti-piufilepreview開關(guān)，可以實(shí)現(xiàn)多個(gè)尺寸設(shè)備的實(shí)時(shí)預(yù)覽。

%吳小龍同學(xué)

16.

單擊預(yù)覽器右上角組件預(yù)覽按鈕，可以進(jìn)入組件預(yù)覽界面。

PreviewerTr。W。

entry:/pages/lndex(2e0

Phone(medium)

組件預(yù)覽

HelloWorld

%吳小龍同學(xué)

組件預(yù)覽模式可以預(yù)覽當(dāng)前組件對(duì)應(yīng)的代碼塊。

18.

點(diǎn)擊相應(yīng)組件，代碼文件中會(huì)框選對(duì)應(yīng)的組件代碼部分，下方則對(duì)應(yīng)當(dāng)前組件的

基本屬性。

dlEntryAb?ky.H息Index4HInspector

朧nt”entry:/pagcs/lndcx

(Cocponent

structA(

estateaessage::：mg**HelloWorld'Phone(medkjm)

bulldO{

RM()<

JolunnC){

Text(this.nessage)

.fontSkeCSS)

.font??i9ht(Fontweight.Bold

.heightClOW)

)

}

HelloWorld

19.

[運(yùn)行HelloWorld]

IDE提供了本地模擬器供開發(fā)者使用，我們首先需要下載安裝本地模擬器，然

后進(jìn)行運(yùn)行工程。

單擊頂部工具欄Tools>DeviceManager。

:qnToolsVCSWindowHelp

|DeviceManager

SDKManager

IDEScriptingConsole

GenerateJavaDoc...

XMLActions>

MarkdownConverter>

JShellConsole...

IPConnection嗆吳小龍同學(xué)

3.

選擇LocalEmulator,設(shè)置合適的LocalEmulatorLocation存儲(chǔ)地址，然后單

擊'+NewEmulator,o

YourDevices

LocalEmulatorRemoteCmutatorRemoteDevice

TypeTypeNameAR

▼SingleDevice

0Phone

OTV

0Wearable

Dr/environmetiti/efnulMor

4.

選擇Huawei.Phone手機(jī)模擬器，單擊'Next',進(jìn)入模擬器系統(tǒng)下載頁。

DevEcoVirtualDeviceConfiguration

SelectHardware

(?)NewHardwareFilterbyname

TypeName▲ResolutionSizeDensityActions

SoAllHuawei_P...1228x270...6.6"450dpi，

0TVHuaweiTV3840x216...65.0'480dpi

0PhoneHuaweiW...466x466px1.4'340dpi

0Wearable

Help

5.

選擇下載api9的系統(tǒng)鏡像，然后單擊'Next，，等待下載完成。

YourDevices

LocalEmulatorRC、.Dcv€c?MrtugDeviceConfiguration

Type?we

▼SingleDeviceSystemImage

AJl

Recommended

0Phone

HMICAPIVertion8U/ABI

OTV

0Wearablephotw.M/e624)4U11?M

Lourtiort0/enviror?me<mAe5t

6.

下載完成后，進(jìn)行創(chuàng)建相應(yīng)的手機(jī)模擬器，單擊Finish完成創(chuàng)建。

DevEcoVirtualDeviceConfiguration

VirtualDevice

NameNew_Device_from_Huawei_Phone

0HuaweiPhoneresolution:1228x2700px

-size:6.6"

version:18

0phone-x86-api9api:9

arch:x86

ShowAdvancedSettings

Help

7.

下載完成后，在LocalEmulator頁面中會(huì)出現(xiàn)創(chuàng)建的手機(jī)模擬器，點(diǎn)擊Actions

按鈕，就能夠啟動(dòng)模擬器。

YourDevices

LocalEmulatorRemoteEmutatorRemoteDevice

TypeTypeNameDensityAPI

▼SingleDevKe

0450dpi9xfl