一

什么是低代碼開(kāi)發(fā)

在了解低代碼開(kāi)發(fā)之前，我們先看看使用低代碼開(kāi)發(fā)的效果。

低代碼開(kāi)發(fā)效果示例

低代碼開(kāi)發(fā)是DevEco Studio為HarmonyOS開(kāi)發(fā)者提供的可視化頁(yè)面的開(kāi)發(fā)方式，具備豐富的UI頁(yè)面編輯能力，開(kāi)發(fā)者可以在圖形化的用戶(hù)界面上自由拖拽組件、完成數(shù)據(jù)的參數(shù)化配置，還能實(shí)時(shí)預(yù)覽開(kāi)發(fā)頁(yè)面的效果，所見(jiàn)即所得。

可能我們會(huì)有這樣的疑問(wèn)，“既然能手敲代碼完成頁(yè)面開(kāi)發(fā)，為什么還要用低代碼開(kāi)發(fā)呢？”

低代碼開(kāi)發(fā)為我們開(kāi)發(fā)者提供了UI界面開(kāi)箱即用的組件，通過(guò)簡(jiǎn)單拖、拉、拽和可視化數(shù)據(jù)綁定的操作方式，快速開(kāi)發(fā)用戶(hù)界面。不僅可以減少鍵入的代碼量，降低開(kāi)發(fā)成本，還提升了頁(yè)面開(kāi)發(fā)效率，助力高效開(kāi)發(fā)。

二

低代碼開(kāi)發(fā)的特性能力

低代碼開(kāi)發(fā)主要包含以下特性：

1.自由拖拽組件；

2.可視化數(shù)據(jù)綁定；

3.ForEach輕松復(fù)制所需組件；

4.媒體查詢(xún)（MediaQuery）；

5.一鍵逃生。

接下來(lái)，我們通過(guò)開(kāi)發(fā)一個(gè)豆?jié){機(jī)應(yīng)用頁(yè)面實(shí)例來(lái)依次介紹這些特性。

三

上手低代碼開(kāi)發(fā)

如何快速創(chuàng)建支持低代碼開(kāi)發(fā)的工程？只需在創(chuàng)建新工程時(shí)開(kāi)啟Enable Super Visual開(kāi)關(guān)即可。

DevEco Studio提供了支持低代碼開(kāi)發(fā)的工程模板，選擇該模板后，只需單擊開(kāi)啟Enable Super Visual開(kāi)關(guān)，即可快速創(chuàng)建支持低代碼開(kāi)發(fā)的工程。

如果是JS工程，compileSdkVersion為7及以上；如果是ArkTS工程，compileSdkVersion為8及以上。

創(chuàng)建工程

創(chuàng)建完工程后，會(huì)在工程目錄中自動(dòng)生成低代碼目錄結(jié)構(gòu)（如下圖所示）。

其中index.ets文件是低代碼頁(yè)面的邏輯描述文件，定義頁(yè)面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等；index.visual文件存儲(chǔ)低代碼頁(yè)面的數(shù)據(jù)模型，在該文件中進(jìn)行頁(yè)面的可視化布局設(shè)計(jì)與開(kāi)發(fā)。

工程目錄結(jié)構(gòu)

1、自由拖拽組件，靜態(tài)設(shè)置組件屬性設(shè)計(jì)排版

雙擊打開(kāi)index.visual文件，將需要的組件依次拖入畫(huà)布中，在畫(huà)布中開(kāi)發(fā)者可以自由拖拽組件進(jìn)行排版。

同時(shí)單擊對(duì)應(yīng)組件，即可在屬性欄來(lái)設(shè)置組件的屬性，輕松完成頁(yè)面各板塊的設(shè)計(jì)。

作為示例，我們依次拖入了4個(gè)組件到畫(huà)布中，對(duì)4個(gè)組件的屬性進(jìn)行靜態(tài)設(shè)置。

靜態(tài)設(shè)置屬性

那這些組件的層次關(guān)系是什么呢？我們可以通過(guò)左下角的組件樹(shù)，清晰直觀地看到組件之間的層級(jí)結(jié)構(gòu)。

組件層級(jí)結(jié)構(gòu)

2、可視化數(shù)據(jù)綁定

1）變量綁定：

組件的屬性不僅只存在靜態(tài)常量的情況，屬性在不同的場(chǎng)景中會(huì)需要展示不同的效果，這時(shí)就需要通過(guò)變量綁定來(lái)實(shí)現(xiàn)。

在index.ets文件中定義好變量，結(jié)合使用index.visual文件在右側(cè)屬性欄，將屬性對(duì)應(yīng)的圖切換至，然后在下拉框選擇變量this.變量名，快速完成變量的綁定。

作為示例，我們?cè)趇ndex.ets定義了4個(gè)數(shù)據(jù)變量，與index.visual文件中的4個(gè)組件進(jìn)行了數(shù)據(jù)綁定。

