什么是低代碼開(kāi)發(fā)？低代碼開(kāi)發(fā)主要特點(diǎn)有哪些？如何利用低代碼開(kāi)發(fā)原子化服務(wù)？本文帶你一探究竟~

一、什么是HarmonyOS低代碼開(kāi)發(fā)？

低代碼開(kāi)發(fā)，顧名思義，就是用更少的代碼量，完成更高效的應(yīng)用交付。低代碼開(kāi)發(fā)讓更多的人可以參與到應(yīng)用程序開(kāi)發(fā)當(dāng)中，不僅是具有專業(yè)編程能力的程序員，非技術(shù)背景的業(yè)務(wù)人員同樣可以構(gòu)建應(yīng)用；對(duì)于大型企業(yè)來(lái)講，低代碼開(kāi)發(fā)還可以降低IT團(tuán)隊(duì)培訓(xùn)、技術(shù)部署的初始成本。

二、HarmonyOS低代碼開(kāi)發(fā)界面介紹

如圖1所示，低代碼開(kāi)發(fā)界面由UI控件欄、組件樹(shù)、功能面板、畫布、屬性樣式欄組成。

① UI控件欄：可以將相應(yīng)的組件選中并拖動(dòng)到畫布（Canvas）中，實(shí)現(xiàn)控件的添加。

② 組件樹(shù)：在低代碼開(kāi)發(fā)界面中，可以方便開(kāi)發(fā)者直觀地看到組件的層級(jí)結(jié)構(gòu)、摘要信息以及錯(cuò)誤提示。開(kāi)發(fā)者可以通過(guò)選中組件樹(shù)中的組件（畫布中對(duì)應(yīng)的組件被同步選中），實(shí)現(xiàn)畫布內(nèi)組件的快速定位；點(diǎn)擊組件后的圖標(biāo)，可以隱藏/顯示相應(yīng)的組件。

③ 功能面板：包括常用的畫布縮小放大、撤銷、顯示/隱藏組件虛擬邊框、設(shè)備切換、模式切換、可視化布局界面一鍵轉(zhuǎn)換為hml和css文件等。

④ 畫布：開(kāi)發(fā)者可在此區(qū)域?qū)M件進(jìn)行拖拽、拉伸等可視化操作，構(gòu)建UI界面布局效果。

⑤ 屬性樣式欄：選中畫布中的相應(yīng)組件后，在右側(cè)屬性樣式欄可以對(duì)該組件的屬性樣式進(jìn)行配置。

三、HarmonyOS低代碼開(kāi)發(fā)的主要特點(diǎn)

HarmonyOS低代碼開(kāi)發(fā)利用可視化“拖拉拽”的開(kāi)發(fā)方式替代傳統(tǒng)的編碼開(kāi)發(fā)，免去了開(kāi)發(fā)人員手動(dòng)編寫平臺(tái)相關(guān)代碼，減輕了非技術(shù)開(kāi)發(fā)人員的壓力，通過(guò)編寫少量代碼即可完成UI界面的開(kāi)發(fā)，可有效降低開(kāi)發(fā)者的上手成本并提升開(kāi)發(fā)者構(gòu)建UI界面的效率。接下來(lái)我們一起看看HarmonyOS低代碼開(kāi)發(fā)平臺(tái)有哪些特點(diǎn)：

1

豐富的組件和模板

如圖2所示，低代碼開(kāi)發(fā)是基于一個(gè)個(gè)組件的，目前已支持20個(gè)組件，同時(shí)IDE還提供了一系列常用場(chǎng)景下的模板，幫助開(kāi)發(fā)者快速上手。

2

高效的可視化設(shè)計(jì)

HarmonyOS低代碼開(kāi)發(fā)針對(duì)UI界面開(kāi)發(fā)提供了一整套的可視化設(shè)計(jì)工具。（1）拖拽組件時(shí)顯示輔助條如圖3所示，當(dāng)開(kāi)發(fā)者拖拽ListItem組件時(shí)，只有移動(dòng)到配套的List組件中，才會(huì)出現(xiàn)可以放置組件的輔助條，避免組件錯(cuò)配問(wèn)題。開(kāi)發(fā)者在對(duì)組件“拖拉拽”時(shí)會(huì)自動(dòng)生成代碼，減少了開(kāi)發(fā)者在代碼編寫中常見(jiàn)的問(wèn)題，比如拼寫錯(cuò)誤、標(biāo)簽閉環(huán)等。

