鴻蒙應(yīng)用開發(fā)項目教程項目1搭建鴻蒙應(yīng)用開發(fā)環(huán)境云林科技是一家成立于2003年的公司，已經(jīng)開發(fā)了官方網(wǎng)站對公司業(yè)務(wù)進行宣傳和服務(wù)，現(xiàn)計劃開發(fā)移動應(yīng)用來進一步拓展公司業(yè)務(wù)。通過對比目前流行的移動應(yīng)用開發(fā)語言，并結(jié)合公司實際情況，公司決定基于鴻蒙系統(tǒng)來開發(fā)相關(guān)移動應(yīng)用。在鴻蒙系統(tǒng)（HarmonyOS）上進行應(yīng)用程序的設(shè)計、開發(fā)和部署，也稱為鴻蒙應(yīng)用開發(fā)。要進行鴻蒙應(yīng)用開發(fā)，應(yīng)先搭建鴻蒙應(yīng)用開發(fā)環(huán)境，如圖1-1所示。項目導(dǎo)入圖1-1

PHP運行環(huán)境測試頁圖1-1鴻蒙應(yīng)用開發(fā)環(huán)境【項目分析】完成本項目需要了解鴻蒙系統(tǒng)的發(fā)展歷程，掌握鴻蒙系統(tǒng)的技術(shù)架構(gòu)、鴻蒙系統(tǒng)的技術(shù)特征和鴻蒙應(yīng)用開發(fā)套件等知識。接下來先介紹鴻蒙系統(tǒng)的基礎(chǔ)知識，再介紹搭建鴻蒙應(yīng)用開發(fā)環(huán)境的操作步驟，為開發(fā)相關(guān)應(yīng)用做好準(zhǔn)備?！局R目標(biāo)】熟悉鴻蒙系統(tǒng)的技術(shù)特征。

掌握鴻蒙應(yīng)用開發(fā)套件?！灸芰δ繕?biāo)】能夠搭建鴻蒙應(yīng)用開發(fā)環(huán)境。

能夠編寫簡單的鴻蒙應(yīng)用程序?！舅仞B(yǎng)目標(biāo)】具有助力民族復(fù)興的家國情懷。1.1鴻蒙系統(tǒng)簡介

鴻蒙系統(tǒng)是華為為解決物聯(lián)網(wǎng)設(shè)備的互聯(lián)互通問題而開發(fā)的一款操作系統(tǒng)，具有多設(shè)備互聯(lián)、分布式架構(gòu)、高效性能等優(yōu)勢，它面向全場景，將手機、計算機、電視、工業(yè)自動化控制系統(tǒng)、無人駕駛系統(tǒng)、車機設(shè)備、智能穿戴設(shè)備等統(tǒng)一于一個操作系統(tǒng)之下，并且面向下一代技術(shù)。

華為從2012年開始規(guī)劃自有操作系統(tǒng)，并在芬蘭赫爾辛基設(shè)立智能手機研發(fā)中心，招募相關(guān)技術(shù)人才。

2019年8月9日，華為在開發(fā)者大會上發(fā)布了HarmonyOS1.0，其第一個落地產(chǎn)品是智慧屏，尚未搭載到手機系統(tǒng)上。

2020年發(fā)布的HarmonyOS2.0正式覆蓋手機等移動終端，標(biāo)志著該系統(tǒng)正式進入市場。1.1.1鴻蒙系統(tǒng)發(fā)展歷程

2022年7月，HarmonyOS3.0正式發(fā)布，萬物互聯(lián)成為其新標(biāo)簽，同年11月，華為首次提出了“鴻蒙世界”的概念。

2023年8月，華為正式發(fā)布HarmonyOS4.0，華為原生鴻蒙系統(tǒng)（HarmonyOSNEXT）蓄勢待發(fā)，鴻蒙原生應(yīng)用全面啟動。

2024年10月22日，華為正式發(fā)布HarmonyOSNEXT。1.1.2鴻蒙系統(tǒng)技術(shù)架構(gòu)

鴻蒙系統(tǒng)的技術(shù)架構(gòu)可分為內(nèi)核層、系統(tǒng)服務(wù)層、框架層和應(yīng)用層。1．內(nèi)核層

鴻蒙系統(tǒng)把Linux內(nèi)核、輕量級操作系統(tǒng)（LiteOS）內(nèi)核整合為一個微內(nèi)核，創(chuàng)造出一個超級虛擬終端互聯(lián)的世界，將人、設(shè)備、場景有機聯(lián)系在一起。同時，由于微內(nèi)核的代碼非常精簡，其受攻擊的概率大幅降低。微內(nèi)核提供基礎(chǔ)的內(nèi)核功能，包括進程/線程管理、內(nèi)存管理、文件系統(tǒng)、網(wǎng)絡(luò)管理和外設(shè)管理等。2．系統(tǒng)服務(wù)層

系統(tǒng)服務(wù)層是鴻蒙系統(tǒng)的核心能力集合，通過框架層對應(yīng)用程序提供服務(wù)。系統(tǒng)服務(wù)層包括基礎(chǔ)軟件服務(wù)子系統(tǒng)集和硬件服務(wù)子系統(tǒng)集?；A(chǔ)軟件服務(wù)子系統(tǒng)集提供公共的、通用的軟件服務(wù)，硬件服務(wù)子系統(tǒng)集則提供硬件服務(wù)，包括位置服務(wù)、生物特征識別、穿戴專有硬件服務(wù)、物聯(lián)網(wǎng)專有硬件服務(wù)等。3．框架層

框架層為應(yīng)用開發(fā)提供了C、C++、JavaScript（簡稱JS）等多語言的用戶程序框架和能力（Ability）框架、兼容JS的方舟用戶界面（ArkUserInterface，ArkUI）框架，以及多語言軟硬件服務(wù)框架應(yīng)用程序接口（ApplicationProgramInterface，API）。4．應(yīng)用層

鴻蒙系統(tǒng)實現(xiàn)了模塊化耦合，對應(yīng)不同設(shè)備可彈性部署，可用于大屏、手機、個人計算機（PersonalComputer，PC）、汽車等不同的設(shè)備上。

總之，鴻蒙系統(tǒng)的技術(shù)架構(gòu)是全面而復(fù)雜的，憑借其獨特的設(shè)計，鴻蒙系統(tǒng)實現(xiàn)了各種設(shè)備間的連接與數(shù)據(jù)的共享交換，為用戶提供了更加便捷的智慧化服務(wù)體驗。1.2鴻蒙系統(tǒng)技術(shù)特征

鴻蒙系統(tǒng)具有一系列顯著的技術(shù)特征，包括一次開發(fā)，多端部署；可分可合，自由流轉(zhuǎn)；統(tǒng)一生態(tài)，原生智能。這些特征使其在萬物互聯(lián)的全場景智慧時代中脫穎而出。1.2.1一次開發(fā)，多端部署

“一次開發(fā)，多端部署”指的是一套工程，一次開發(fā)上架，多端按需部署，其目的是支撐開發(fā)者高效地開發(fā)多種終端設(shè)備上的應(yīng)用，如圖1-2所示。圖1-2一次開發(fā)，多端部署

為了實現(xiàn)這一目標(biāo)，鴻蒙系統(tǒng)提供了幾個核心能力，包括多端開發(fā)環(huán)境、多端開發(fā)能力以及多端分發(fā)機制。1．多端開發(fā)環(huán)境

鴻蒙集成開發(fā)環(huán)境DevEcoStudio是面向全場景多設(shè)備的一站式開發(fā)平臺，支持多端雙向預(yù)覽、分布式調(diào)試、分布式調(diào)優(yōu)、超級終端模擬、低代碼可視化開發(fā)等功能，可以幫助開發(fā)者降低開發(fā)成本、提高開發(fā)效率與質(zhì)量。

DevEcoStudio提供的核心能力如圖1-3所示。圖1-3DevEcoStudio提供的核心能力2．多端開發(fā)能力

應(yīng)用若想在多個設(shè)備上運行，需要適配不同的屏幕尺寸和分辨率、不同的交互方式（如觸摸和鍵盤等）、不同的硬件能力（如內(nèi)存差異和器件差異等），開發(fā)成本較高。因此，多端開發(fā)能力的核心目標(biāo)是降低多設(shè)備應(yīng)用的開發(fā)成本。為了實現(xiàn)該目標(biāo)，鴻蒙系統(tǒng)提供了幾個核心能力，包括多端用戶界面（UserInterface，UI）適配、交互事件歸一以及設(shè)備能力抽象，幫助開發(fā)者降低開發(fā)與維護的成本，提高代碼復(fù)用率。3．多端分發(fā)機制

如果需要開發(fā)能在多個設(shè)備上運行的應(yīng)用，一般會針對不同類型的設(shè)備進行開發(fā)并獨立上架，開發(fā)和維護的成本較高。為了解決這個問題，鴻蒙系統(tǒng)提供了“一次開發(fā)，多端部署”的能力，開發(fā)者開發(fā)多設(shè)備應(yīng)用時只需要構(gòu)建一套工程，一次打包出多個鴻蒙系統(tǒng)能力包（HarmonyOSAbilityPackage，HAP）并統(tǒng)一上架，即可根據(jù)設(shè)備類型按需進行分發(fā)。

