前言

俗話說，工欲善其事必先利其器。鴻蒙第一課，我們先從簡單的Hello World運(yùn)行說起。要先運(yùn)行Hello World，那么我們必須搭建HarmonyOS的開發(fā)環(huán)境。

下載與安裝DevEco Studio

在HarmonyOS應(yīng)用開發(fā)學(xué)習(xí)之前，需要進(jìn)行一些準(zhǔn)備工作，首先需要完成開發(fā)工具DevEco Studio的下載與安裝以及環(huán)境配置。DevEco Studio是華為為HarmonyOS開發(fā)專門打造的一套開發(fā)工具，類似我們常用的Idea開發(fā)工具。具體使用參考華為開發(fā)者有關(guān)DevEco Studio的使用說明。

進(jìn)入DevEco Studio下載官網(wǎng)，單擊“立即下載”進(jìn)入下載頁面。進(jìn)入下載頁面后，展示如下：

我們需要更具自己電腦下載對(duì)應(yīng)的平臺(tái)版本，比如Mac(ARM),Mac(X86),Windows等，下面我以Windows為例子：

我們點(diǎn)擊上圖右側(cè)的下載按鈕，靜待下載完畢，下載完畢，直接雙擊下載的“deveco-studio-xxxx.exe”，進(jìn)入DevEco Studio安裝向?qū)?，在如下界面選擇安裝路徑，默認(rèn)安裝于“C:\Program Files”下，也可以單擊“Browse...”指定其他安裝路徑，然后單擊“Next”。

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

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

配置環(huán)境

下在并安裝好DevEco Studio開發(fā)工具后，我們需要對(duì)DevEco Studio進(jìn)行一些開發(fā)常用的必備以及輔助配置。

雙擊已安裝的DevEco Studio快捷方式進(jìn)入配置頁面，IDE會(huì)進(jìn)入配置向?qū)?，選擇Agree，同意相應(yīng)的條款，進(jìn)入配置頁。

進(jìn)入DevEco Studio配置頁面，首先需要進(jìn)行基礎(chǔ)配置，包括Node.js與Ohpm的安裝路徑設(shè)置，選擇從華為鏡像下載至合適的路徑。

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

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

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

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

等待配置自動(dòng)下載完成，完成后，單擊'Finish'，IDE會(huì)進(jìn)入歡迎頁，我們也就成功配置好了開發(fā)環(huán)境。

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

創(chuàng)建Hello World項(xiàng)目

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

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

選擇‘Application’，然后選擇‘Empty Ability’，單擊‘Next’進(jìn)入工程配置頁。

關(guān)于配置項(xiàng)configure，做一些特殊說明。詳細(xì)信息如下：

• Project name是開發(fā)者可以自行設(shè)置的項(xiàng)目名稱，這里根據(jù)自己選擇修改為自己項(xiàng)目名稱。
• Bundle name是包名稱，默認(rèn)情況下應(yīng)用ID也會(huì)使用該名稱，應(yīng)用發(fā)布時(shí)對(duì)應(yīng)的ID需要保持一致。
• Save location為工程保存路徑，建議用戶自行設(shè)置相應(yīng)位置。
• Compile SDK是編譯的API版本，這里默認(rèn)選擇API9。
• Model選擇Stage模型，其他保持默認(rèn)即可。

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

認(rèn)識(shí)DevEco Studio界面

新建完Hello World項(xiàng)目，我們先來簡單認(rèn)識(shí)一下DevEco Studio的界面，方便后續(xù)快速高效掌握開發(fā)相關(guān)的輔助工具。

進(jìn)入IDE后，我們首先了解一下基礎(chǔ)的界面。整個(gè)IDE的界面大致上可以分為四個(gè)部分，分別是代碼編輯區(qū)、通知欄、工程目錄區(qū)以及預(yù)覽區(qū)。如下圖表示：

下面簡單對(duì)這四個(gè)區(qū)域做一個(gè)簡單說明介紹

1.代碼編輯區(qū)