（2）縮放和參數(shù)調(diào)整。

如圖4所示，可以直接拖拽組件實(shí)現(xiàn)組件縮放，也可以如圖5通過(guò)屬性欄來(lái)給每個(gè)組件做詳細(xì)的參數(shù)配置。

HarmonyOS低代碼開(kāi)發(fā)支持復(fù)制、剪切、粘貼、撤銷、重做等常用的功能。

針對(duì)前端開(kāi)發(fā)常用的顏色調(diào)整，HarmonyOS低代碼開(kāi)發(fā)提供了一個(gè)顏色選擇器，方便開(kāi)發(fā)者對(duì)組件或字體的顏色等作出調(diào)整，還會(huì)記錄歷史選用過(guò)的顏色。

針對(duì)image組件，或者其他組件的背景圖片，HarmonyOS低代碼開(kāi)發(fā)提供了圖片資源選擇器，方便開(kāi)發(fā)者選擇圖片，避免手動(dòng)輸入圖片文件路徑的麻煩。

3

所見(jiàn)即所得

HarmonyOS低代碼開(kāi)發(fā)提供所見(jiàn)即所得的能力，如圖6所示，當(dāng)開(kāi)發(fā)者在低代碼編輯器上修改時(shí)，所看到的效果和預(yù)覽器上的效果相同，這樣開(kāi)發(fā)者就無(wú)需頻繁地在代碼與預(yù)覽之間切換，只需專注于前端頁(yè)面的開(kāi)發(fā)，更加高效便捷。

4

多設(shè)備開(kāi)發(fā)

針對(duì)HarmonyOS面向多設(shè)備的特性，低代碼編輯器還支持多屏流轉(zhuǎn)、多端部署。如圖7所示，開(kāi)發(fā)者在低代碼開(kāi)發(fā)平臺(tái)可以非常方便地進(jìn)行多設(shè)備開(kāi)發(fā)及橫豎屏切換。同時(shí)，開(kāi)發(fā)者也可以選擇針對(duì)某一個(gè)設(shè)備的顯示效果以可視化的形式進(jìn)行調(diào)整，而不影響到其他設(shè)備，極大提高了多設(shè)備頁(yè)面開(kāi)發(fā)的效率。

5

邏輯解析和關(guān)聯(lián)

在視覺(jué)頁(yè)面調(diào)整完成后，如果想讓UI界面具有動(dòng)態(tài)化能力，就必須對(duì)其中的數(shù)據(jù)、事件進(jìn)行綁定。如圖8所示，低代碼開(kāi)發(fā)平臺(tái)復(fù)用了HarmonyOS應(yīng)用開(kāi)發(fā)框架的接口，自動(dòng)分析開(kāi)發(fā)者在代碼中編寫的數(shù)據(jù)與事件，以便讓開(kāi)發(fā)者對(duì)組件進(jìn)行數(shù)據(jù)和事件綁定，讓頁(yè)面真正能動(dòng)態(tài)化起來(lái)。

四、HarmonyOS低代碼開(kāi)發(fā)示例

接下來(lái)給大家演示用低代碼開(kāi)發(fā)一個(gè)運(yùn)動(dòng)健康頁(yè)面的原子化服務(wù)：

看完視頻，是不是覺(jué)得超簡(jiǎn)單？只需通過(guò)“拖拉拽”就可以輕松完成UI界面開(kāi)發(fā)，就算是沒(méi)有代碼基礎(chǔ)的小白也可以輕松上手，還在等什么，趕緊打開(kāi)IDE快速開(kāi)發(fā)你的UI界面吧。

HarmonyOS低代碼開(kāi)發(fā)未來(lái)還將支持自定義組件，更多功能特性，敬請(qǐng)期待！

責(zé)任編輯：haq