繼續接着上一次https://www.cnblogs.com/webor2006/p/15142553.html鴻蒙開發往下學習，在上一次也主要是對鴻蒙系統跟Android系統進行一個對比的認識，那這次，則需要開始接觸開發鴻蒙應用開發時的一些基礎知識了，就像學習Android時，四大組件、UI是必須要過關的一樣。
開發工具使用技巧：
鴻蒙開發時使用的工具是DevEco-Studio對吧，在真正學習鴻蒙相關基礎知識之前，先來對官方的IDE的常用開發技巧有一個整體的了解，由於我機器使用的是MAC，所以其操作是基於MAC版本的，對於其它平台的應該步驟都類似，另外目前我使用的IDE的版本為：
不同版本其功能菜單也不一定相同。
Ability創建：
新建一個工程：
此時，工程結構為：
可以看到既有Java代碼，也有JS代碼，雖說可以根據自己擅長的開發語言來選擇性的來選擇，但是！！！做為一名合格的鴻蒙開發者來說，我覺得應該都要有所了解，就類似於Android中有Java和Kotlin、IOS中有OC和Swift，對於你接手的項目很有可能兩種語言都並存，如果你只熟悉其中一種語言，可想而知是多么的被動，基於它，我感覺鴻蒙開發相比Android開發來說不一定簡單。
創建各種Ability：
其中Page Ability就類似於Android中的Activity，有JS和Java版本的，而Data Ability和Service Ability官方說明為：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability-overview-0000000000029852
是不是可以這樣理解：Service Ability類似於Android中的Service組件，而Data Ability類似於Android的ContentProvider？其實很多思想都是來自於Android，所以一個Android學鴻蒙也是非常順其自然的，下面則嘗試按着向導創建幾個，看在工程中發生了啥變化。
1、Java版本的Page Ability：
此時工程發現的變化如下【由於我的學習工程被git管理了，所以有新的文件添加都能監聽到】：
其中看到一個比較新鮮的目錄：slice
關於這塊的了解可以參考官網這https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-page-switching-0000000000037999，貌似是頁面導航用的，其中在MainAbility2中打開也會用到它：
具體有啥用，之后再說，接下來再看一下config.json的配置變更：
跟Android的Manifest的效果一樣，組件新建了一定要在里面聲明一下，看一下它跟默認的MainAbility的區別就是在這：
2、Data Ability：
在上面也說過它類似於Android的ContentProvider對吧，那咱們看一下它里面的代碼像不像：
簡直不要太像哦~~然后再看一下在配置中的變化：
3、Service Ability：
它類似於Android中的Service對吧，那咱們新建對比着看一下，像不像：
那這個開關有啥用呢？打開就可以知道了，其實就是不同場景的設定：
然后創建看一下：
再看一下config：
總結：
通過創建不同的Ability，可以發現其實它就可以理解成Android的三大組件（Activity、Service、ContentProvider），而跟Android一樣，對於這些組件的創建，是一定要在config中進行配置聲明的。
添加JS Component和JS Page：
對於想通過JS來進行開發的工程中，支持添加新的JS Component和JS Page：
- JS Component：
在JS工程中，可以存在多個JS Component，例如js目錄下的default文件夾就是一個Js Component：
一個JS FA對應一個JS Component，可以獨立編譯、運行和調試。其中啥是JS FA呢？上官網搜一下：
待未來接觸時再探究，先有一個概念上的了解。 - JS Page：
Page是表示JS FA的一個前台頁面，由JS、HTML和CSS文件組成，是Component的最基本單元，構成了JS FA的每一個界面。
注意：輕量級智能穿戴對應的JS工程是只存在一個JS FA，因此，輕量級智能穿戴的JS工程是不允許創建新的JS Component的，那啥是“輕量級智能穿戴工程”呢？其實就是工程配置中的deviceType這里有它：
添加JS Component：
新建：
此時，多出來的文件有：
此時看一下配置的變化：
運行：
接下來咱們來運行看一下效果，為了跟默認的js component區別，咱們更改一下頁面的內容：
然后運行一下：
目前顯示的是默認的js component：
那如果想默認顯示咱們自己新建的js component呢？ 此時就需要回到MainAbility中設置如下：
此時再運行：
添加JS Page：
新建：
這里看一下新建的文件：
其中有個細節：
此時再看一下config：
運行：
為了能夠加載咱們新建的page2，先更改一下頁面的文案，醒目一點：
然后還需要設置一下：
此時再運行看一下，是否顯示Page2了？
創建Module：
新建Ability Module：
有熟悉Android開發的小伙伴一定知道，如今多Module的開發方式是最為普遍的，也就是：
同樣的，對於鴻蒙工程來說，也是支持新建Module的，如下：
其中Module也跟Android一樣，分為Ability類型【跟Android的Application類型類似】和Library類型的，這里先創建Ability Module：
此時新建的文件有：
新建Library Module：
新建：
新建的文件有：
封裝一個工具類供Module使用：
這里在Library中封裝一個日志輸出的工具類，然后簡單在Module使用一下，其方式跟Android一模一樣，如下：
而由於鴻蒙也是采用gradle來進行項目構建的，所以要在Module中使用這個library也很簡單，依賴一下既可：
然后調用一下：
運行：
接下來運行一下，由於目前咱們工程有兩個Ability類型的Module了：
而我們調用是在entry module中，所以運行時記得在這塊選擇一下：
其中在運行時，又發現一個細節：
Android 的應用叫APP，華為的應用叫HPP，嗯，不錯。
此時運行時，打開日志查看窗口：
成功調用。
Java布局開發指南：
在對整個開發工具的開發技巧有一定的了解之后，接下來則就是應用開發學習的第一關，學會進行界面布局，像Android經典的四大布局一樣，所以學鴻蒙開發也從界面布局開始。
UI框架概述：
前言：
關於這塊的概述可以參考官網：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-overview-0000000000500404，這里為了督促自己詳細閱讀一下它，也為了完整性，當一下搬運工吧，將其貼出來，哪怕照着官網敲一遍文字也是好的，那可能有人會問，這有必要么，純浪費時間浪費表情，每人有每人有學習方式，對我來說，笨人只有笨辦法，總之只要對自己有利無害就成，哪怕是一丁點利也可以。
概述：
應用的Ability在屏幕上將顯示一個用戶界面，該界面用來顯示所有可被用戶查看和交互的內容。
應用中所有的用戶界面元素都是由Component和ComponentContainer對象構成。Component是繪制在屏幕上的一個對象，用戶能與之交互。ComponentContainer是一個用於容納其他Component和ComponentContainer對象的容器。
這里可以看一下具體類：
其中目前下載的sdk木有帶源碼，現在看到的就只是IDE自己反編譯的信息了。
Java UI框架提供了一部分Component和ComponentContainer的具體子類，即創建用戶界面（UI）的各類組件，包括一些常用的組件（比如：文本、按鈕、圖片、列表等）和常用的布局（比如：DirectionalLayout和DependentLayout），這個也可以從系統類繼承體系中來觀察到：
用戶可通過組件進行交互操作，並獲得響應。
所有的UI操作都應該在主線程進行設置【這跟Android一模一樣】。
組件和布局：
用戶界面元素統稱為組件，組件根據一定的層級結構進行組合形成布局。組件在未被添加到布局中時，既無法顯示也無法交互，因此一個用戶界面至少包含一個布局。在UI框架中，具體的布局類通常以XXLayout命名，完整的用戶界面是一個布局，用戶界面中的一部分也可以是一個布局。布局中容納Component與ComponentContainer對象。
Component和ComponentContainer：
- Component：提供內容顯示，是界面中所有組件的基類，開發者可以給Component設置事件處理回調來創建一個可交互的組件。Java UI框架提供了一些常用的界面元素，也可稱之為組件，組件一般直接繼承Component或它的子類，如Text、Image等。【可以類比成Android的View】
- ComponentContainer：作為容器容納Component或ComponentContainer對象，並對它們進行布局。Java UI框架提供了一些標准布局功能的容器，它們繼承自ComponentContainer，一般以“Layout”結尾，如DirectionalLayout、DependentLayout等。【可以類比成Android的ViewGroup】
具體兩者的關系可以參考官方的這么一張圖：
LayoutConfig：
每種布局都根據自身特點提供LayoutConfig供子Component設定布局屬性和參數，通過指定布局屬性可以對子Component在布局中的顯示效果進行約束。例如：“width”、“height”是最基本的布局屬性，它們指定了組件的大小。整體印象可以看下圖：
說了這么多，類比一下Android的概念，瞬間秒懂----LayoutParams。
組件樹：
布局把Component和ComponentContainer以樹狀的層級結構進行組織，這樣的一個布局就稱為組件樹。組件樹的特點是僅有一個根組件，其他組件有且僅有一個父節點，組件之間的關系受到父節點的規則約束。
這就是個純概念，基本上帶UI元素的都有樹的概念，如Flutter。
開發指南：
HarmonyOS提供了Ability（可類比成Android的Activity）和AbilitySlice（可類比成Android的Fragment）兩個基礎類。有界面的Ability綁定了系統的Window進行UI展示，且具有生命周期。AbilitySlice主要用於承載Ability的具體邏輯實現和界面UI，是應用顯示、運行和跳轉的最小單元。AbilitySlice通過setUIContent()為界面設置布局。
它的接口聲明為：
其實在我們新建的工程中就已經有使用過了：
組件需要進行組合，並添加到界面的布局中。在Java UI框架中，提供了兩種編寫布局的方式【跟Android一樣】：
- 在代碼中創建布局：用代碼創建Component和ComponentContainer對象，為這些對象設置合適的布局參數和屬性值，並將Component添加到ComponentContainer中，從而創建出完整界面。
- 在XML中聲明UI布局：按層級結構來描述Component和ComponentContainer的關系，給組件節點設定合適的布局參數和屬性值，代碼中可直接加載生成此布局。
這兩種方式創建出的布局沒有本質差別，在XML中聲明布局，在加載后同樣可在代碼中對該布局進行修改。
組件分類：
根據組件的功能，可以將組件分為布局類、顯示類、交互類三類：
關於這塊的學習就不具體一個個去學了，待之后用到時再現學。
布局單位：
在Android布局元素時，通常的單位使用的是dp、sp對吧，而在HarmonyOS也類似，使用了vp、sp，具體可以參考官網：https://developer.harmonyos.com/cn/docs/design/des-guides/basic-0000001055539104。
虛擬像素單位：vp
它與屏幕的像素的關系是1vp約等於160dp屏幕密度設備上的1px，在不同密度的設備之間，HarmonyOS會針對性的轉換設備間對應的實際像素值，關於屏幕密度有哪些可以參考https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-resource-restriction-0000001090332998：
表示設備的屏幕密度（單位為dpi），取值如下：
- ldpi：表示低密度屏幕（~120dpi）（0.75基准密度）
- mdpi：表示中密度屏幕（~160dpi）（基准密度）
- hdpi：表示高密度屏幕（~240dpi）（1.5基准密度）
- xhdpi：表示加高密度屏幕（~320dpi）（2.0基准密度）
- xxhdpi：表示超超高密度屏幕（~480dpi）（3.0基准密度）
- xxxhdpi：表示超超超高密度屏幕（~640dpi）（4.0基准密度）
其實這關系跟Android的是一樣的，有想了解Android dp跟sp關系的可以參考https://www.cnblogs.com/webor2006/p/4439323.html。
字體像素單位：fp
這個跟Android是一樣的，字體像素(font pixel) 大小默認情況下與 vp 相同，即默認情況下 1 fp = 1vp。如果用戶在設置中選擇了更大的字體，字體的實際顯示大小就會在 vp 的基礎上乘以 scale 系數，即 1 fp = 1 vp * scale。
但是，實際商業APP可能不想讓字體隨着設置的變化而變化，所以，通常對於字體也可以使用vp。
布局實踐：
目標：
接下來，則通過一個很簡單的頁面，分別從代碼角度來xml角度來完成所需的效果，來感受一下和Android的區別，由於最終演練的是一個穿戴設備的小項目，所以這里運行設備改為它：
啟動之后，長這樣：
而咱們演練的效果也非常簡單，就兩個元素：
呃，這也太簡單了吧，是的，先初步感受一下鴻蒙布局既可，為之后的小案例的練習打基礎。
如何通過代碼進行布局？
1、創建項目：
先來創建一個項目，類型選擇穿戴設備：
默認目前是以xml的方式來設置界面布局的：
接下來將其刪掉，改成用純代碼的方式。
2、聲明父布局：
很明顯我們這邊需要一個豎方向的父布局，類似於Android的LinearLayout對吧，在鴻蒙中也有一個類似的布局，叫DirectionalLayout：
3、添加子元素--文本和按鈕：
先來個文本吧：
此時，我得將它添加到父布局了對吧，此時就需要使用到了LayoutConfig【類似於Android的LayoutParams】了，如下：
接下來再添加一個Button：
另外按鈕不是一個圓角背景么，那如何設置呢？如下：
4、給按鈕設置監聽：
接下來給按鈕設置一下監聽：
5、運行：
當然實際對於這么簡單的布局，不可能用純代碼來生成，太麻煩了，這里僅僅就是為了學習而學習，實際用得多的還是下面xml的布局方式。
如何通過xml進行布局？
准備布局：
還是用之前創建工程時的xml布局文件來進行修改：
調整界面，這塊就直接貼出來了，比較簡單【因為我本身就是搞Android滴，所以~~】：
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Text ohos:id="$+id:tv_tips" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="count:0" ohos:text_size="25vp" /> <Button ohos:id="$+id:btn_add" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:padding="5vp" ohos:text="Click me" ohos:text_size="30vp" ohos:top_margin="20vp"/> </DirectionalLayout>
基本上跟Android寫法沒太大的區別，雖說id的寫法，一些屬性可能不一樣，但！！！你有Android的感覺，再加上IDE的智能提示，寫起來還是非常流暢，其中對於布局的預覽是在這塊：
將其設置到Ability中：
這塊感覺就沒有Android便捷了，我明明布局文件是叫“ability_main.xml”，而在代碼中設置是，開頭變成了“Layout”了，如果以布局文件的文件名來進行輸入又提示不出來，不過這個問題也不大，主要是小白還不熟悉鴻蒙的規則，了解了其實也就很順其自然地能敲出了，另外Android里的資源文件都是生成在R中，而鴻蒙是ResourceTable中，這塊需要熟悉一下。
處理按鈕監聽及按鈕圓角設置：
其實也比較簡單，就是先通過ID找到相關元素進行處理既可，直接貼出代碼：
最后運行效果就一樣了，這里就不再演示。
小結：
不管是代碼布局還是xml布局，是不是如果你了解Android，簡直不要太順暢喲，很多用法基本都能直接類比，所以，如果你熟悉Android，那學鴻蒙應該是很輕松的，當然目前基礎知識才剛起步，可能隨着未來的不斷深入，會有很多跟Android不一樣的，這塊就在未來不斷深入過程中再來感受一下。
總結：
接下來應該再學一學JS UI相關的東東的，但是篇幅有限，下次再繼續，其實在學習鴻蒙時，對於每一個知識其實官方都有提供對應的DEMO案例，比如UI這塊，在這塊就有案例推薦：
而總的DEMO git地址為：https://gitee.com/openharmony/app_samples，
