《HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)》 課件 實(shí)操 項(xiàng)目1-任務(wù)1 搭建HarmonyOS應(yīng)用開(kāi)發(fā)環(huán)境

項(xiàng)目1走進(jìn)HarmonyOS應(yīng)用開(kāi)發(fā)任務(wù)1搭建HarmonyOS應(yīng)用開(kāi)發(fā)環(huán)境項(xiàng)目1走進(jìn)HarmonyOS應(yīng)用開(kāi)發(fā)任務(wù)描述本任務(wù)完成DevEcoStudio開(kāi)發(fā)工具的下載、安裝，并創(chuàng)建第一個(gè)HarmonyOSArkTS工程,預(yù)覽應(yīng)用并在模擬器上運(yùn)行應(yīng)用。任務(wù)實(shí)施010203060504下載并安裝DevEcoStudio設(shè)置npm和Node.js下載HarmonyOSSDK在模擬器上運(yùn)行HarmonyOS應(yīng)用實(shí)時(shí)預(yù)覽HarmonyOS應(yīng)用創(chuàng)建HarmonyOS工程下載并安裝DevEcoStudioDevEcoStudio可以在HarmonyOSDeveloper官網(wǎng)（）下載，根據(jù)自己的計(jì)算機(jī)系統(tǒng)類(lèi)型，下載對(duì)應(yīng)版本的DevEcoStudio。DevEcoStudio支持Windows和macOS系統(tǒng)。本書(shū)的任務(wù)使用的是Window環(huán)境開(kāi)發(fā)鴻蒙應(yīng)用，這里以Windows為例進(jìn)行安裝。為保證DevEcoStudio正常運(yùn)行，建議電腦配置滿(mǎn)足如下要求：操作系統(tǒng)：Windows1064位內(nèi)存：8GB及以上硬盤(pán)：100GB及以上分辨率：1280*800像素及以上下載并安裝DevEcoStudio選擇Windows操作系統(tǒng)選擇對(duì)應(yīng)的版本進(jìn)行下載。下載完成后，先解壓安裝包，雙擊解壓好的“deveco-studio-xxxx.exe”，進(jìn)入DevEcoStudio安裝向?qū)?。在如下界面選擇安裝路徑，默認(rèn)安裝于C:\ProgramFiles路徑下，也可以單擊Browse...指定其他安裝路徑，然后單擊Next，如下圖所示。下載并安裝DevEcoStudio勾選安裝選項(xiàng)，安裝完成后立即重啟計(jì)算機(jī)，如下圖所示。設(shè)置npm和Node.js重啟計(jì)算機(jī)后，打開(kāi)DevEcoStudio，在出現(xiàn)的歡迎界面中單擊“Agree”后，選擇不導(dǎo)入之前的配置，如下圖所示。歡迎頁(yè)面導(dǎo)入設(shè)置設(shè)置npm和Node.jsHarmonyOS基于ArkTS的開(kāi)發(fā)，需要JavaScript運(yùn)行環(huán)境，Node.js是一個(gè)JavaScript運(yùn)行環(huán)境，在DevEcoStudio安裝過(guò)程中需要安裝Node.js和npm包管理器，按提示進(jìn)行Node.js和npm的鏡像設(shè)置和的下載，如下圖所示。歡迎頁(yè)面導(dǎo)入設(shè)置下載HarmonyOSSDK經(jīng)過(guò)上述步驟后，DevEcoStudio會(huì)自動(dòng)檢查本地路徑下是否存在HarmonyOSSDK。如果不存在，會(huì)彈出SDK的安裝向?qū)?，選擇SDK的存放路徑（可自定義），確認(rèn)SDK的設(shè)置，如下圖所示。歡迎頁(yè)面導(dǎo)入設(shè)置下載HarmonyOSSDK在彈出來(lái)的接受許可協(xié)議頁(yè)面，選擇“Accept”，接受協(xié)議后，等待SDK下載完畢，如下圖所示。歡迎頁(yè)面導(dǎo)入設(shè)置下載HarmonyOSSDKSDK下載完畢后，就會(huì)進(jìn)入EevEcoStudio歡迎頁(yè)面，默認(rèn)歡迎頁(yè)面是黑底白字的，需要的時(shí)候可以設(shè)置為白底黑字，如下圖所示。至此，就安裝并配置好了EevEcoStudio開(kāi)發(fā)工具。創(chuàng)建HarmonyOS工程首次打開(kāi)DevEcoStudio，可以從歡迎頁(yè)單擊CreateProject，創(chuàng)建一個(gè)新工程。（在DevEcoStudio打開(kāi)工程的情況下，可以單擊File>new>CreateProject），根據(jù)工程創(chuàng)建向?qū)В瑔螕鬋reateProject，進(jìn)入項(xiàng)目創(chuàng)建頁(yè)面。DevEcoStudio為我們提供了HarmonyOS和OpenHarmony的創(chuàng)建模板，我們這里選擇創(chuàng)建HarmonyOS。在HarmonyOS頁(yè)簽，選擇“EmptyAbility”模板，然后單擊Next，如下圖所示。創(chuàng)建HarmonyOS工程填寫(xiě)工程相關(guān)信息，如下圖所示。（默認(rèn)情況下，新建工程的CompileSDK為9，在設(shè)備中運(yùn)行該工程時(shí)，請(qǐng)選擇API9及以上的設(shè)備才能運(yùn)行該工程。）創(chuàng)建HarmonyOS工程填寫(xiě)完項(xiàng)目創(chuàng)建信息，點(diǎn)擊“Finish”后,工具會(huì)自動(dòng)生成模板代碼和相關(guān)資源，接下來(lái)需要等待項(xiàng)目創(chuàng)建完成，當(dāng)?shù)撞坑覅^(qū)域狀態(tài)欄不再變化，就說(shuō)明項(xiàng)目構(gòu)建完成了。實(shí)時(shí)預(yù)覽HarmonyOS應(yīng)用此時(shí)項(xiàng)目默認(rèn)打開(kāi)Index.ets頁(yè)面，可以點(diǎn)擊右側(cè)的Previewer預(yù)覽器按鈕，查看應(yīng)用的運(yùn)行效果，如下圖所示。實(shí)時(shí)預(yù)覽HarmonyOS應(yīng)用DevEcoStuidio可以在頁(yè)面開(kāi)發(fā)過(guò)程中同步更新預(yù)覽效果，通過(guò)預(yù)覽器可以實(shí)時(shí)查看、編輯組件的屬性，方便開(kāi)發(fā)者隨時(shí)調(diào)整代碼，并實(shí)時(shí)查看應(yīng)用/服務(wù)的運(yùn)行效果。打開(kāi)上述構(gòu)建完畢的項(xiàng)目下的pages/Index.ets頁(yè)面，單擊預(yù)覽器，即可呈現(xiàn)實(shí)時(shí)界面的預(yù)覽效果；在預(yù)覽器選項(xiàng)卡，點(diǎn)擊多設(shè)備預(yù)覽按鈕，針對(duì)性的查看在某類(lèi)型設(shè)備上的布局效果，如下圖所示。在模擬器上運(yùn)行HarmonyOS應(yīng)用注冊(cè)華為賬號(hào)后，在DevEcoStudio中選擇“Tools>DeviceManager”菜單項(xiàng)，如果用戶(hù)還未登錄，需要按提示進(jìn)行授權(quán)登錄華為帳號(hào)，如下圖所示。在模擬器上運(yùn)行HarmonyOS應(yīng)用成功授權(quán)后，回到DevEcoStudio中，此時(shí)RemoteEmulator（遠(yuǎn)程模擬器）選項(xiàng)卡下面就列出了不同設(shè)備類(lèi)型的遠(yuǎn)程模擬器，選擇API版本為9的P50遠(yuǎn)程模擬器，單擊右側(cè)action下的三角符號(hào)即可啟動(dòng)遠(yuǎn)程模擬器，如所示。HarmonyOS模擬器啟動(dòng)好后，在設(shè)備選擇列表中選擇應(yīng)用運(yùn)行的目標(biāo)設(shè)備，然后單擊運(yùn)行按鈕，等待自動(dòng)打包和上傳完畢，App應(yīng)用就運(yùn)行到模擬器中，如下圖所示。任