除了可以開發(fā)傳統(tǒng)的應(yīng)用，開發(fā)者還可以開發(fā)元服務(wù)。元服務(wù)是一種面向未來的服務(wù)提供方式，有獨立入口、免安裝、可為用戶提供一個或多個便捷服務(wù)的應(yīng)用程序形態(tài)。鴻蒙系統(tǒng)為元服務(wù)提供了更多的分發(fā)入口，方便用戶獲取，同時增加了元服務(wù)露出的機會。1.2.2可分可合，自由流轉(zhuǎn)

元服務(wù)是鴻蒙系統(tǒng)提供的一種全新的應(yīng)用形態(tài)，具有獨立入口，用戶可通過點擊、碰一碰、掃一掃等方式直接觸發(fā)，無須顯式安裝，由程序框架后臺靜默安裝后即可使用，可為用戶提供便捷服務(wù)。

傳統(tǒng)移動生態(tài)下，開發(fā)者通常需要開發(fā)一個原生應(yīng)用版本，如果提供小程序給用戶，往往需要開發(fā)若干個獨立的小程序。原生鴻蒙系統(tǒng)支持元服務(wù)開發(fā)，開發(fā)者無須維護多套版本，先通過業(yè)務(wù)解耦將應(yīng)用分解為若干元服務(wù)獨立開發(fā)，然后再根據(jù)場景按需組合成復(fù)雜應(yīng)用即可。

元服務(wù)基于鴻蒙系統(tǒng)API開發(fā)，支持運行在“1+8+N

”設(shè)備上，供用戶在合適的場景、合適的設(shè)備上便捷使用。

元服務(wù)是支撐“可分可合，自由流轉(zhuǎn)”的輕量化程序?qū)嶓w，使開發(fā)者的服務(wù)可以更快觸達用戶。1．可分可合

在開發(fā)態(tài)，開發(fā)者通過業(yè)務(wù)解耦，把不同的業(yè)務(wù)拆分為多個模塊；在部署態(tài)，開發(fā)者可以將一個或多個模塊自由組合，打包成不同的應(yīng)用程序包（ApplicationPackage，AppPack）并統(tǒng)一上架；在分發(fā)運行態(tài)，每個HAP都可以單獨分發(fā)以滿足用戶單一的使用場景，也可以將多個HAP組合分發(fā)以滿足用戶更加復(fù)雜的使用場景。2．自由流轉(zhuǎn)

傳統(tǒng)應(yīng)用只能在單個設(shè)備上運行，當(dāng)用戶有多個設(shè)備，且要完成多個任務(wù)時，則需要在多個設(shè)備間來回切換。因此，應(yīng)用具備在設(shè)備之間流轉(zhuǎn)，并不間斷地給用戶提供服務(wù)的能力變得非常重要。

鴻蒙系統(tǒng)提供了自由流轉(zhuǎn)的能力，使開發(fā)者可以方便地開發(fā)出跨越多個設(shè)備的應(yīng)用，用戶也能夠方便地使用這些應(yīng)用。

自由流轉(zhuǎn)可分為跨端遷移和多端協(xié)同兩種情況，前者是時間上的串行交互，后者是時間上的并行交互。自由流轉(zhuǎn)不僅帶給用戶全新的交互體驗，還為開發(fā)者搭建了一座從單設(shè)備時代通往多設(shè)備時代的橋梁。1.2.3統(tǒng)一生態(tài)，原生智能

鴻蒙系統(tǒng)作為華為公司推出的一款分布式操作系統(tǒng)，旨在統(tǒng)一生態(tài)，實現(xiàn)原生智能。這一系統(tǒng)不僅對傳統(tǒng)的單設(shè)備系統(tǒng)能力進行了擴展，還提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念。這意味著鴻蒙系統(tǒng)能夠支持手機、平板電腦、智能穿戴設(shè)備、智慧屏、車機設(shè)備等多種終端設(shè)備，為用戶提供了更加便捷和全面的智能體驗。1．統(tǒng)一生態(tài)

移動操作系統(tǒng)和桌面操作系統(tǒng)的跨平臺應(yīng)用開發(fā)框架不盡相同，從渲染方式的角度可以歸納為網(wǎng)頁視圖（WebView）渲染、原生渲染和自渲染3類，鴻蒙系統(tǒng)提供了對應(yīng)的WebView組件、ArkUI框架和自定義渲染（XComponent）組件來支撐這3種類型的跨平臺應(yīng)用開發(fā)框架的接入。主流跨平臺應(yīng)用開發(fā)框架已有適配鴻蒙系統(tǒng)的版本，基于這些框架開發(fā)的應(yīng)用可以以較低成本遷移到鴻蒙系統(tǒng)。2．原生智能

鴻蒙系統(tǒng)內(nèi)置強大的人工智能（ArtificialIntelligence，AI）能力，面向鴻蒙應(yīng)用開發(fā)，通過不同層次的AI能力開放，可以滿足開發(fā)者在不同開發(fā)場景下的訴求，降低應(yīng)用的開發(fā)門檻，幫助開發(fā)者快速實現(xiàn)應(yīng)用智能化。1.3鴻蒙應(yīng)用開發(fā)套件

鴻蒙應(yīng)用開發(fā)套件包含視覺設(shè)計套件、開發(fā)套件、測試套件、運維套件等，如圖1-4所示，通過鴻蒙應(yīng)用開發(fā)套件，開發(fā)者可以高效開發(fā)鴻蒙應(yīng)用、元服務(wù)。HarmonyOSDesign：鴻蒙系統(tǒng)視覺設(shè)計套件。ArkTS：鴻蒙應(yīng)用開發(fā)語言。ArkUI：鴻蒙應(yīng)用開發(fā)框架。ArkCompiler：方舟編譯器。DevEcoStudio：鴻蒙集成開發(fā)環(huán)境。DevEcoTesting：鴻蒙測試套件。AppGalleryConnect：鴻蒙應(yīng)用發(fā)布套件。圖1-4鴻蒙應(yīng)用開發(fā)套件1．鴻蒙系統(tǒng)視覺設(shè)計套件

鴻蒙系統(tǒng)視覺設(shè)計套件（HarmonyOSDesign）支持跨設(shè)備的超級終端一拖即連，萬能卡片輕輕一滑即可獲取所需信息，文件中轉(zhuǎn)站、智慧視覺等創(chuàng)新功能，帶來全場景智慧生活新體驗。它涵蓋全面的全場景設(shè)計規(guī)范，豐富的設(shè)計資源，以及高效的設(shè)計工具，可以幫助開發(fā)者提高開發(fā)效率。（1）全面的全場景設(shè)計規(guī)范（2）豐富的設(shè)計資源（3）高效的設(shè)計工具2．鴻蒙應(yīng)用開發(fā)語言ArkTS

ArkTS是鴻蒙應(yīng)用的原生開發(fā)語言，其源碼文件擴展名通常為“.ets”。它在保持編程語言TypeScript（簡稱TS）基本語法風(fēng)格的基礎(chǔ)上，對TS的動態(tài)類型特性施加更嚴(yán)格的約束，引入靜態(tài)類型，同時提供聲明式UI、狀態(tài)管理等相應(yīng)的能力，讓開發(fā)者以更簡潔、更自然的方式開發(fā)高性能應(yīng)用。

ArkTS最重要的特性之一是靜態(tài)類型。相比于只在編譯時進行類型檢查的TS，ArkTS會將編譯時確定的類型應(yīng)用到運行性能優(yōu)化中。由于在編譯時就可以確定對象布局，對象屬性的訪問將更加高效。

未來，ArkTS會結(jié)合應(yīng)用開發(fā)以及運行時的需求持續(xù)演進，引入包括并行和并發(fā)能力增強、類型系統(tǒng)增強等方面的語言特性，進一步提升ArkTS應(yīng)用的開發(fā)和運行體驗。3．鴻蒙應(yīng)用開發(fā)框架ArkUI

ArkUI是鴻蒙原生的UI開發(fā)框架，它給開發(fā)者提供了兩種開發(fā)方式：基于ArkTS的聲明式開發(fā)范式和基于JS擴展的類Web開發(fā)范式。聲明式開發(fā)范式更加簡潔、高效，類Web開發(fā)范式對Web及前端開發(fā)者更友好。另外，ArkUI還提供了API擴展機制，通過此種機制可以封裝風(fēng)格統(tǒng)一的JS接口。（1）聲明式開發(fā)范式（2）類Web開發(fā)范式4．方舟編譯器

方舟編譯器（ArkCompiler）是華為推出的一個高性能編譯器，旨在提升應(yīng)用程序的執(zhí)行效率和優(yōu)化用戶體驗。它是華為自主研發(fā)的統(tǒng)一編程平臺。

