一

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

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

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

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

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

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

二

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

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

1.自由拖拽組件；

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

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

4.媒體查詢（MediaQuery）；

5.一鍵逃生。

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

三

上手低代碼開發(fā)

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

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

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

創(chuàng)建工程

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

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

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

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

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

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

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

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

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

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

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

1）變量綁定：

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

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

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

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

2）事件綁定

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

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

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

事件綁定

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

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

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

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

RorEach

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

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

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

MediaQuery

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

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

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

逃生

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

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

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

豐富了組件類型，增加了Refresh 、TimePicker、Toggle、Select、Search等組件；

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

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

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

END

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

后臺留言給我們

立刻安排！

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

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