「鴻蒙開發(fā) 3」華為鴻蒙應(yīng)用開發(fā)的低代碼（Super Visual）開發(fā)方式

開發(fā)前可以了解下鴻蒙： [鴻蒙開發(fā) 序]華為鴻蒙操作系統(tǒng)（HarmonyOS）簡介及開發(fā)環(huán)境搭建

創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元汾陽做網(wǎng)站,已為上家服務(wù),為汾陽各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

開發(fā)前的準(zhǔn)備：「鴻蒙開發(fā) 1」華為鴻蒙應(yīng)用集成開發(fā)環(huán)境DevEco Studio安裝和設(shè)置

了解鴻蒙應(yīng)用開發(fā)的基本開發(fā)流程：「鴻蒙開發(fā) 2」第一個(gè)華為鴻蒙（HarmonyOS）應(yīng)用程序（App）

本章目標(biāo)：

1 了解華為鴻蒙應(yīng)用開發(fā)的可視化（低代碼）方式

2 通過構(gòu)建一個(gè)簡單的具有頁面跳轉(zhuǎn)功能的應(yīng)用

低代碼開發(fā)方式，即通過可視化界面開發(fā)方式快速構(gòu)建布局、編輯UI界面，可有效降低用戶的上手成本并提升用戶構(gòu)建UI界面的效率。

1 打開DevEco Studio，創(chuàng)建一個(gè)新工程，選擇支持Phone / Tablet / Wearable（手機(jī) / 平板 / s可穿戴）的模板，我們在此直接選擇Empty Ability

Project name工程名稱填SuperVisual

Development mode開發(fā)方式選擇Super Visual

其它的可以使用默認(rèn)設(shè)置，點(diǎn)擊完成，進(jìn)入編輯界面

1 在Project（項(xiàng)目）窗口，刪除工程運(yùn)行默認(rèn)的入口文件夾：“entry src main js default pages index”文件夾

2 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標(biāo)右鍵，選擇“New JS Visual”

JS visual name填first，點(diǎn)擊完成，進(jìn)入編輯界面

創(chuàng)建完成后，可以看到“entry src main supervisual default pages page page.visual”的文件目錄結(jié)構(gòu)

3 第一個(gè)頁面內(nèi)有一個(gè)容器、文本和一個(gè)按鈕，通過Div、Text和Button組件來實(shí)現(xiàn)

（1）分別選中first.visual畫面中的Text、Div組件，單擊鼠標(biāo)右鍵，選擇Delete刪除

（2）選中UI Control中的Div組件，將其拖至畫布

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置Div組件的高度Height為100%，使其占滿屏幕

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Flex），設(shè)置Div組件的FlexDirection樣式為column，使Div的主軸垂直；設(shè)置Div組件的JustifyContent樣式為center，使得其子組件在主軸上居中顯示；設(shè)置Div組件的AlignItems樣式為center，使得其子組件在交叉軸上居中顯示

（3）選中UI Control中的Text組件，將其拖至Div組件的中央?yún)^(qū)域

點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Text組件的Content屬性為 “ Hello World ”

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置Text組件的寬（width）為100%，高（height）為100px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為60px，使得其文字放大；設(shè)置組件的TextAlign樣式為center，使得組件文字居中顯示

（4）選中UI Control中的Button組件，將其拖至Text組件下面

點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Button組件的Value屬性為 “ Next ”，

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置按的寬（width）為40%，高（height）為60px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為40px

至此，第一個(gè)頁面創(chuàng)建完成

我們可以在預(yù)覽窗口中看效果，點(diǎn)擊右側(cè)邊欄的Preview打開預(yù)覽窗口

1 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標(biāo)右鍵，選擇“New JS Visual”

Visual配置界面，JS visual name填second，回車（Enter鍵）或者點(diǎn)擊完成，進(jìn)入編輯界面

2 第二個(gè)頁面中有一個(gè)容器和文本，通過Div、Text組件實(shí)現(xiàn)，現(xiàn)在編輯器已經(jīng)為我們創(chuàng)建好了，我們就來修改下它們的屬性（你也可以刪除原有的自己創(chuàng)建，具體步驟參考本章第二節(jié)“二 創(chuàng)建第一個(gè)頁面”）。