方舟編譯器支持多種編程語言、多種芯片平臺的聯(lián)合編譯與運行，能夠?qū)⒏呒壵Z言（如C語言、Java）靜態(tài)編譯成機器碼，消除了虛擬機動態(tài)編譯的額外開銷，從而顯著提高應(yīng)用程序的運行效率。這種靜態(tài)編譯機制使得應(yīng)用在運行時無須再次編譯，減少了資源消耗，提高了系統(tǒng)響應(yīng)速度和操作流暢度。5．鴻蒙集成開發(fā)環(huán)境

DevEcoStudio是面向鴻蒙生態(tài)的集成開發(fā)環(huán)境，提供了一站式的鴻蒙應(yīng)用、元服務(wù)開發(fā)能力，如圖1-5所示。圖1-5鴻蒙集成開發(fā)環(huán)境（1）工程管理（2）代碼編輯（3）界面預(yù)覽（4）編譯構(gòu)建（5）代碼調(diào)試（6）性能調(diào)優(yōu)（7）設(shè)備模擬（8）命令行工具6．鴻蒙測試套件

鴻蒙測試套件（DevEcoTesting）是專門用于鴻蒙系統(tǒng)的測試套件，它為開發(fā)者提供了一系列測試工具和框架，幫助開發(fā)者對鴻蒙應(yīng)用進行全面的測試。

7．鴻蒙應(yīng)用發(fā)布套件

鴻蒙應(yīng)用發(fā)布套件（AppGalleryConnect）為開發(fā)者提供了一個集中的平臺，用于將開發(fā)好的鴻蒙應(yīng)用或元服務(wù)發(fā)布到華為應(yīng)用市場，方便用戶下載和使用；便于開發(fā)者在AppGalleryConnect中創(chuàng)建項目，并對項目的各項信息（如應(yīng)用的基本信息、版本信息等）進行配置，確保應(yīng)用的相關(guān)信息準(zhǔn)確無誤地展示給用戶；協(xié)助開發(fā)者完成應(yīng)用的簽名操作，通過生成和管理數(shù)字證書與profile文件，保證應(yīng)用的完整性和安全性，確保只有經(jīng)過授權(quán)的應(yīng)用才能在鴻蒙系統(tǒng)中正常運行和分發(fā)。8．鴻蒙軟件開發(fā)工具包

鴻蒙軟件開發(fā)工具包（HarmonyOSSoftwareDevelopmentKit）也稱鴻蒙SDK，包含鴻蒙應(yīng)用開發(fā)所需的API集合和基礎(chǔ)工具集。（1）ArkTSAPI（2）CAPI（3）N-API（4）方舟工具鏈【項目實現(xiàn)】搭建鴻蒙應(yīng)用開發(fā)環(huán)境

公司唐工程師分析了目前常用的鴻蒙應(yīng)用開發(fā)環(huán)境搭建方式，把此項目分成兩個任務(wù)來實現(xiàn)，分別是安裝DevEcoStudio和創(chuàng)建首個鴻蒙應(yīng)用程序。任務(wù)1-1安裝DevEcoStudio1．任務(wù)分析

安裝DevEcoStudio并不難，但要選擇適當(dāng)?shù)呐渲梅椒ā?．實現(xiàn)步驟（1）下載和安裝DevEcoStudio圖1-6單擊DevEcoStudioforWindows15（2.4GB）按鈕①解壓下載的文件，得到文件deveco-studio-15.exe，雙擊此文件，進入DevEcoStudio安裝向?qū)У摹斑x擇安裝位置”界面，然后單擊“下一步”按鈕，進入下一步。②單擊“瀏覽”按鈕，選擇安裝目錄“F:\Huawei\DevEco”，如圖1-7所示，然后單擊“下一步”按鈕，進入下一步。圖1-7選擇安裝目錄③單擊“下一步”按鈕，進入“安裝選項“界面，勾選此界面中的全部復(fù)選框，如圖1-8所示。圖1-8勾選此界面的全部復(fù)選框④單擊“下一步”按鈕，進入“選擇開始菜單目錄”界面，如圖1-9所示。圖1-9“選擇開始菜單目錄”界面⑤單擊“安裝”按鈕開始安裝，進入“安裝中”界面，如圖1-10所示。圖1-10“安裝中”界面⑥安裝完成后自動進入“DevEcoStudio安裝程序結(jié)束”界面，選中“是，立即重新啟動”單選按鈕后單擊“完成”按鈕，如圖1-11所示。圖1-11

“DevEcoStudio安裝程序結(jié)束”界面（2）配置DevEcoStudio

系統(tǒng)重啟后，雙擊桌面上的“DevEcoStudio”圖標(biāo)，運行DevEcoStudio，可按如下步驟配置。①進入“ImportDevEcoStudioSettings”界面，選中“Donotimportsettings”單選按鈕，如圖1-12所示。圖1-12

“ImportDevEcoStudioSettings”界面②單擊“OK”按鈕，進入“WelcometoHUAWEIDevEcoStudio”界面，如圖1-13所示。圖1-13

“WelcometoHUAWEIDevEcoStudio”界面③單擊“Agree”按鈕，進入“WelcometoDevEcoStudio”界面，如圖1-14所示。圖1-14

“WelcometoDevEcoStudio”界面任務(wù)1-2創(chuàng)建首個鴻蒙應(yīng)用程序1．任務(wù)分析

創(chuàng)建首個鴻蒙應(yīng)用程序，此程序顯示簡單的歡迎詞來測試鴻蒙應(yīng)用開發(fā)環(huán)境。2．實現(xiàn)步驟（1）啟動DevEcoStudio，進入DevEcoStudio歡迎界面，單擊“CreateProject”按鈕，進入“ChooseYourAbilityTemplate”（選擇模板）界面，選擇默認(rèn)的“EmptyAbility”模板，如圖1-15所示。圖1-15選擇默認(rèn)的“EmptyAbility”模板（2）單擊“Next”按鈕，進入“ConfigureYourProject”界面，如圖1-16所示。在“Projectname”處填寫“project1”，在“Bundlename”處填寫“ject1”，在“Savelocation”處填寫“F:\Huawei\project\project1”，在“Devicetype”處勾選“Car”復(fù)選框，其他使用默認(rèn)值，單擊“Finish”按鈕。圖1-16

“ConfigureYourProject”界面（3）項目創(chuàng)建成功后，將默認(rèn)的文字“HelloWorld”改為“云林科技歡迎你”，單擊右側(cè)的“Previewer”按鈕（首次啟用“Previewer”會彈出“Tutorial”界面，直接關(guān)閉即可），再單擊右上方的“LivePreview”按鈕，預(yù)覽項目效果，如圖1-17所示。圖1-17預(yù)覽項目效果3．運行效果

鴻蒙應(yīng)用程序除了在DevEcoStudio的預(yù)覽器中運行，如圖1-17所示，還可在模擬器和真機上運行，下面講解在模擬器上運行的步驟。（1）單擊DevEcoStudio的“Tools”主菜單，從下拉菜單中選擇“DeviceManager”命令。首次運行會進入“HarmonyOSSoftwareLicenseandServiceAgreement”（鴻蒙軟件許可和服務(wù)協(xié)議）界面，如圖1-18所示。圖1-18鴻蒙軟件許可和服務(wù)協(xié)議（2）單擊“Agree”按鈕，進入“DeviceManager”對話框的“YourDevices”界面，單擊“Edit”按鈕，將“LocalEmulatorLocation”設(shè)置為“F:/Huawei/Emulator”，如圖1-19所示。圖1-19

“YourDevices”界面（3）單擊“+NewEmulator”按鈕，彈出“DevEcoVirtualDeviceConfiguration”對話框的“SelectVirtualDevice”界面，單擊“Edit”按鈕，將“LocalImageLocation”設(shè)置為“F:/Huawei/sdk”，如圖1-20所示。圖1-20

“SelectVirtualDevice”界面（4）單擊“Huawei_Phone”這一欄后的下載圖標(biāo)，進入“SDKSetup”對話框的“LicenseAgreement”界面，在左邊選擇“HarmonyOS-SDK”命令，右側(cè)選中“Accept”單選按鈕，如圖1-21所示。圖1-21

“LicenseAgreement”界面（5）單擊“Next”按鈕，進入“SDKSetup”對話框的“SDKComponentsSetup”界面，正式下載安裝SDK，如圖1-22所示。圖1-22

“SDKComponentsSetup”界面（6）完成SDK的安裝后，單擊“Finish”按鈕，返回“SelectVirtualDevice”界面，此時“Huawei_Phone”這一欄沒有下載的提示了，單擊“Next”按鈕，進入“VirtualDeviceConfigure”界面，將“Name”設(shè)置為“HuaweiP70”，其他選項默認(rèn)，如圖1-23所示。圖1-23

