一.概述
工欲善其事，必先利其器。
上一篇博文實現(xiàn)了一個"Hello Harmony"的Demo，今天這篇博文就以"Hello Harmony"?為例，以官網(wǎng)開發(fā)文檔為依據(jù)，從鴻蒙開發(fā)主要的幾個方面入手，詳細了解一下鴻蒙開發(fā)所需的基礎(chǔ)知識。
二.UI框架
HarmonyOS提供了一套UI開發(fā)框架，即方舟開發(fā)框架（ArkUI框架）
1.UI開發(fā)要素
方舟開發(fā)框架提供了多個應(yīng)用UI開發(fā)要素：
? ? ● UI組件：(列表、網(wǎng)格、按鈕、單選框、進度條、文本等)
? ??● 布局計算
? ??● 動畫能力
? ??● UI交互
? ??● 繪制
? ? ● ......
2.兩種開發(fā)范式
(1).兩種開發(fā)范式介紹：
- 基于ArkTS的聲明式開發(fā)范式（簡稱“聲明式開發(fā)范式”）
- 兼容JS的類Web開發(fā)范式（簡稱“類Web開發(fā)范式”）
聲明式開發(fā)范式：基于TypeScript擴展而來的ArkTs語言進行聲明式UI開發(fā)
類Web開發(fā)范式：采用經(jīng)典的HML、CSS、JavaScript三段式開發(fā)方式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?HML搭建布局、CSS描述樣式、JavaScript處理邏輯。? ? ? ? ? ? ? ? ? ? ? ? ? ?
類Web開發(fā)范式很像Web前端開發(fā)，便于快速將Web應(yīng)用改造成鴻蒙應(yīng)用
但是華為鴻蒙官方首推的是聲明式開發(fā)范式
(2).方舟開發(fā)框架示意圖
(3).方舟開發(fā)框架結(jié)構(gòu)圖
(3).兩種開發(fā)范式比較
基于如下下幾個優(yōu)點，鴻蒙官方更推薦使用聲明式開發(fā)范式來構(gòu)建UI：
- 開發(fā)效率：更接近自然語義的編程方式，直觀地描述UI，無需關(guān)心UI繪制和渲染，高效簡潔。
- 應(yīng)用性能：相比類Web開發(fā)范式，聲明式開發(fā)范式無需JS框架進行頁面DOM管理，渲染更新更精簡，占用內(nèi)存更少，性能更佳。
- 發(fā)展趨勢：后續(xù)會作為主推的開發(fā)范式持續(xù)演進，提供更豐富、更強大的能力
三.應(yīng)用模型
1.兩種應(yīng)用模型
HarmonyOS的應(yīng)用模型提供了應(yīng)用程序必備的組件和運行機制，可以基于一套統(tǒng)一的模型進行應(yīng)用開發(fā)。
HarmonyOS發(fā)展過程中，先后提供了兩種應(yīng)用模型：
- FA（Feature Ability）模型：?HarmonyOS API 7開始支持的模型，已經(jīng)不再主推
- Stage模型：?HarmonyOS API 9開始新增的模型，是Harmony目前主推且會長期演進的模型
Stage模型提供了AbilityStage、WindowStage等類作為應(yīng)用組件和Window窗口的“舞臺”，所以被稱為Stage模型。
2.構(gòu)成要素
HarmonyOS應(yīng)用模型的構(gòu)成要素包括：
- 應(yīng)用組件：應(yīng)用的基本組成單位，也是運行入口，提供生命周期回調(diào)
- 應(yīng)用進程模型：定義應(yīng)用進程的創(chuàng)建和銷毀方式，以及進程間的通信方式
- 應(yīng)用線程模型：定義應(yīng)用進程內(nèi)線程的創(chuàng)建和銷毀方式、主線程和UI線程的創(chuàng)建方式、線程間的通信方式
- 應(yīng)用任務(wù)管理模型：定義任務(wù)（Mission）的創(chuàng)建和銷毀方式，以及任務(wù)與組件間的關(guān)系。HarmonyOS應(yīng)用任務(wù)管理由系統(tǒng)應(yīng)用負責(zé)，三方應(yīng)用無需關(guān)注
- 應(yīng)用配置文件：包含應(yīng)用配置信息、應(yīng)用組件信息、權(quán)限信息、開發(fā)者自定義信息等，這些信息在編譯構(gòu)建、分發(fā)和運行階段分別提供給編譯工具、應(yīng)用市場和操作系統(tǒng)使用
四.HarmonyOS APP包結(jié)構(gòu)
HarmonyOS應(yīng)用/服務(wù)發(fā)布形態(tài)為APP Pack（Application Package，簡稱APP）
它由一個或多個HAP（HarmonyOS Ability Package）包以及描述APP Pack屬性的pack.info文件組成。
終端設(shè)備安裝和云端(服務(wù)器)分發(fā)時，都是以HAP為單位進行安裝和分發(fā)的。
一個HAP在工程目錄中對應(yīng)一個Module
它是由代碼、資源、第三方庫及應(yīng)用/服務(wù)配置文件組成，
可以分為?Entry?和?Feature?兩種類型:
-
Entry：應(yīng)用/服務(wù)的主模塊，可獨立安裝運行。
(1).通常用于實現(xiàn)應(yīng)用的入口界面、入口圖標(biāo)、主特性功能等。
(2).一個APP中，對于同一類型的設(shè)備，可以包含一個或多個Entry類型的HAP，如果同一類型的設(shè)備包含多個Entry模塊，需要配置distroFilter分發(fā)規(guī)則，使得應(yīng)用市場在做應(yīng)用的云端分發(fā)時，對該設(shè)備類型下不同規(guī)格的設(shè)備進行精確分發(fā)。 -
Feature：應(yīng)用/服務(wù)的動態(tài)特性模塊。
(1).一個APP可以包含0個或多個Feature類型的HAP（像Android的".jar"和".aar"）
(2).可以配置成按需下載安裝，也可以配置成隨Entry類型HAP一起下載安裝
(3).只有包含Ability的HAP才能夠獨立運行。
module.json5配置文件中通過?type標(biāo)簽?配置“entry”或“feature”類型
Ability是應(yīng)用所具備的能力的抽象
(1).一個應(yīng)用可以包含一個或多個Ability。
(2).Ability分為兩種類型：FA（Feature Ability）和PA（Particle Ability）。
(3).FA/PA是應(yīng)用/服務(wù)的基本組成單元，能夠?qū)崿F(xiàn)特定的業(yè)務(wù)功能。
(4).FA有UI界面，而PA無UI界面。
Bundle：每個Harmony應(yīng)用可以包含多個.hap文件，一個應(yīng)用中的.hap文件合在一起稱為一個Bundle，bundleName是應(yīng)用的唯一標(biāo)識（bundleName標(biāo)簽在app.json5配置文件中）。
需要特別說明的是：在應(yīng)用上架到應(yīng)用市場時，需要把應(yīng)用包含的所有.hap文件（即Bundle）打包為一個.app后綴的文件用于上架，這個.app文件就是App Pack（Application Package），其中也包含了描述App Pack屬性的pack.info文件。
五.Stage模型應(yīng)用程序包結(jié)構(gòu)
1.Moudle
Module是HarmonyOS應(yīng)用/服務(wù)的基本功能單元，包含了源代碼、資源文件、第三方庫及應(yīng)用/服務(wù)配置文件。
每一個Module都可以獨立進行編譯和運行。(和Android中的Moudle一樣)
Module分為“Ability”和“Library”兩種類型:
- Ability類型：編譯后生成HAP（Harmony Ability Package）文件
- Library類型：編譯后生成HAR（Harmony Archive）文件，或者HSP（Harmony Shared Package）
DevEco Studio可以創(chuàng)建一個或者多個Module
2.Module與UIAbility組件關(guān)系示意圖
注：下文中再提到的Module默認指的是“Ability”類型的Module。
3.應(yīng)用程序包結(jié)構(gòu)(Stage模型)
注：下文中提到的HAP包默認指的是Stage模型的HAP包
HAP包結(jié)構(gòu)包括：
- ets、libs、resources等文件夾
- resources.index、module.json、pack.info等文件。
應(yīng)用程序包結(jié)構(gòu)圖示：
- ets目錄：存放應(yīng)用代碼編譯后的字節(jié)碼文件。
- libs目錄：存放庫文件（.so二進制文件）。
- resources目錄：存放應(yīng)用的資源文件（字符串、圖片等）
- resources.index：資源索引表，由IDE編譯工程時生成。
- module.json：HAP配置文件，內(nèi)容由工程配置中的module.json5和app.json5組成
-
pack.info：Bundle中用于描述每個HAP屬性的文件
? ? ? ? ? ? ? ? ? ?例如：app中的bundleName和versionCode信息、module中的name、type和? ? ? ? ? ? ? ? ? ? ? ? ? ?abilities等信息，編譯生成Bundle包時自動生成。
六.Stage模型ArkTS工程目錄結(jié)構(gòu)
以上一篇博客的"Hello Harmony"?Demo為例，一個Stage模型ArkTS工程目錄詳細結(jié)構(gòu)如下：
七.resources目錄
鴻蒙應(yīng)用的resources目錄根據(jù)所包含的資源文件的類型不同，放置在不同的子目錄下
resources目錄包括三大類目錄：
- base目錄，默認存在
- 限定詞目錄，開發(fā)者自行創(chuàng)建
- rawfile目錄，原始文件目錄
資源文件查找順序：
- 優(yōu)先從匹配的限定詞目錄中尋找
- 沒有匹配的限定詞目錄，或者在限定詞目錄中找不到，就會去base目錄中找。
rawfile是原始文件目錄，不會根據(jù)設(shè)備狀態(tài)去匹配不同的資源
stage模型多工程情況下共有的資源文件放到AppScope下的resources目錄。
資源目錄示例：
八.ArkTS代碼組成拆解
點擊按鈕，文本內(nèi)容從“Hello World”變?yōu)?strong>“Hello ArkUI”功能代碼拆解
ArkTS 代碼段的基本組成：
九.布局概述
1.布局結(jié)構(gòu)
一個常見的頁面結(jié)構(gòu)如下所示：
Page表示頁面的根節(jié)點，
Column、Row等元素為系統(tǒng)組件，可以互換
Text、Image、List可以是其他任意系統(tǒng)組件或自定義組件
2.布局元素的組成
布局相關(guān)的容器組件可形成對應(yīng)的布局效果。
- 虛線部分：組件布局邊界
- 藍色區(qū)域：組件區(qū)域
- 黃色區(qū)域：組件內(nèi)容區(qū)
- 綠色方塊：組件內(nèi)容
3.如何選擇布局
聲明式UI提供了以下8種常見布局:
| 布局 |
應(yīng)用場景 |
|---|---|
| 線性布局 Row、Column |
需要線性排列時優(yōu)先考慮此布局。 |
| 層疊布局 Stack |
需要有堆疊效果時優(yōu)先考慮此布局 |
| 彈性布局 Flex |
與線性布局類似，但是默認能夠使子組件壓縮或拉伸。 子組件需要計算拉伸或壓縮比例時優(yōu)先使用此布局。 |
| 相對布局RelativeContainer |
相對布局的布局方式更為自由。 通過在子組件上設(shè)置錨點規(guī)則（AlignRules）使子組件能夠?qū)⒆约涸?strong>橫軸、縱軸中的位置與容器或容器內(nèi)其他子組件的位置對齊。 較復(fù)雜布局推薦使用 |
| 柵格布局 GridRow、GridCol |
柵格通過將空間分割為有規(guī)律的柵格。 推薦手機、大屏、平板等不同設(shè)備，內(nèi)容相同但布局不同時使用。 |
| 媒體查詢@ohos.mediaquery |
媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備不同狀態(tài)修改應(yīng)用的樣式。 例如屏幕發(fā)生動態(tài)改變時更新應(yīng)用的頁面布局。 |
| 列表? List |
列表適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集，例如圖片和文本。 |
| 網(wǎng)格 Grid |
網(wǎng)格布局可以控制元素所占的網(wǎng)格數(shù)量、設(shè)置子組件橫跨幾行或者幾列， 當(dāng)網(wǎng)格容器尺寸發(fā)生變化時，所有子組件以及間距等比例調(diào)整。 |
| 輪播 Swiper |
輪播組件通常用于實現(xiàn)廣告輪播、圖片預(yù)覽、可滾動應(yīng)用等。 |
4.布局位置
position、offset等屬性影響了布局容器相對于自身或其他組件的位置。
| 定位能力 | 實現(xiàn)方式 |
| 絕對定位 | 使用position實現(xiàn)絕對定位，控件位置相對無法自適應(yīng) |
| 相對定位 | 使用offset可以實現(xiàn)相對定位，控件位置相對可以自適應(yīng) |
十.DevEco Studio實用
DevEco Studio和Android Studio很像，他們都是基于IntelliJ IDEA開發(fā)工具演變而來。
但是DevEco Studio有一些和Android Studio有區(qū)別有很實用的地方。
1.Previewer
DevEco Studio有一個Previewer功能，在開發(fā)過程中能實時看到ts文件實現(xiàn)的UI效果。AndroidStudio針對XML布局文件也有個類似的Design功能，但是只能看到布局控件的區(qū)域排布，DevEco Studio的Previewer能直接實現(xiàn)最終UI效果和邏輯呈現(xiàn)，并且跟隨代碼實時更新
2.低代碼UI開發(fā)
DevEco Studio有一個低代碼開發(fā)UI的功能，實現(xiàn)了在開發(fā)過程中實時拖動控件進行UI開發(fā)。
這項功能的開關(guān)需要在工程創(chuàng)建時選擇
打開Enable Super Visual，表示使用低代碼開發(fā)功能開發(fā)應(yīng)用/服務(wù)。
同步完成后，工程目錄中自動生成低代碼目錄結(jié)構(gòu)。
index.js：低代碼頁面的邏輯描述文件，定義了頁面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的js文件。
index.visual：visual文件存儲低代碼頁面的數(shù)據(jù)模型，雙擊該文件即可打開低代碼頁面，進行可視化開發(fā)設(shè)計。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的visual文件。
打開“index.visual”文件，即可進行頁面的可視化布局設(shè)計與開發(fā)
十一.結(jié)束語
鴻蒙應(yīng)用開發(fā)的基礎(chǔ)知識就先講解到這里文章來源：http://www.zghlxwxcb.cn/news/detail-751339.html
后續(xù)隨著HarmonyOS學(xué)習(xí)的深入，本博文會持續(xù)更新鴻蒙開發(fā)需要掌握的基礎(chǔ)知識點。文章來源地址http://www.zghlxwxcb.cn/news/detail-751339.html
到了這里，關(guān)于鴻蒙：Harmony開發(fā)基礎(chǔ)知識詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