選中Text組件，點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Text組件的Content屬性為 “ Hi，I'm always here. ”

點(diǎn)擊右側(cè)屬性樣式欄中的通用圖標(biāo)（General），設(shè)置組件的寬（width）為100%，高為60px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為36px，TextAlign樣式為center

這樣我們的第二個(gè)頁面創(chuàng)建成功了

1 在Project窗口，打開工程中的“entry src main js default pages first first.js”， 導(dǎo)入router模塊，頁面路由router根據(jù)頁面的uri來找到目標(biāo)頁面，從而實(shí)現(xiàn)跳轉(zhuǎn)。示例代碼如下：

2 打開或者切換到first.visual頁面，選中畫布上的Button組件，點(diǎn)擊右側(cè)屬性樣式欄中的事件圖標(biāo)（Events），鼠標(biāo)點(diǎn)擊Click事件的輸入框，選擇launch事件

3 在預(yù)覽窗口中查看項(xiàng)目效果，點(diǎn)擊Next按鈕后發(fā)現(xiàn)我們的頁面成功跳轉(zhuǎn)了。

到此，本章的目標(biāo)就完成了。

鴻蒙OS 3.0界面信息流出：超級桌面來襲，并帶來多項(xiàng)改動(dòng)

華為鴻蒙系統(tǒng)的發(fā)展速度還是蠻快的，盡管從正式發(fā)布到現(xiàn)在還沒有幾年的時(shí)間，但是其覆蓋面積已經(jīng)遠(yuǎn)遠(yuǎn)超過很多用戶的認(rèn)知，并且還在進(jìn)一步的增長過程中。

而且開源鴻蒙OS系統(tǒng)的覆蓋面積也在逐漸增加中，很多家電設(shè)備都進(jìn)行了使用體驗(yàn)，并且可以輕松和華為手機(jī)進(jìn)行互聯(lián)，這就是生態(tài)方面的普及。

重點(diǎn)是鴻蒙系統(tǒng)的普及速度也不慢，如今已經(jīng)更新到了鴻蒙OS 3.0版本，盡管還只是Beta版，但已經(jīng)有很多花粉按捺不住想提前進(jìn)行使用體驗(yàn)了。

遺憾的是，鴻蒙OS 3.0的保密性非常強(qiáng)，導(dǎo)致很多用戶都沒有辦法第一時(shí)間了解到有哪些變化，但世界上沒有密不透風(fēng)的墻，一些細(xì)節(jié)還是得到了爆料。

比如帶來了超級桌面，相比普通桌面來說，可在其他設(shè)備上使用手機(jī)桌面應(yīng)用，也就是互聯(lián)方面的一個(gè)大提升，起碼不會顯得特別單調(diào)。

比如互聯(lián)到其他產(chǎn)品之后，大屏幕可以操作手機(jī)應(yīng)用，軟件界面會根據(jù)屏幕大小進(jìn)行自我調(diào)節(jié)、還可以實(shí)現(xiàn)多任務(wù)處理和分屏操作，離開時(shí)自動(dòng)退出等。

相比于簡單的互聯(lián)和無縫應(yīng)用流轉(zhuǎn)，超級桌面帶來的功能性確實(shí)很多，而且以華為問界M7的車機(jī)系統(tǒng)來說，互聯(lián)之后的超級桌面還支持動(dòng)態(tài)調(diào)整、窗口大小等幫助顯示地圖橫屏，確保導(dǎo)航功能的應(yīng)用完整。

重點(diǎn)是副駕駛用戶也可以連接超級桌面實(shí)現(xiàn)應(yīng)用生態(tài)共享，就算不是同賬號手機(jī)也可以連接后通過中控屏幕進(jìn)行導(dǎo)航、聽音樂等操作，進(jìn)一步保障駕駛安全。

由此可見，鴻蒙OS 3.0版本所帶來的優(yōu)勢還是蠻大的，相信連接到PC端也會有類似的情況出現(xiàn)。