“VirtualDeviceConfigure”界面（7）單擊“Finish”按鈕，在彈出的“Thedeviceissuccessfullycreated.”對話框中單擊“OK”按鈕，完成模擬器的創(chuàng)建，如圖1-24所示。圖1-24成功創(chuàng)建模擬器（8）單擊“Actions”下的綠色三角形按鈕，運行模擬器，運行成功后再單擊“HuaweiP70”后邊的按鈕，就可以運行項目了，如圖1-25所示。圖1-25項目在模擬器上運行成功【小結(jié)及提高】

通過學(xué)習(xí)本項目，讀者可以了解鴻蒙系統(tǒng)的發(fā)展歷程，掌握鴻蒙系統(tǒng)技術(shù)架構(gòu)、鴻蒙系統(tǒng)技術(shù)特征以及鴻蒙應(yīng)用開發(fā)套件，能根據(jù)需求進行鴻蒙應(yīng)用開發(fā)環(huán)境的搭建和配置?！卷椖繉嵱?xùn)】1．實訓(xùn)要求2．實訓(xùn)步驟（1）使用USB方式將手機連接到計算機。（2）在手機“設(shè)置”→“系統(tǒng)”→“開發(fā)者選項”中，打開“USB調(diào)試”開關(guān)。（3）運行項目。謝謝鴻蒙應(yīng)用開發(fā)項目教程項目2

設(shè)計轉(zhuǎn)盤式抽獎程序

云林科技將在年終晚會上舉行一個轉(zhuǎn)盤式抽獎活動，因此需要開發(fā)一個轉(zhuǎn)盤式抽獎程序，公司經(jīng)理把這個任務(wù)交給了技術(shù)部的汪工程師，并提出程序要有美觀的界面，可以方便地進行各種操作，同時，只需使用手機就可參與等要求。轉(zhuǎn)盤式抽獎程序界面如圖2-1所示。圖2-1轉(zhuǎn)盤式抽獎程序界面【項目分析】

完成本項目需要用到鴻蒙應(yīng)用開發(fā)基礎(chǔ)知識（應(yīng)用程序包、應(yīng)用配置文件、資源分類與訪問、應(yīng)用開發(fā)語言基礎(chǔ)、應(yīng)用開發(fā)框架基礎(chǔ)）、UI常用布局、UI常用組件等知識?！局R目標(biāo)】了解鴻蒙應(yīng)用開發(fā)基礎(chǔ)。熟悉常用的響應(yīng)式布局。掌握媒體組件和繪制組件。熟悉常用的自適應(yīng)布局。掌握基礎(chǔ)組件和容器組件?！灸芰δ繕?biāo)】能夠熟練使用常用的自適應(yīng)布局。能夠綜合使用基礎(chǔ)組件、容器組件、媒體組件、繪制組件來解決問題。能夠熟練使用常用的響應(yīng)式布局?！舅仞B(yǎng)目標(biāo)】具有追求卓越和精益求精的工匠精神。2.1鴻蒙應(yīng)用開發(fā)基礎(chǔ)

開發(fā)鴻蒙應(yīng)用程序既要了解鴻蒙的應(yīng)用程序包、應(yīng)用配置文件以及資源分類及其訪問方法，還要掌握應(yīng)用開發(fā)語言和應(yīng)用開發(fā)框架等基礎(chǔ)知識。2.1.1鴻蒙應(yīng)用程序包

鴻蒙應(yīng)用程序泛指運行在鴻蒙系統(tǒng)上，為用戶提供特定服務(wù)的程序，簡稱“鴻蒙應(yīng)用”。一個應(yīng)用程序所對應(yīng)的軟件包，稱為“應(yīng)用程序包”。

鴻蒙系統(tǒng)提供了開發(fā)、安裝、查詢、更新和卸載應(yīng)用程序包等功能，便于開發(fā)者開發(fā)和管理應(yīng)用。鴻蒙系統(tǒng)還兼容不同芯片平臺，應(yīng)用程序包可以在不同的芯片平臺安裝運行，這使得開發(fā)者可以聚焦于應(yīng)用的功能實現(xiàn)。1．開發(fā)態(tài)包結(jié)構(gòu)

在DevEcoStudio中創(chuàng)建一個項目，并嘗試創(chuàng)建多個不同類型的模塊。開發(fā)態(tài)下應(yīng)用程序包主要包含的目錄與文件如下。（1）AppScope目錄（2）Module目錄（3）配置文件（4）ArkTS源碼文件（5）資源文件2．編譯態(tài)包結(jié)構(gòu)

不同類型的模塊編譯后會生成對應(yīng)的HAP、靜態(tài)共享包（HarmonyArchive，HAR）、動態(tài)共享包（HarmonySharedPackage，HSP）等文件。從開發(fā)態(tài)到編譯態(tài)，Module目錄下的文件會發(fā)生如下變更。（1）ets目錄：ArkTS源碼被編譯生成.abc文件。（2）resources目錄：AppScope目錄下的資源文件會合入Module目錄下的resources目錄，如果兩個目錄下存在同名文件，編譯打包后只會保留AppScope目錄下的資源文件。（3）module.json5配置文件：AppScope目錄下app.json5文件的字段會合入Module目錄下的module.json5文件，編譯后生成HAP或HSP的最終module.json文件。在編譯HAP和HSP時，它們所依賴的HAR會直接編譯到HAP和HSP中。3．發(fā)布態(tài)包結(jié)構(gòu)每個應(yīng)用至少包含一個.hap文件，可能包含若干個.hsp文件；每個應(yīng)用的所有.hap文件與.hsp文件合在一起稱為包（Bundle），其對應(yīng)的包名（bundleName）是應(yīng)用的唯一標(biāo)識。發(fā)布應(yīng)用時，需要將Bundle打包為一個.app文件用于上架，這個.app文件稱為AppPack，與此同時，DevEcoStudio會自動生成一個文件。文件描述了AppPack中每個HAP和HSP的屬性，包含App的包名和版本編號（versionCode）信息，以及模塊的名稱、類型和能力等信息。2.1.2鴻蒙應(yīng)用配置文件

每個應(yīng)用的代碼目錄下必須有應(yīng)用級配置文件，這些配置文件會向編譯工具、操作系統(tǒng)和應(yīng)用市場提供應(yīng)用的基本信息。

在基于Stage模型開發(fā)的應(yīng)用的代碼目錄下，都存在一個app.json5配置文件，以及一個或多個module.json5配置文件。1．a(chǎn)pp.json5配置文件

app.json5配置文件主要包含以下內(nèi)容。（1）應(yīng)用的全局配置信息，包含應(yīng)用的包名、開發(fā)廠商、版本號等基本信息。（2）特定設(shè)備類型的配置信息。2．module.json5配置文件

module.json5配置文件主要包含以下內(nèi)容。（1）模塊的基本配置信息，包含模塊名稱、類型、描述、支持的設(shè)備類型等。（2）應(yīng)用組件信息，包含UIAbility組件和ExtensionAbility組件的描述信息。（3）應(yīng)用運行過程中所需的權(quán)限信息。2.1.3鴻蒙資源分類與訪問

應(yīng)用開發(fā)中會使用各類資源文件，需要將它們存放到特定子目錄下。1．資源分類

在資源目錄（resources目錄）中常見的子目錄有base目錄、限定詞目錄、rawfile目錄、resfile目錄和資源組目錄等。2．資源訪問

對于單HAP應(yīng)用資源，可通過如下方式訪問。（1）通過$r或$rawfile訪問資源（2）通過應(yīng)用上下文獲取ResourceManager后調(diào)用資源管理接口訪問資源2.1.4鴻蒙應(yīng)用開發(fā)語言基礎(chǔ)

隨著移動設(shè)備在人們的日常生活中越來越普及，針對移動環(huán)境的編程語言優(yōu)化需求日益增長。ArkTS可以滿足這些需求，它是一種為構(gòu)建高性能應(yīng)用而設(shè)計的編程語言。ArkTS在TypeScript語法的基礎(chǔ)上進行了優(yōu)化，以提高性能和開發(fā)效率。

與JS的互通性是ArkTS設(shè)計中的關(guān)鍵考慮因素。鑒于許多移動應(yīng)用開發(fā)者希望重用其TypeScript和JS的代碼和庫，ArkTS實現(xiàn)了與JS的無縫互通，這意味著開發(fā)者可以利用現(xiàn)有的代碼和庫進行ArkTS開發(fā)。1．基礎(chǔ)語法

ArkTS通過聲明引入變量、常量、函數(shù)和數(shù)據(jù)類型。（1）變量聲明（2）常量聲明（3）自動推斷數(shù)據(jù)類型（4）數(shù)據(jù)類型（5）運算符（6）語句2．函數(shù)

函數(shù)聲明引入一個函數(shù)，包含其名稱、參數(shù)列表、返回類型和函數(shù)體。

在函數(shù)聲明中，必須為每個參數(shù)標(biāo)記類型。如果參數(shù)為可選參數(shù)，那么允許在調(diào)用函數(shù)時省略該參數(shù)。

函數(shù)的最后一個參數(shù)可以是rest參數(shù)（以“...”開頭，并跟隨一個參數(shù)名和一個類型數(shù)組）。