中間的是代碼編輯區(qū)，你可以在這里修改你的代碼，以及切換顯示的文件。通過按住Ctrl加鼠標(biāo)滾輪，可以實(shí)現(xiàn)界面的放大與縮小。

2.通知欄

在編輯器底部有一行工具欄，主要介紹常用信息欄，其中Run是項(xiàng)目運(yùn)行時(shí)的信息欄，Problems是當(dāng)前工程錯(cuò)誤與提醒信息欄，Terminal是命令行終端，在這里執(zhí)行命令行操作，PreviewerLog是預(yù)覽器日志輸出欄，Log是模擬器和真機(jī)運(yùn)行時(shí)的日志輸出欄。在后續(xù)使用中會(huì)陸續(xù)接觸。

3.工程目錄區(qū)

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

4.預(yù)覽區(qū)

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

預(yù)覽器提供了一些基本功能，包括旋轉(zhuǎn)屏幕，切換顯示設(shè)備及多設(shè)備預(yù)覽等。單擊旋轉(zhuǎn)按鈕，可以切換豎屏和橫屏顯示的效果。

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

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

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

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

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

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

這里小結(jié)一下，通過上面切換設(shè)備預(yù)覽來實(shí)時(shí)查看顯示效果，也充分體現(xiàn)了HarmonyOS強(qiáng)大的分布式能力，一端開發(fā)，多端部署，實(shí)時(shí)適配多種終端，比如phone，手表，iPad，TV等，是不是非常方便，一套代碼，可以很清楚的看清在各個(gè)設(shè)備的展示效果。

運(yùn)行Hello World工程

DE提供了本地模擬器供開發(fā)者使用，我們首先需要下載安裝本地模擬器，然后進(jìn)行運(yùn)行工程。

1.單擊頂部工具欄Tools>Device Manager。

2.選擇Local Emulator，設(shè)置合適的Local Emulator Location存儲(chǔ)地址，然后單擊’+New Emulator’。

選擇Huawei_Phone手機(jī)模擬器，單擊'Next'，進(jìn)入模擬器系統(tǒng)下載頁。選擇下載api9的系統(tǒng)鏡像，然后單擊'Next’，等待下載完成。

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

下載完成后，在Local Emulator頁面中會(huì)出現(xiàn)創(chuàng)建的手機(jī)模擬器，點(diǎn)擊Actions按鈕，就能夠啟動(dòng)模擬器。

模擬器啟動(dòng)后，點(diǎn)擊上方啟動(dòng)按鈕，將Hello World工程運(yùn)行到模擬器上。

IDE構(gòu)建完成后，即可在模擬器上看到運(yùn)行效果，我們也就完成了Hello World工程在模擬器上的運(yùn)行。

了解基本工程目錄

我們先從工程目錄結(jié)構(gòu)看起，了解每一層結(jié)構(gòu)的具體作用，個(gè)人認(rèn)為，對(duì)比android的工程目錄，相對(duì)來說是更復(fù)炸一些的。

1.認(rèn)識(shí)工程級(jí)目錄

工程的目錄結(jié)構(gòu)如下。

模塊詳細(xì)說明如下：

• AppScope中存放應(yīng)用全局所需要的資源文件。
• entry是應(yīng)用的主模塊，存放HarmonyOS應(yīng)用的代碼、資源等。
• oh_modules是工程的依賴包，存放工程依賴的源文件。
• build-profile.json5是工程級(jí)配置信息，包括簽名、產(chǎn)品配置等。
• hvigorfile.ts是工程級(jí)編譯構(gòu)建任務(wù)腳本，hvigor是基于任務(wù)管理機(jī)制實(shí)現(xiàn)的一款全新的自動(dòng)化構(gòu)建工具，主要提供任務(wù)注冊(cè)編排，工程模型管理、配置管理等核心能力。
• oh-package.json5是工程級(jí)依賴配置文件，用于記錄引入包的配置信息。

在AppScope，其中有resources文件夾和配置文件app.json5。AppScope>resources>base中包含element和media兩個(gè)文件夾，