其次，更新到鴻蒙OS 3.0版本之后，設(shè)置右上角可以直接跳轉(zhuǎn)超級終端，這對于華為手機(jī)來說確實(shí)變得更方便，不用下拉狀態(tài)欄，又或者是其他的操作來使用這個(gè)功能。

因?yàn)槌壗K端一直都是非常給力的一項(xiàng)功能，也是鴻蒙系統(tǒng)的主打功能，便捷性的操作總會讓日常使用體驗(yàn)變得事半功倍。

值得一提的是，想要使用華為超級終端功能，還是需要登錄華為賬號才可以，不然的話，是沒有辦法進(jìn)行使用此功能。

還有，華為目前所有的工作都是為了全新的鴻蒙OS 3.0做準(zhǔn)備，比如要讓設(shè)備開發(fā)者使用同一種語言，只有這樣才能夠加強(qiáng)生態(tài)方面的體驗(yàn)。

同時(shí)還要讓華為的多設(shè)備協(xié)同更加智能、讓開發(fā)者更高效的為鴻蒙生態(tài)開發(fā)跨設(shè)備的應(yīng)用等，以此來讓鴻蒙專屬應(yīng)用變得更多，并且可以不用被吐槽“套殼”安卓系統(tǒng)。

畢竟作為我國目前唯一的智能手機(jī)操作系統(tǒng)、唯一的萬物互聯(lián)操作系統(tǒng)，其分量確實(shí)很沉重，這也是期待值非常給力的關(guān)鍵要素。

另外要說的是，除了以上的改動(dòng)之外，還有非常多的改動(dòng)，比如延續(xù)了全場景智慧體驗(yàn)，在交互設(shè)計(jì)、多設(shè)備互聯(lián)互通、性能、用戶關(guān)懷等方面帶來了全面的提升。

同時(shí)UI設(shè)計(jì)方面也發(fā)生了一些改變，對于一直使用鴻蒙系統(tǒng)的用戶來說，前期可能還是需要進(jìn)行適應(yīng)，不然的話還會有一些操作不適應(yīng)的感覺。

值得一提的是，鴻蒙OS 3.0此前傳出要剔除谷歌貢獻(xiàn)代碼，但有消息稱新版本兼容安卓12底層，對此確實(shí)要打上一個(gè)問號。

最后想說的是，華為目前的壓力很大，除了系統(tǒng)之外，也要面臨芯片方面的壓力，更何況還要去發(fā)布新機(jī)來讓用戶保持新鮮感。

鴻蒙2.0的UI界面與續(xù)航情況與安卓到底有哪些差別？

昨天晚上8點(diǎn)，華為正式發(fā)布了鴻蒙2.0系統(tǒng)，打破了我國沒有自己的系統(tǒng)的 歷史 。

一、升級方法

打開我的華為，選擇升級嘗鮮，下載升級描述。

二、使用感覺

UI界面上感覺變化不大，原先安裝好的資料和APP都能正常使用。

大家最關(guān)心的耗電和使用流暢度也沒有發(fā)現(xiàn)有什么不一樣。

鴻蒙系統(tǒng)UI設(shè)計(jì)尺寸規(guī)范？

這個(gè)要看你的ui界面是要適用哪個(gè)平臺？

IOS界面，例如iphone6：

1、界面尺寸大小是：750x1334px。

2、狀態(tài)欄(status bar)：就是電量條，其高度為：40px;

3、導(dǎo)航欄(navigation)：就是頂部條，其高度為：88px;

4、主菜單欄(submenu，tab)：就是標(biāo)簽欄，底部條，其高度為：98px;

5、內(nèi)容區(qū)域(content)：就是屏幕中間的區(qū)域，其高度為：1334px-40px-88px-98px=1108px

iPad的設(shè)計(jì)尺寸，例如iPad Mini：

1、界面尺寸大小是：1024×768 px

2、狀態(tài)欄(status bar)：就是電量條，其高度為：20px;

3、導(dǎo)航欄(navigation)：就是頂部條，其高度為：44px;

4、主菜單欄(submenu，tab)：就是標(biāo)簽欄，底部條，其高度為：49px;

5、內(nèi)容區(qū)域(content)：就是屏幕中間的區(qū)域，其高度為：768px-20px-44px-49px=655px