可選參數(shù)的格式可為“name?:Type”，也可為“name:Type=常量”，即為參數(shù)設(shè)置默認(rèn)值。2.1.5鴻蒙應(yīng)用開發(fā)框架基礎(chǔ)

鴻蒙原生的應(yīng)用開發(fā)框架是ArkUI，它采用ArkTS，提供了完整的基礎(chǔ)設(shè)施，包括簡潔的UI語法、豐富的UI功能和實時界面預(yù)覽工具等，支持開發(fā)者進行分布式應(yīng)用界面的開發(fā)。1．裝飾器

裝飾器用于裝飾類、結(jié)構(gòu)、方法和變量，并賦予它們特殊的含義。上述示例中的@Entry、@Component和@State都是裝飾器，@Component表示自定義組件，@Entry表示該自定義組件為入口組件，@State表示組件中的狀態(tài)變量，狀態(tài)變量變化會觸發(fā)UI刷新。2．UI描述

ArkUI以聲明的方式來描述UI的結(jié)構(gòu)，如build()方法中的代碼塊。3．自定義組件

自定義組件是可復(fù)用的UI單元，可組合其他組件，如上述示例中被@Component裝飾的structIndex。4．系統(tǒng)組件

系統(tǒng)組件是指ArkUI框架中內(nèi)置的基礎(chǔ)組件和容器組件，可直接被開發(fā)者調(diào)用，如上述示例中的Column、Text。5．屬性方法

組件可以通過鏈?zhǔn)秸{(diào)用配置多項屬性，如fontSize()、width()、height()、backgroundColor()等。6．事件方法

組件可以通過鏈?zhǔn)秸{(diào)用設(shè)置多個事件的響應(yīng)邏輯，如跟隨在Row后面的onClick()。

除此之外，ArkUI擴展了多種語法范式來使開發(fā)更加便捷。7．自定義構(gòu)建函數(shù)

自定義構(gòu)建函數(shù)是指由@Builder裝飾的函數(shù)，加上@BuilderParam的配合傳參，可以更好地封裝UI描述的方法，實現(xiàn)細粒度的封裝和復(fù)用UI描述。8．定義擴展組件樣式

組件樣式可用@Styles進行重用，在此基礎(chǔ)上可以使用@Extend進行樣式擴展。9．多態(tài)樣式

多態(tài)樣式是指利用屬性方法stateStyles()，根據(jù)UI內(nèi)部狀態(tài)的不同來設(shè)置不同的樣式。2.2UI常用布局

布局指用特定的容器組件或者屬性來管理UI組件的大小和位置，主要分為：自適應(yīng)布局和響應(yīng)式布局兩大類。2.2.1自適應(yīng)布局常用的自適應(yīng)布局包括線性布局、層疊布局、彈性布局、相對布局、網(wǎng)格布局等。1．線性布局

線性布局（LinearLayout）是開發(fā)中最常用的布局之一，通過容器組件Column和Row構(gòu)建。

線性布局是其他布局的基礎(chǔ)，其元素在線性方向（水平方向和垂直方向）上依次排列。

線性布局的排列方向由所選容器組件決定，Column容器組件內(nèi)元素按照垂直方向排列，Row容器組件內(nèi)元素按照水平方向排列。開發(fā)者可根據(jù)需要選擇Column容器組件或Row容器組件來創(chuàng)建線性布局。圖2-2頁面效果圖2-3頁面效果2．層疊布局

層疊布局用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。層疊布局通過Stack容器組件實現(xiàn)固定定位與層疊，容器組件中的元素依次入棧，后一個元素覆蓋前一個元素。層疊布局具有較強的頁面層疊、定位能力，可以實現(xiàn)廣告展示、卡片層疊效果等。圖2-4層疊布局效果3．彈性布局

彈性布局提供更加有效的方式對容器組件中的元素進行排列、對齊并分配剩余空間。容器組件默認(rèn)存在主軸與交叉軸，元素默認(rèn)沿主軸排列，元素在主軸方向的尺寸稱為主軸尺寸，在交叉軸方向的尺寸稱為交叉軸尺寸。彈性布局在開發(fā)場景中廣泛使用，如頁面頂部導(dǎo)航欄的均勻分布、頁面框架的搭建、多行數(shù)據(jù)的排列等。圖2-5彈性布局效果4．相對布局

相對布局支持為容器組件內(nèi)部的元素設(shè)置相對位置，支持元素指定兄弟元素（具有相同的父元素）作為錨點，也支持指定父元素作為錨點，基于錨點進行相對布局。圖2-6相對布局效果5．網(wǎng)格布局

網(wǎng)格布局將空間劃分為由行和列定義的單元格，每個單元格都可以視為一個小的布局區(qū)域。網(wǎng)格布局具有較強的頁面均分能力、組件占比控制能力，是一種重要的自適應(yīng)布局，可以實現(xiàn)九宮格圖片展示、日歷、計算器等。

ArkUI提供了Grid容器組件和GridItem組件用于構(gòu)建網(wǎng)格布局。Grid容器組件用于設(shè)置網(wǎng)格布局相關(guān)參數(shù)，GridItem組件定義組件相關(guān)特征。Grid容器組件支持使用條件渲染、循環(huán)渲染、懶加載等控制方式生成組件。

Grid容器組件內(nèi)每一個條目對應(yīng)一個GridItem組件。網(wǎng)格布局是一種二維布局。Grid容器組件支持自定義行列數(shù)和每行每列尺寸占比、設(shè)置組件橫跨幾行或者幾列，同時提供了垂直和水平布局能力。當(dāng)網(wǎng)格容器組件尺寸發(fā)生變化時，所有組件以及間距會等比例調(diào)整，從而實現(xiàn)網(wǎng)格布局的自適應(yīng)。根據(jù)Grid容器組件的布局能力，可以構(gòu)建出不同樣式的網(wǎng)格布局。圖2-7網(wǎng)格布局效果2.2.2響應(yīng)式布局

常用的響應(yīng)式布局主要包括柵格布局和媒體查詢布局。1．柵格布局

柵格布局是一種通用的輔助定位工具，在移動設(shè)備的界面設(shè)計中發(fā)揮了重要作用。

柵格布局可以完成自動換行和自適應(yīng)不同設(shè)備寬度。當(dāng)頁面元素的數(shù)量超出了一行或一列的容量時，它們會自動換到下一行或下一列，并且在不同寬度的設(shè)備上自適應(yīng)排版，使得頁面布局更加靈活。

GridRow為柵格容器組件，需與柵格組件GridCol結(jié)合使用。

柵格系統(tǒng)默認(rèn)斷點將設(shè)備寬度分為xs、sm、md、lg這4類，具體如表2-1所示。斷點名稱取值范圍（vp）設(shè)備描述xs[0,320)最小寬度類型設(shè)備sm[320,520)小寬度類型設(shè)備md[520,840)中等寬度類型設(shè)備lg[840,+∞)大寬度類型設(shè)備表2-1柵格系統(tǒng)默認(rèn)斷點

開發(fā)者可以使用breakpoints自定義修改斷點的取值范圍，最多支持6個斷點，除了默認(rèn)的4個斷點，還可以啟用xl、xxl兩個斷點，支持6種不同尺寸（xs、sm、md、lg、xl、xxl）設(shè)備的布局設(shè)置。圖2-8柵格布局效果2．媒體查詢布局

媒體查詢作為響應(yīng)式設(shè)計的核心，在移動設(shè)備上的應(yīng)用十分廣泛。媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備的不同狀態(tài)修改應(yīng)用的樣式。媒體查詢常用于下面兩種場景。（1）針對設(shè)備和應(yīng)用的屬性信息（如顯示區(qū)域、深淺色、分辨率等），設(shè)計出相匹配的布局。（2）當(dāng)屏幕發(fā)生動態(tài)改變時（如分屏、橫豎屏切換等），同步更新應(yīng)用的頁面布局。

媒體查詢通過mediaquery模塊接口設(shè)置查詢條件并綁定回調(diào)函數(shù)，在對應(yīng)條件的回調(diào)函數(shù)里更改頁面布局或者實現(xiàn)業(yè)務(wù)邏輯，實現(xiàn)頁面的響應(yīng)式設(shè)計。

媒體查詢條件由媒體類型、邏輯操作符、媒體特征組成，其中媒體類型可省略，邏輯操作符用于連接不同媒體類型與媒體特征，其中，媒體特征使用“()”包裹且可以有多個。media-type：媒體類型默認(rèn)為screen，按屏幕相關(guān)參數(shù)進行媒體查詢。media-logic-operations：媒體邏輯操作，媒體邏輯操作符and、or、not、only用于構(gòu)建復(fù)雜媒體查詢。媒體范圍操作符包括“<=”“>=”“<”“>”。media-feature：媒體特征，包括應(yīng)用顯示區(qū)域的寬度與高度、設(shè)備分辨率以及設(shè)備的寬度與高度等屬性，其說明如表2-2所示。表2-2媒體特征說明類型說明height應(yīng)用頁面可繪制區(qū)域的高度min-height應(yīng)用頁面可繪制區(qū)域的最小高度max-height應(yīng)用頁面可繪制區(qū)域的最大高度width應(yīng)用頁面可繪制區(qū)域的寬度min-width應(yīng)用頁面可繪制區(qū)域的最小寬度max-width應(yīng)用頁面可繪制區(qū)域的最大寬度resolution設(shè)備的分辨率，支持單位dpi、dppx和dpcmmin-resolution設(shè)備的最小分辨率max-resolution設(shè)備的最大分辨率orientation屏幕的方向?？蛇x值：-orientation:portrait（設(shè)備豎屏）-orientation:landscape（設(shè)備橫屏）device-height設(shè)備的高度min-device-height設(shè)備的最小高度max-device-height設(shè)備的最大高度device-width設(shè)備的寬度device-type設(shè)備的類型min-device-width設(shè)備的最小寬度max-device-width設(shè)備的最大寬度round-screen屏幕類型，圓形屏幕為true，非圓形屏幕為falsedark-mode系統(tǒng)為深色模式時為true，否則為false圖2-9媒體查詢布局2.3UI常用組件

組件是構(gòu)建頁面的核心，每個組件通過對方法與數(shù)據(jù)的封裝實現(xiàn)獨立的可交互功能單元。組件之間相互獨立，隨取隨用，在需求相同的地方可重復(fù)使用。目前，UI常用組件包括基礎(chǔ)組件、容器組件、媒體組件、繪制組件等。2.3.1基礎(chǔ)組件

基礎(chǔ)組件是最常用的功能單元之一，常用的基礎(chǔ)組件有Button、Image、Progress、QRCode、Radio、Text、TextInput等。1．Button2．Image3．Progress4．QRCode5．Radio6．Text7．TextInput圖2-10Button顯示效果圖2-11Image顯示效果圖2-12Progress顯示效果圖2-13二維碼顯示效果圖2-14Radio顯示效果圖2-15Text顯示效果圖2-16TextInput顯示效果2.3.2容器組件

容器組件主要用于頁面布局。除了講解UI常用布局時提到的容器組件，常見的容器組件還有Refresh、Scroll、Tabs等。

1．Refresh

2．Scroll

3．Tabs圖2-17Refresh顯示效果圖2-18Scroll顯示效果圖2-19Tabs顯示效果2.3.3媒體組件

目前，媒體組件只有Video組件，用于播放視頻文件并控制其播放狀態(tài)。

其接口如下。Video(value:{src?:string|Resource,currentProgressRate?:number|string|PlaybackSpeed,previewUri?:string|PixelMap|Resource,controller?:VideoController,imageAIOptions?:ImageAIOptions})})圖2-20Video顯示效果2.3.4繪制組件

