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

鴻蒙應(yīng)用開發(fā)初體驗(yàn)HelloWorld9月25日，華為常務(wù)董事、終端BGCEO、智能汽車解決方案BU董事長(zhǎng)余承東華為秋季全場(chǎng)景新品發(fā)布會(huì)上介紹了鴻蒙系統(tǒng)的最新進(jìn)展：HarmonyOS4發(fā)布后，短短一個(gè)多月升級(jí)用戶已經(jīng)超過6000萬(wàn)，成為史上升級(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)入DevEcoStudio下載官網(wǎng)，單擊“立即下載”進(jìn)入下載頁(yè)面。DevEcoStudio提供了Windows版本和Mac版本選擇，可以根據(jù)操作系統(tǒng)選擇對(duì)應(yīng)的版本進(jìn)行下載。這里以Windows為例進(jìn)行安裝。下載完成后，雙擊下載的“deveco-studio-xxxx.exe”，進(jìn)入DevEcoStudio安裝向?qū)?，在如下界面選擇安裝路徑，默認(rèn)安裝于“C:\ProgramFiles”下，也可以單擊“Browse...”指定其他安裝路徑，然后單擊“Next”。如下安裝選項(xiàng)界面勾選DevEcoStudio后，單擊“Next”，直至安裝完成。安裝完成后，單擊“Finish”完成安裝。配置環(huán)境雙擊已安裝的DevEcoStudio快捷方式進(jìn)入配置頁(yè)面，IDE會(huì)進(jìn)入配置向?qū)?，選擇Agree，同意相應(yīng)的條款，進(jìn)入配置頁(yè)。進(jìn)入DevEcoStudio配置頁(yè)面，首先需要進(jìn)行基礎(chǔ)配置，包括Node.js與Ohpm的安裝路徑設(shè)置，選擇從華為鏡像下載至合適的路徑。單擊'Next'進(jìn)入SDK配置，設(shè)置為合適的路徑，點(diǎn)擊'Next'后會(huì)顯示'SDKLicenseAgreement'，閱讀相關(guān)協(xié)議后，勾選'Accept'。單擊‘Next’進(jìn)入配置預(yù)覽頁(yè)，在這里進(jìn)行配置項(xiàng)的確認(rèn)。確認(rèn)完成后，單擊'Next'，進(jìn)入下一步。等待配置自動(dòng)下載完成，完成后，單擊'Finish'，IDE會(huì)進(jìn)入歡迎頁(yè)，我們也就成功配置好了開發(fā)環(huán)境。準(zhǔn)備工作完成后，接下來將進(jìn)入DevEcoStudio進(jìn)行工程創(chuàng)建和運(yùn)行。創(chuàng)建項(xiàng)目如果你是首次打開DevEcoStudio，那么首先會(huì)進(jìn)入歡迎頁(yè)。在歡迎頁(yè)中單擊CreateProject，進(jìn)入項(xiàng)目創(chuàng)建頁(yè)面。選擇‘Application’，然后選擇‘EmptyAbility’，單擊‘Next’進(jìn)入工程配置頁(yè)。配置頁(yè)中，詳細(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ū)。代碼編輯區(qū)中間的是代碼編輯區(qū)，你可以在這里修改你的代碼，以及切換顯示的文件。通過按住Ctrl加鼠標(biāo)滾輪，可以實(shí)現(xiàn)界面的放大與縮小。通知欄在編輯器底部有一行工具欄，主要介紹常用信息欄，其中Run是項(xiàng)目運(yùn)行時(shí)的信息欄，Problems是當(dāng)前工程錯(cuò)誤與提醒信息欄，Terminal是命令行終端，在這里執(zhí)行命令行操作，PreviewerLog是預(yù)覽器日志輸出欄，Log是模擬器和真機(jī)運(yùn)行時(shí)的日志輸出欄。在后續(xù)使用中會(huì)陸續(xù)接觸。工程目錄區(qū)左側(cè)為工程目錄區(qū)，后續(xù)章節(jié)會(huì)詳細(xì)介紹。預(yù)覽區(qū)單擊右上角Previewer，可以預(yù)覽相應(yīng)的文件UI展示效果。預(yù)覽器提供了一些基本功能，包括旋轉(zhuǎn)屏幕，切換顯示設(shè)備及多設(shè)備預(yù)覽等。單擊旋轉(zhuǎn)按鈕，可以切換豎屏和橫屏顯示的效果。也可以單擊如下列表按鈕，切換顯示的設(shè)備類型。彈出框內(nèi)會(huì)顯示AvailableProfiles，即可用的設(shè)備類型。如單擊Foldable切換設(shè)備，也可以單擊旋轉(zhuǎn)按鈕切換Foldable的橫豎屏顯示模式。打開Muti-profilepreview開關(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)前組件的基本屬性。運(yùn)行HelloWorldIDE提供了本地模擬器供開發(fā)者使用，我們首先需要下載安裝本地模擬器，然后進(jìn)行運(yùn)行工程。單擊頂部工具欄Tools>DeviceManager。選擇LocalEmulator，設(shè)置合適的LocalEmulatorLocation存儲(chǔ)地址，然后單擊’+NewEmulator’。選擇Huawei_Phone手機(jī)模擬器，單擊'Next'，進(jìn)入模擬器系統(tǒng)下載頁(yè)。選擇下載api9的系統(tǒng)鏡像，然后單擊'Next’，等待下載完成。下載完成后，進(jìn)行創(chuàng)建相應(yīng)的手機(jī)模擬器，單擊Finish完成創(chuàng)建。下載完成后，在LocalEmulator頁(yè)面中會(huì)出現(xiàn)創(chuàng)建的手機(jī)模擬器，點(diǎn)擊Actions按鈕，就能夠啟動(dòng)模擬器。模擬器啟動(dòng)后，點(diǎn)擊上方啟動(dòng)按鈕，將HelloWorld工程運(yùn)行到模擬器上。IDE構(gòu)建完成后，即可在模擬器上看到運(yùn)行效果，我們也就完成了HelloWorld工程在模擬器上的運(yùn)行。了解基本工程目錄工程級(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頁(yè)面。resources目錄下存放模塊公共的多媒體、字符串及布局文件等資源，分別存放在element、media文件夾中。app.json5AppScope>app.json5是應(yīng)用的全局的配置文件，用于存放應(yīng)用公共的配置信息。其中配置信息如下：bundleName是包名。vendor是應(yīng)用程序供應(yīng)商。versionCode是用于區(qū)分應(yīng)用版本。versionName是版本號(hào)。icon對(duì)應(yīng)于應(yīng)用的顯示圖標(biāo)。label是應(yīng)用名。module.json5entry>src>main>module.json5是模塊的配置文件，包含當(dāng)前模塊的配置信息。其中module對(duì)應(yīng)的是模塊的配置信息，一個(gè)模塊對(duì)應(yīng)一個(gè)打包后的hap包，hap包全稱是HarmonyOSAbilityPackage，其中包含了ability、第三方庫(kù)、資源和配置文件。其具體屬性及其描述可以參照下表1。屬性描述name該標(biāo)簽標(biāo)識(shí)當(dāng)前module的名字，module打包成hap后，表示hap的名稱，標(biāo)簽值采用字符串表示（最大長(zhǎng)度31個(gè)字節(jié)），該名稱在整個(gè)應(yīng)用要唯一。type表示模塊的類型，類型有三種，分別是entry、feature和har。srcEntry當(dāng)前模塊的入口文件路徑。description當(dāng)前模塊的描述信息。mainElement該標(biāo)簽標(biāo)識(shí)hap的入口ability名稱或者extension名稱。只有配置為mainElement的ability或者extension才允許在服務(wù)中心露出。deviceTypes該標(biāo)簽標(biāo)識(shí)hap可以運(yùn)行在哪類設(shè)備上，標(biāo)簽值采用字符串?dāng)?shù)組的表示。deliveryWithInstall標(biāo)識(shí)當(dāng)前Module是否在用戶主動(dòng)安裝的時(shí)候安裝，表示該Module對(duì)應(yīng)的HAP是否跟隨應(yīng)用一起安裝。-true：主動(dòng)安裝時(shí)安裝。-false：主動(dòng)安裝時(shí)不安裝。installationFree標(biāo)識(shí)當(dāng)前Module是否支持免安裝特性。-true：表示支持免安裝特性，且符合免安裝約束。-false：表示不支持免安裝特性。pages對(duì)應(yīng)的是main_pages.json文件，用于配置ability中用到的page信息。abilities是一個(gè)數(shù)組，存放當(dāng)前模塊中所有的ability元能力的配置信息，其中可以有多個(gè)ability。對(duì)于abilities中每一個(gè)ability的屬性項(xiàng)，其描述信息如下表2。屬性描述name該標(biāo)簽標(biāo)識(shí)當(dāng)前ability的邏輯名，該名稱在整個(gè)應(yīng)用要唯一，標(biāo)簽值采用字符串表示（最大長(zhǎng)度127個(gè)字節(jié)）。srcEntryability的入口代碼路徑。descriptionability的描述信息。iconability的圖標(biāo)。該標(biāo)簽標(biāo)識(shí)ability圖標(biāo)，標(biāo)簽值為資源文件的索引。該標(biāo)簽可缺省，缺省值為空。如果ability被配置為MainElement，該標(biāo)簽必須配置。labelability的標(biāo)簽名。startWindowIcon啟動(dòng)頁(yè)面的圖標(biāo)。startWindowBackground啟動(dòng)頁(yè)面的背景色。visibleability是否可以被其他應(yīng)用程序調(diào)用，true表示可以被其它應(yīng)用調(diào)用，false表示不可以被其它應(yīng)用調(diào)用。skills標(biāo)識(shí)能夠接收的意圖的action值的集合，取值通常為系統(tǒng)預(yù)定義的action值，也允許自定義。entities標(biāo)識(shí)能夠接收的Want的Action值的集合，取值通常為系統(tǒng)預(yù)定義的action值，也允許自定義。actions標(biāo)識(shí)能夠接收Want的Entity值的集合。main_pages.jsonsrc/main/resources/