Android的圖標(biāo)尺寸

一般屏幕大小有：

小米、索尼、華為：1080×1920 px

OPPO R3：720×1280 px

2021-01-25鴻蒙開發(fā)（五）

Ability

Ability是應(yīng)用所具備能力的抽象

2.onActive()

Page會在進(jìn)入INACTIVE狀態(tài)后來到前臺，然后系統(tǒng)調(diào)用此回調(diào)。Page在此之后進(jìn)入ACTIVE狀態(tài)，該狀態(tài)是應(yīng)用與用戶交互的狀態(tài)。Page將保持在此狀態(tài)，除非某類事件發(fā)生導(dǎo)致Page失去焦點(diǎn)，比如用戶點(diǎn)擊返回鍵或?qū)Ш降狡渌鸓age。當(dāng)此類事件發(fā)生時(shí)，會觸發(fā)Page回到INACTIVE狀態(tài)，系統(tǒng)將調(diào)用onInactive()回調(diào)。此后，Page可能重新回到ACTIVE狀態(tài)，系統(tǒng)將再次調(diào)用onActive()回調(diào)。因此，開發(fā)者通常需要成對實(shí)現(xiàn)onActive()和onInactive()，并在onActive()中獲取在onInactive()中被釋放的資源。

3.onInactive()

當(dāng)Page失去焦點(diǎn)時(shí)，系統(tǒng)將調(diào)用此回調(diào)，此后Page進(jìn)入INACTIVE狀態(tài)。開發(fā)者可以在此回調(diào)中實(shí)現(xiàn)Page失去焦點(diǎn)時(shí)應(yīng)表現(xiàn)的恰當(dāng)行為。

4.onBackground()

如果Page不再對用戶可見，系統(tǒng)將調(diào)用此回調(diào)通知開發(fā)者用戶進(jìn)行相應(yīng)的資源釋放，此后Page進(jìn)入BACKGROUND狀態(tài)。開發(fā)者應(yīng)該在此回調(diào)中釋放Page不可見時(shí)無用的資源，或在此回調(diào)中執(zhí)行較為耗時(shí)的狀態(tài)保存操作。

5.onForeground()

處于BACKGROUND狀態(tài)的Page仍然駐留在內(nèi)存中，當(dāng)重新回到前臺時(shí)（比如用戶重新導(dǎo)航到此Page），系統(tǒng)將先調(diào)用onForeground()回調(diào)通知開發(fā)者，而后Page的生命周期狀態(tài)回到INACTIVE狀態(tài)。開發(fā)者應(yīng)當(dāng)在此回調(diào)中重新申請?jiān)趏nBackground()中釋放的資源，最后Page的生命周期狀態(tài)進(jìn)一步回到ACTIVE狀態(tài)，系統(tǒng)將通過onActive()回調(diào)通知開發(fā)者用戶。

6.onStop()

系統(tǒng)將要銷毀Page時(shí)，將會觸發(fā)此回調(diào)函數(shù)，通知用戶進(jìn)行系統(tǒng)資源的釋放。銷毀Page的可能原因包括以下幾個(gè)方面：

用戶通過系統(tǒng)管理能力關(guān)閉指定Page，例如使用任務(wù)管理器關(guān)閉Page。

用戶行為觸發(fā)Page的terminateAbility()方法調(diào)用，例如使用應(yīng)用的退出功能。

配置變更導(dǎo)致系統(tǒng)暫時(shí)銷毀Page并重建。

系統(tǒng)出于資源管理目的，自動(dòng)觸發(fā)對處于BACKGROUND狀態(tài)Page的銷毀。

AbilitySlice生命周期

AbilitySlice生命周期回調(diào)與Page的相應(yīng)回調(diào)類似，因此不再贅述。由于AbilitySlice承載具體的頁面，開發(fā)者必須重寫AbilitySlice的onStart()回調(diào)，并在此方法中通過setUIContent()方法設(shè)置頁面。

Page與AbilitySlice生命周期關(guān)聯(lián)