繪制組件主要用來繪制各種圖形，如圓形、橢圓形、直線、折線、多邊形以及自定義圖形等。

常用的繪制組件有Canvas、Shape等。1．CanvasCanvas也稱畫布組件，用于繪制自定義圖形，其接口如下。Canvas(context?:CanvasRenderingContext2D)圖2-21Canvas示例2．Shape

Shape在繪制組件中作為父組件，描述所有繪制組件均支持的通用屬性，可實現(xiàn)類似于可縮放矢量圖形（ScalableVectorGraphics，SVG）的效果。Shape有7種繪制類型，分別為Circle（圓形）、Ellipse（橢圓形）、Line（直線）、Polyline（折線）、Polygon（多邊形）、Path（路徑）、Rect（矩形）。它們可以單獨使用，在頁面上繪制指定的圖形?！卷椖繉崿F(xiàn)】設(shè)計轉(zhuǎn)盤式抽獎程序

汪工程師接到任務(wù)后分析了項目要求，把此項目分成兩個任務(wù)來實現(xiàn)：設(shè)計轉(zhuǎn)盤式抽獎程序界面和編寫轉(zhuǎn)盤式抽獎程序代碼。任務(wù)2-1設(shè)計轉(zhuǎn)盤式抽獎程序界面1．任務(wù)分析

轉(zhuǎn)盤式抽獎程序的界面要有抽獎開始按鈕、抽獎過程展示以及抽獎結(jié)果顯示，其中抽獎開始界面要直觀地展示可能抽中的獎品，而抽獎過程可以用動畫來實現(xiàn)。2．代碼實現(xiàn)3．運行效果

轉(zhuǎn)盤式抽獎程序界面效果如圖2-22所示，下面將根據(jù)此界面來編寫代碼。圖2-22轉(zhuǎn)盤式抽獎程序界面效果任務(wù)2-2編寫轉(zhuǎn)盤式抽獎程序代碼1．任務(wù)分析

點擊“開始”按鈕即可開始抽獎，抽獎結(jié)束后會自動顯示抽獎結(jié)果，用戶確認(rèn)后即可關(guān)閉抽獎結(jié)果。若要重新抽獎，可以重復(fù)前面的步驟。2．代碼實現(xiàn)3．運行效果

將上述文件保存后引入相關(guān)的工具類文件以及圖片資源、字符串、顏色、布爾值等文件，保存項目，編譯后在模擬器上運行，效果如圖2-23所示，轉(zhuǎn)盤式抽獎程序成功實現(xiàn)。圖2-23轉(zhuǎn)盤式抽獎程序運行效果【項目實訓(xùn)】1．實訓(xùn)要求

基于基礎(chǔ)組件和容器組件，實現(xiàn)一個支持加減乘除混合運算的計算器應(yīng)用程序。2．步驟提示

計算器由表達式輸入框、結(jié)果輸出框、輸入?yún)^(qū)域3個部分組成，其中表達式輸入框位于頁面頂部，可使用TextInput組件實時顯示輸入的數(shù)據(jù)；結(jié)果輸出框位于表達式輸入框下方，可使用Text組件實時顯示計算結(jié)果和“錯誤”提示；用ForEach組件渲染輸入?yún)^(qū)域，其中0~9、“.”“%”用Text組件渲染；“+”“-”“×”“÷”“=”、清零按鈕、刪除按鈕用Image組件渲染。

計算器應(yīng)用程序界面的效果如圖2-24所示。圖2-24計算器應(yīng)用程序界面的效果謝謝鴻蒙應(yīng)用開發(fā)項目教程項目3設(shè)計鬧鐘程序云林科技為了更好地服務(wù)員工，將開發(fā)一款可以獨立使用的鬧鐘程序，公司經(jīng)理把這個任務(wù)交給了技術(shù)部黎工程師，并提出程序要有美觀的界面，可以方便地進行各種操作；要有擴展性，后期可以嵌入公司App；只需手機就可使用等要求。鬧鐘程序界面如圖3-1所示。項目導(dǎo)入圖3-1鬧鐘程序界面【項目分析】完成本項目需要用到動畫、公共事件、通知等相關(guān)知識?！局R目標(biāo)】了解常用的動畫。了解常用的公共事件和通知?！灸芰δ繕?biāo)】能夠熟練使用常用的動畫。能夠綜合使用動畫、公共事件、通知等來解決問題。能夠熟練完成常用公共事件的訂閱和通知發(fā)布。【素養(yǎng)目標(biāo)】具有愛崗敬業(yè)的良好職業(yè)道德。3.1動畫

動畫是一種通過連續(xù)播放一系列畫面，使這些畫面在視覺上產(chǎn)生動態(tài)效果的藝術(shù)形式。

在鴻蒙系統(tǒng)中，動畫可以理解為一種通過為UI變化添加流暢度的過渡效果，也可以理解為一種能夠增強用戶界面交互體驗的重要手段。UI的一次改變稱為一個動畫幀，對應(yīng)一次屏幕刷新，而決定動畫流暢度的一個重要指標(biāo)是幀率（FrameRate），即每秒的幀數(shù)，幀率越高，動畫越流暢。

產(chǎn)生動畫的方式是改變動畫屬性值并指定動畫參數(shù)。動畫參數(shù)包含動畫時長、變化規(guī)律（即曲線）等。當(dāng)動畫屬性值發(fā)生變化后，按照指定的動畫參數(shù)，從原來的狀態(tài)過渡到新的狀態(tài)，即形成一個動畫效果。3.1.1屬性動畫

屬性動畫是組件的某些通用屬性變化而觸發(fā)的過渡動畫，可以提升用戶體驗。屬性動畫支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

其接口如下。animation(value:{duration?:number,tempo?:number,curve?:string|Curve|ICurve,delay?:number,iterations:number,playMode?:PlayMode,onFinish?:()=>void})