數(shù)據(jù)綁定

2）事件綁定

用戶(hù)界面在一些特定場(chǎng)景里，還需要有交互的效果，如點(diǎn)擊交互，這時(shí)給組件綁定相應(yīng)的事件即可實(shí)現(xiàn)。

在index.ets文件里面定義好事件，在組件的Events屬性欄選擇已定義好的事件后快速完成事件綁定。

作為示例，我們?cè)趇ndex.ets定義了點(diǎn)擊事件，與index.visual文件中的組件進(jìn)行了事件綁定。

事件綁定

3、ForEach輕松復(fù)制所需組件

ForEach功能用來(lái)迭代數(shù)組，為每個(gè)數(shù)據(jù)項(xiàng)創(chuàng)建相應(yīng)的組件，在開(kāi)發(fā)用戶(hù)界面時(shí)，如果有相似的組件，可以輕松復(fù)制想要的組件。

在index.ets文件中定義好業(yè)務(wù)邏輯，選擇相應(yīng)組件，在ForEach屬性欄選擇該屬性后，只要完成該組件下的子組件設(shè)置，則會(huì)自動(dòng)復(fù)制生成對(duì)應(yīng)組件的屬性。

作為示例，我們?cè)趇ndex.ets文件中定義好變量后，綁定了index.visual文件中的組件ForEach，只設(shè)置了左側(cè)組件的屬性，右側(cè)自動(dòng)復(fù)制生成相對(duì)應(yīng)的圖片和文字。

RorEach

4、媒體查詢(xún)（MediaQuery）實(shí)現(xiàn)一次開(kāi)發(fā)多設(shè)備頁(yè)面適配

低代碼開(kāi)發(fā)支持適配多設(shè)備適配能力，ArkTS支持橫豎屏，結(jié)合媒體查詢(xún)（MediaQuery）可以將組件針對(duì)不同設(shè)備不同橫豎屏設(shè)置不用的值， 開(kāi)發(fā)一個(gè)設(shè)備的頁(yè)面，使用該功能進(jìn)行簡(jiǎn)單的配置后，實(shí)現(xiàn)不同設(shè)備的頁(yè)面適配。

點(diǎn)擊index.visual畫(huà)布右上角的圖標(biāo)切換到手機(jī)橫屏，在手機(jī)橫屏狀態(tài)下點(diǎn)擊畫(huà)布右上角的圖標(biāo)使mediaquery其處于高亮，來(lái)進(jìn)行多設(shè)備頁(yè)面的設(shè)計(jì)。

MediaQuery

5、一鍵逃生轉(zhuǎn)換代碼

低代碼開(kāi)發(fā)支持將可視化.visual文件生成對(duì)應(yīng)的.ets文件代碼供我們復(fù)制此部分的代碼，需要注意的是此操作不可逆，逃生后.ets文件無(wú)法轉(zhuǎn)換為.visual文件。

如果需要查看或者復(fù)制頁(yè)面的代碼，可以直接點(diǎn)擊圖標(biāo)，一鍵生成代碼。

逃生

相信通過(guò)以上幾個(gè)功能點(diǎn)的介紹，大家已經(jīng)掌握如何使用低代碼開(kāi)發(fā)來(lái)設(shè)計(jì)一個(gè)頁(yè)面了。

應(yīng)用頁(yè)面開(kāi)發(fā)示例

同時(shí)，我們剛發(fā)布的DevEco Studio 3.1 Beta1版本也帶來(lái)了低代碼開(kāi)發(fā)的新特性，歡迎各位開(kāi)發(fā)者探索體驗(yàn)：

豐富了組件類(lèi)型，增加了Refresh 、TimePicker、Toggle、Select、Search等組件；

支持設(shè)計(jì)稿轉(zhuǎn)低代碼和自定義組件，支持導(dǎo)入Sketch文件自動(dòng)生成可視化頁(yè)面；

支持根據(jù)場(chǎng)景需求自定義組件打造領(lǐng)域特定組件，提升低代碼復(fù)用能力。

后續(xù)還會(huì)有更多好用、好玩的功能發(fā)布，敬請(qǐng)期待。

END

想了解更多HarmonyOS技術(shù)？

后臺(tái)留言給我們

立刻安排！

歡迎點(diǎn)擊｜閱讀原文｜

了解更多低代碼開(kāi)發(fā)內(nèi)容