當(dāng)AbilitySlice處于前臺且具有焦點(diǎn)時(shí)，其生命周期狀態(tài)隨著所屬Page的生命周期狀態(tài)的變化而變化。當(dāng)一個(gè)Page擁有多個(gè)AbilitySlice時(shí)，例如：MyAbility下有FooAbilitySlice和BarAbilitySlice，當(dāng)前FooAbilitySlice處于前臺并獲得焦點(diǎn)，并即將導(dǎo)航到BarAbilitySlice，在此期間的生命周期狀態(tài)變化順序?yàn)椋?/p>

對應(yīng)兩個(gè)slice的生命周期方法回調(diào)順序?yàn)椋?/p>

FooAbilitySlice.onInactive() -- BarAbilitySlice.onStart() -- BarAbilitySlice.onActive() -- FooAbilitySlice.onBackground()

在整個(gè)流程中，MyAbility始終處于ACTIVE狀態(tài)。但是，當(dāng)Page被系統(tǒng)銷毀時(shí)，其所有已實(shí)例化的AbilitySlice將聯(lián)動(dòng)銷毀，而不僅是處于前臺的AbilitySlice。

鴻蒙OS 2.0 開啟推送，UI界面大改，開機(jī)不再顯示安卓，終于等到了

華為啟用鴻蒙OS系統(tǒng)的消息越來越多，花粉們也越來越期待。而華為也早已經(jīng)對鴻蒙OS系統(tǒng)有所布局，早在 HarmonyOS 2.0 開發(fā)者大會上，余承東就表示過： 4月將全面開始商用鴻蒙OS系統(tǒng)。 這次 鴻蒙OS 2.0 Beta版本開啟推送， UI界面大改，開機(jī)不再顯示安卓 ，也代表鴻蒙OS系統(tǒng)真的要全面商用了。

華為這次推送的是 HarmonyOS 2.0 的開發(fā)者Beta版本，目前已可申請招募資格，當(dāng)前鴻蒙OS 2.0 版本可支持升級的版本為： 華為 Mate X2、華為 Mate 40、Mate 40E、Mate 40 Pro、Mate 40 Pro+、Mate 40 Pro Rs 保時(shí)捷版、華為 Mate 30 4G、Mate 30 5G、Mate 30E Pro 5G、Mate 30 Rs 保時(shí)捷版、 華為 Matepad Pro、Matepad Pro 5G、華為智慧屏S Pro。

鴻蒙OS 2.0 的UI界面大改，通知欄界面、右劃控制中心等等均有不同程度的UI升級，通知欄不再是以前枯燥的界面，單獨(dú)劃出音樂、WLAN和藍(lán)牙區(qū)域，顯得更加靈動(dòng)。從桌面區(qū)域也能看出，鴻蒙OS 2.0 也支持類似 IOS 14 的小組件功能，整體 UI 變化較大，體驗(yàn)更好，界面使用起來更加靈動(dòng)自然。

這次的 鴻蒙OS 2.0 已經(jīng)基本看不到安卓的影子，開機(jī)不再顯示 by Android（安卓）字樣，只顯示華為與 HarmonyOS 的LOGO。得益于 鴻蒙OS 2.0 的優(yōu)化，手機(jī)的功耗、流暢度與發(fā)熱得到了更好的控制，系統(tǒng)擺脫安卓后內(nèi)存優(yōu)化更好，流暢度可以和IOS對比。

其實(shí) 鴻蒙OS系統(tǒng) 的適配計(jì)劃范圍非常廣，幾乎覆蓋90%的手機(jī)機(jī)型（目前暫定搭載麒麟710 處理器以上的機(jī)型，都會升級鴻蒙OS系統(tǒng)，并且也包括獨(dú)立出去的榮耀手機(jī)），這次 HarmonyOS 2.0 的開發(fā)者Beta版本推送，也代表華為對 鴻蒙OS系統(tǒng) 的認(rèn)可，接下來鴻蒙OS系統(tǒng)的適配應(yīng)該會更加的快，可以期待一下。

本文標(biāo)題：鴻蒙ui界面開發(fā),鴻蒙ui桌面怎么設(shè)置
鏈接URL：http://m.rwnh.cn/article44/phjohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)