其可選參數(shù)如下。duration：設(shè)置動畫時長，其默認(rèn)值為1000，單位為毫秒。tempo：設(shè)置動畫播放速度。該數(shù)值越大，動畫播放速度越快。值為0時，表示無動畫效果。其默認(rèn)值為1。curve：設(shè)置動畫曲線，其默認(rèn)值為Curve.EaseInOut（平滑的動畫曲線）。delay：設(shè)置動畫延遲播放時間，其默認(rèn)值為0，單位為毫秒，取值范圍是[0,+∞)。delay：設(shè)置動畫延遲播放時間，其默認(rèn)值為0，單位為毫秒，取值范圍是[0,+∞)。iterations：設(shè)置動畫播放次數(shù)，其默認(rèn)值為1，取值范圍為[-1,+∞)。值為-1時表示無限次播放，值為0時表示無動畫效果。playMode：設(shè)置動畫播放模式，默認(rèn)播放完成后從頭開始播放，其默認(rèn)值為PlayMode.Normal。onFinish：狀態(tài)回調(diào)，動畫播放完成時觸發(fā)。當(dāng)iterations設(shè)置為-1時，動畫效果無限循環(huán)，不會停止，所以不會觸發(fā)此回調(diào)。圖3-2屬性動畫效果3.1.2顯式動畫

顯式動畫是由閉包（閉包是實現(xiàn)動畫效果的一種方式，它允許開發(fā)者在函數(shù)內(nèi)部定義一個函數(shù)，此函數(shù)可以訪問外部函數(shù)的變量，使得開發(fā)者可以在動畫過程中動態(tài)地修改狀態(tài)，并且這些狀態(tài)的變化會觸發(fā)動畫效果）內(nèi)的變化觸發(fā)的動畫，這些變化包括由數(shù)據(jù)變化引起的組件的增刪、組件屬性的變化等。圖3-3顯式動畫效果3.1.3轉(zhuǎn)場動畫

轉(zhuǎn)場動畫包括組件內(nèi)轉(zhuǎn)場動畫、頁面間轉(zhuǎn)場動畫和共享元素轉(zhuǎn)場動畫。1．組件內(nèi)轉(zhuǎn)場動畫

組件內(nèi)轉(zhuǎn)場動畫通過transition屬性配置轉(zhuǎn)場參數(shù)，用于在容器組件中插入或刪除組件時顯示過渡效果，可以提升用戶體驗（和animateTo結(jié)合使用時才能生效，動畫時長、動畫曲線、動畫延遲播放時間沿用animateTo中的配置）。圖3-4組件內(nèi)轉(zhuǎn)場動畫效果

屬性transition的參數(shù)類型為TransitionEffect，功能是設(shè)置組件插入或刪除時的過渡效果，以及轉(zhuǎn)場動畫結(jié)束回調(diào)。不設(shè)置任何過渡效果時，默認(rèn)有透明度從0到1的過渡效果。若設(shè)置了其他過渡效果，以設(shè)置的過渡效果為準(zhǔn)。2．頁面間轉(zhuǎn)場動畫

頁面間轉(zhuǎn)場動畫是在全局pageTransition()方法內(nèi)配置頁面入場和頁面退場時的自定義轉(zhuǎn)場動畫。圖3-5頁面間轉(zhuǎn)場動畫效果3．共享元素轉(zhuǎn)場動畫

共享元素轉(zhuǎn)場動畫通過設(shè)置組件的sharedTransition屬性將該組件標(biāo)記為共享元素，并設(shè)置對應(yīng)的共享元素轉(zhuǎn)場動畫。圖3-6共享元素轉(zhuǎn)場動畫效果3.1.4路徑動畫

路徑動畫通過motionPath屬性配置組件位移時的運動路徑，可以顯著提升用戶體驗（與animateTo結(jié)合使用時才能生效，動畫時長、動畫曲線、動畫延遲播放時間沿用animateTo中的配置）。圖3-7路徑動畫效果3.2公共事件

鴻蒙系統(tǒng)通過公共事件服務(wù)（CommonEventService，CES）為應(yīng)用程序提供訂閱、發(fā)布、退訂公共事件的能力。每個應(yīng)用都可以按需訂閱公共事件，當(dāng)訂閱成功且公共事件發(fā)布時，系統(tǒng)會將其發(fā)送給對應(yīng)的應(yīng)用。這些公共事件可能來自系統(tǒng)、其他應(yīng)用或應(yīng)用自身。3.2.1公共事件分類

根據(jù)不同的分類標(biāo)準(zhǔn)，公共事件有不同的分類。1．按系統(tǒng)角度分類

公共事件從系統(tǒng)角度可分為以下兩種。（1）系統(tǒng)公共事件：公共事件服務(wù)內(nèi)部定義的公共事件，只有系統(tǒng)應(yīng)用和系統(tǒng)服務(wù)才能發(fā)布，如HAP的安裝、更新、卸載等公共事件。鴻蒙系統(tǒng)目前支持的系統(tǒng)公共事件詳見官方枚舉列表。（2）自定義公共事件：應(yīng)用可以自定義一些公共事件來實現(xiàn)跨進程的事件通信。2．按發(fā)送方式分類

公共事件按發(fā)送方式可分為以下3種。（1）無序公共事件：公共事件服務(wù)轉(zhuǎn)發(fā)公共事件時，不考慮訂閱者是否接收到，且訂閱者接收到公共事件的順序與其訂閱順序無關(guān)。（2）有序公共事件：公共事件服務(wù)轉(zhuǎn)發(fā)公共事件時，優(yōu)先將公共事件發(fā)送給優(yōu)先級較高的訂閱者，等待其成功接收該公共事件之后再將公共事件發(fā)送給優(yōu)先級較低的訂閱者。如果有多個訂閱者具有相同的優(yōu)先級，則他們將隨機接收到公共事件。（3）粘性公共事件：能夠讓訂閱者收到在訂閱前已經(jīng)發(fā)送的公共事件就是粘性公共事件。普通的公共事件只能在訂閱后收到，而粘性公共事件的特殊性就是可以先發(fā)送后訂閱。粘性公共事件的發(fā)送者必須是系統(tǒng)應(yīng)用或系統(tǒng)服務(wù)，且需要申請ohos.permission.COMMONEVENT_STICKY權(quán)限。3.2.2公共事件開發(fā)

公共事件的處理包括公共事件動態(tài)訂閱、公共事件動態(tài)取消及公共事件發(fā)布。

公共事件動態(tài)訂閱是指應(yīng)用在運行狀態(tài)時對某個公共事件進行訂閱，應(yīng)用運行期間如果有訂閱的事件發(fā)布，那么訂閱了這個事件的應(yīng)用將會收到該事件及其傳遞的參數(shù)。例如，某應(yīng)用希望在其運行期間收到電量過低的事件，并根據(jù)該事件降低其運行功耗，那么該應(yīng)用便可動態(tài)訂閱電量過低事件，收到該事件后關(guān)閉一些非必要的任務(wù)來降低功耗。其具體操作步驟如下。（1）導(dǎo)入模塊。（2）創(chuàng)建訂閱者信息。（3）創(chuàng)建訂閱者并且保存返回的訂閱者對象。（4）創(chuàng)建訂閱回調(diào)函數(shù)（訂閱回調(diào)函數(shù)會在接收到事件時觸發(fā)）。

公共事件動態(tài)取消是指動態(tài)訂閱者完成業(yè)務(wù)需要時主動取消訂閱，可以通過調(diào)用unsubscribe()方法取消訂閱公共事件。其具體操作步驟如下。（1）導(dǎo)入模塊。（2）創(chuàng)建訂閱者信息。（3）創(chuàng)建訂閱者并保存返回的訂閱者對象。（4）調(diào)用CommonEvent中的unsubscribe()方法取消訂閱某公共事件。圖3-8公共事件3.3通知

鴻蒙系統(tǒng)通過通知增強服務(wù)（AdvancedNotificationService，ANS）對通知類型的消息進行管理，支持多種通知類型，如基礎(chǔ)類型通知、進度條類型通知。3.3.1通知簡介

應(yīng)用可以通過通知接口發(fā)送通知消息，終端用戶可以通過通知欄查看通知內(nèi)容，也可以點擊通知來打開應(yīng)用。1．通知常見的使用場景（1）顯示接收到的短消息、即時消息等。（2）顯示應(yīng)用的推送消息，如廣告、版本更新等。（3）顯示當(dāng)前正在進行的事件，如下載等。

2．通知業(yè)務(wù)流程

通知業(yè)務(wù)流程由通知子系統(tǒng)、通知發(fā)送端、通知訂閱端組成，如圖3-9所示。通知產(chǎn)生于通知發(fā)送端，通過進程間通信（Inter-ProcessCommunication，IPC）發(fā)送到通知子系統(tǒng)，再由通知子系統(tǒng)分發(fā)給通知訂閱端。（1）通知子系統(tǒng)是用于管理和分發(fā)通知的核心模塊，旨在為開發(fā)者提供高效、統(tǒng)一的通知管理能力，同時為用戶提供一致的通知交互體驗。通知子系統(tǒng)通過標(biāo)準(zhǔn)化接口和分布式能力，支持多設(shè)備協(xié)同、跨設(shè)備通知同步及靈活的通知交互方式。（2）通知發(fā)送端可以是第三方應(yīng)用或系統(tǒng)應(yīng)用。開發(fā)者需要重點關(guān)注。（3）通知訂閱端只能為系統(tǒng)應(yīng)用，如通知中心。通知中心默認(rèn)訂閱手機上所有