• 其中element文件夾主要存放公共的字符串、布局文件等資源。
• media存放全局公共的多媒體資源文件。

模塊級(jí)目錄

entry>src目錄中主要包含總的main文件夾，單元測(cè)試目錄ohosTest，以及模塊級(jí)的配置文件。

• main文件夾中，ets文件夾用于存放ets代碼，resources文件存放模塊內(nèi)的多媒體及布局文件等，module.json5文件為模塊的配置文件。
• ohosTest是單元測(cè)試目錄。
• build-profile.json5是模塊級(jí)配置信息，包括編譯構(gòu)建配置項(xiàng)。
• hvigorfile.ts文件是模塊級(jí)構(gòu)建腳本。
• oh-package.json5是模塊級(jí)依賴配置信息文件。

進(jìn)入src>main>ets目錄中，其分為entryability、pages兩個(gè)文件夾。

• entryability存放ability文件，用于當(dāng)前ability應(yīng)用邏輯和生命周期管理。
• pages存放UI界面相關(guān)代碼文件，初始會(huì)生成一個(gè)Index頁面。

resources目錄下存放模塊公共的多媒體、字符串及布局文件等資源，分別存放在element、media文件夾中。

2.認(rèn)識(shí)app.json5

位于AppScope>app.json5，app.json5是應(yīng)用的全局的配置文件，用于存放應(yīng)用公共的配置信息。

關(guān)于app.json5文件，其配置信息說明如下：

• bundleName是包名。
• vendor是應(yīng)用程序供應(yīng)商。
• versionCode是用于區(qū)分應(yīng)用版本。
• versionName是版本號(hào)。
• icon對(duì)應(yīng)于應(yīng)用的顯示圖標(biāo)。
• label是應(yīng)用名。

3.認(rèn)識(shí)module.json5

module.json5文件位于entry>src>main>module.json5。是模塊的配置文件，包含當(dāng)前模塊的配置信息。

其中module對(duì)應(yīng)的是模塊的配置信息，一個(gè)模塊對(duì)應(yīng)一個(gè)打包后的hap包，hap包全稱是HarmonyOS Ability Package，其中包含了ability、第三方庫、資源和配置文件。其具體屬性及其描述如下所示。

對(duì)于abilities中每一個(gè)ability的屬性項(xiàng)，其描述信息如下所示：

4.認(rèn)識(shí)main_pages.json文件

src/main/resources/base/profile/main_pages.json文件保存的是頁面page的路徑配置信息，所有需要進(jìn)行路由跳轉(zhuǎn)的page頁面都要在這里進(jìn)行配置。

文章來源地址http://www.zghlxwxcb.cn/news/detail-719855.html

學(xué)習(xí)參考鏈接

• DevEco Studio下載與安裝：DevEco Studio下載與安裝
• 配置開發(fā)環(huán)境：配置開發(fā)環(huán)境

總結(jié)

1. 下載，安裝，配置DevEco Studio開發(fā)工具是HarmonyOS開發(fā)的一步?？梢院芎玫膸椭覀兒竺娴拈_發(fā)學(xué)習(xí)以及工作
2. 熟悉并掌握DevEco Studio開發(fā)工具界面，有助于快速掌握DevEco Studio這一款開發(fā)工具，有助于后期coding。
3. 學(xué)習(xí)并掌握配置HarmonyOS模擬器，方便實(shí)時(shí)開發(fā)預(yù)覽，以及多終端，多設(shè)備的展示效果
4. 認(rèn)識(shí)HarmonyOS項(xiàng)目的目錄結(jié)構(gòu)，以及每個(gè)目錄結(jié)構(gòu)的功能以及作用
5. 認(rèn)識(shí)了 工程目錄下app.json5文件，module.json5文件，main_pages.json文件的作用，以及各項(xiàng)配置參數(shù)的使用說明。

到了這里，關(guān)于HarmonyOS第一課運(yùn)行Hello World的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！