應(yīng)用對當(dāng)前用戶的通知。開發(fā)者無須關(guān)注。圖3-9通知業(yè)務(wù)流程3.3.2通知發(fā)布

通知發(fā)布主要包括基礎(chǔ)類型通知發(fā)布和進度條類型通知發(fā)布兩大類。

基礎(chǔ)類型通知發(fā)布主要用于發(fā)送短信息、提示信息、廣告推送信息等，支持普通文本類型、長文本類型、多行文本類型和圖片類型。

基礎(chǔ)類型通知發(fā)布的具體步驟如下。（1）導(dǎo)入模塊。（2）請求通知授權(quán)。（3）構(gòu)造NotificationRequest對象并發(fā)布通知。

進度條類型通知發(fā)布主要應(yīng)用于文件下載、事務(wù)處理進度顯示。鴻蒙系統(tǒng)提供了進度條模板，可以設(shè)置模板名、模板數(shù)據(jù)，通過通知子系統(tǒng)發(fā)送到通知欄顯示。

進度條類型通知發(fā)布的具體步驟如下。（1）導(dǎo)入模塊。（2）請求通知授權(quán)。（3）查詢系統(tǒng)是否支持進度條模板。（4）構(gòu)造進度條模板對象并發(fā)布通知。圖3-10通知發(fā)布【項目實現(xiàn)】設(shè)計鬧鐘程序

接到任務(wù)后，黎工程師分析了項目要求，把此項目分成兩個任務(wù)來實現(xiàn)：設(shè)計鬧鐘程序界面和編寫鬧鐘程序代碼。任務(wù)3-1設(shè)計鬧鐘程序界面1．任務(wù)分析

鬧鐘程序的界面需要展示指針表盤和數(shù)字時間，可以添加、修改和刪除鬧鐘，展示鬧鐘列表并可打開和關(guān)閉單個鬧鐘，其中指針表盤可以用動畫來實現(xiàn)。2．代碼實現(xiàn)（1）新建項目project3，在類文件ClockArea.ets中實現(xiàn)展示當(dāng)前時間的效果。（2）在類文件MainViewModel.ets中實現(xiàn)展示鬧鐘列表的效果。（3）在頁面文件Index.ets中整合展示當(dāng)前時間和展示鬧鐘列表的效果，并且添加按鈕以便點擊添加鬧鐘。（4）將程序入口類文件EntryAbility.ets所有內(nèi)容替換。圖3-11鬧鐘程序界面效果3．運行效果

鬧鐘程序界面效果如圖3-11所示。任務(wù)3-2編寫鬧鐘程序代碼1．任務(wù)分析

鬧鐘操作界面分為新增鬧鐘界面和修改鬧鐘界面，在修改鬧鐘界面可刪除鬧鐘。另外，還需提供后臺代理提醒能力。2．代碼實現(xiàn)（1）在類文件DatePickArea.ets中設(shè)置鬧鐘時間，以便添加鬧鐘或者修改鬧鐘。（2）在類文件SettingItem.ets中設(shè)置鬧鐘重復(fù)時間、鬧鐘名稱、重復(fù)次數(shù)和鬧鈴時長。（3）在類文件ReminderService.ets中實現(xiàn)系統(tǒng)后臺代理提醒能力封裝（同時在module.json5中申請ohos.permission.PUBLISH_AGENT_REMINDER權(quán)限），支持新增、修改、刪除系統(tǒng)鬧鐘功能，在設(shè)置、刪除鬧鐘后同步更新到輕量級數(shù)據(jù)庫并刷新主界面。3．運行效果

將上述文件保存后，引入相關(guān)的工具類文件，以及圖片、字符串、顏色、布爾值等文件，保存項目，編譯后在模擬器上運行效果如圖3-12所示，鬧鐘程序成功實現(xiàn)。圖3-12鬧鐘程序運行效果【小結(jié)及提高】

本項目設(shè)計了簡單的鬧鐘程序。通過學(xué)習(xí)本項目，讀者能夠掌握常用的動畫、常見的公共事件和通知，能夠熟練應(yīng)用動畫、公共事件和通知來解決實際問題。本項目實用性很強，還可以進一步拓展，如添加秒表、計時器等。

作為一名勞動者，特別是數(shù)字勞動者，應(yīng)注意以下職業(yè)道德規(guī)范：在處理用戶信息時，應(yīng)嚴(yán)格遵守相關(guān)法律法規(guī)，確保用戶信息的安全和隱私權(quán)益；應(yīng)尊重他人的知識產(chǎn)權(quán)，不得盜用、篡改或非法使用他人的作品、技術(shù)或創(chuàng)意；應(yīng)不斷提升自己的技能和知識水平，適應(yīng)行業(yè)的變化和要求；應(yīng)積極履行社會責(zé)任，關(guān)注環(huán)境保護、公益慈善等社會活動?！卷椖繉嵱?xùn)】1．實訓(xùn)要求

使用通知和基礎(chǔ)組件實現(xiàn)下載文件時發(fā)送通知的功能。2．步驟提示

發(fā)送通知可以這樣做：導(dǎo)入通知模塊，查詢系統(tǒng)是否支持進度條模板；獲取點擊通知拉起應(yīng)用時需要的Want信息；構(gòu)造進度條模板對象，并發(fā)布通知。

文件下載共有4種狀態(tài)，分別為初始化、下載中、暫停下載、下載完成。主要實現(xiàn)以下功能。（1）在初始化狀態(tài)下，點擊下載，啟動Interval定時器，持續(xù)發(fā)送通知。（2）在下載中，點擊暫停，清除定時器，發(fā)送一次通知，顯示當(dāng)前進度。（3）在暫停下載時，點擊繼續(xù)，重新啟動定時器，重復(fù)步驟（2）。（4）下載完成后清除定時器。

進度條通知效果如圖3-13所示。圖3-13進度條通知效果謝謝鴻蒙應(yīng)用開發(fā)項目教程項目4設(shè)計驗證碼登錄程序云林科技為了加強本公司的信息安全管理，將上線一款可以獨立使用的在線管理程序，因此需為此程序開發(fā)一個驗證碼登錄程序。公司經(jīng)理把這個任務(wù)交給技術(shù)部的何工程師，并提出程序要有美觀的界面，可以方便地進行各種操作；要有擴展性，后期可以嵌入公司App；只需手機就可使用等要求。驗證碼登錄程序界面如圖4-1所示。項目導(dǎo)入圖4-1驗證碼登錄程序界面【項目分析】完成本項目需要用到應(yīng)用主窗口、應(yīng)用子窗口、沉浸式窗口及前面介紹的公共事件等知識?！局R目標(biāo)】了解窗口的分類。掌握應(yīng)用主窗口和應(yīng)用子窗口。了解窗口模塊的用途。掌握沉浸式窗口的設(shè)置與應(yīng)用?！灸芰δ繕?biāo)】能夠熟練使用應(yīng)用主窗口和應(yīng)用子窗口。能夠綜合使用沉浸式窗口、應(yīng)用主窗口、應(yīng)用子窗口等解決問題。能夠熟練使用沉浸式窗口?！舅仞B(yǎng)目標(biāo)】樹立正確的勞動觀，崇尚勞動、尊重勞動。4.1窗口開發(fā)概述

在同一塊屏幕上，窗口模塊提供了多個應(yīng)用界面顯示、交互的機制。對應(yīng)用開發(fā)者而言，窗口模塊提供了界面顯示和交互能力。對終端用戶而言，窗口模塊提供了控制應(yīng)用界面的方式。對操作系統(tǒng)而言，窗口模塊提供了不同應(yīng)用界面的組織管理邏輯。4.1.1窗口分類

窗口可分為系統(tǒng)窗口和應(yīng)用窗口兩種基本類型。1．系統(tǒng)窗口

系統(tǒng)窗口指完成系統(tǒng)特定功能的窗口，如音量條、壁紙、通知欄、狀態(tài)欄、導(dǎo)航欄等。2．應(yīng)用窗口

應(yīng)用窗口區(qū)別于系統(tǒng)窗口，指與應(yīng)用顯示相關(guān)的窗口。

根據(jù)顯示內(nèi)容的不同，應(yīng)用窗口又分為應(yīng)用主窗口、應(yīng)用子窗口兩種類型。（1）應(yīng)用主窗口（2）應(yīng)用子窗口4.1.2窗口模塊用途1．提供應(yīng)用和系統(tǒng)界面的窗口對象2．組織不同窗口的顯示關(guān)系（維護不同窗口的疊加層次和位置屬性）3．提供窗口動效4．指導(dǎo)輸入事件分發(fā)

Stage模型之所以成為主推模型，是因為其設(shè)計基于以下思想。（1）Stage模型為復(fù)雜應(yīng)用而設(shè)計。（2）Stage模型支持多設(shè)備和多窗口形態(tài)。（3）Stage模型平衡了應(yīng)用能力和系統(tǒng)管控成本。

窗口存在大小限制。（1）寬度范圍為[320,2560]，單位為vp。