一

什么是低代碼開發

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

低代碼開發效果示例

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

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

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

二

低代碼開發的特性能力

低代碼開發主要包含以下特性：

1.自由拖拽組件；

2.可視化數據綁定；

3.ForEach輕松復制所需組件；

4.媒體查詢（MediaQuery）；

5.一鍵逃生。

接下來，我們通過開發一個豆漿機應用頁面實例來依次介紹這些特性。

三

上手低代碼開發

如何快速創建支持低代碼開發的工程？只需在創建新工程時開啟Enable Super Visual開關即可。

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

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

創建工程

創建完工程后，會在工程目錄中自動生成低代碼目錄結構（如下圖所示）。

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

工程目錄結構

1、自由拖拽組件，靜態設置組件屬性設計排版

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

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

作為示例，我們依次拖入了4個組件到畫布中，對4個組件的屬性進行靜態設置。

靜態設置屬性

那這些組件的層次關系是什么呢？我們可以通過左下角的組件樹，清晰直觀地看到組件之間的層級結構。

組件層級結構

2、可視化數據綁定

1）變量綁定：

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

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

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

數據綁定

2）事件綁定

用戶界面在一些特定場景里，還需要有交互的效果，如點擊交互，這時給組件綁定相應的事件即可實現。

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

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

事件綁定

3、ForEach輕松復制所需組件

ForEach功能用來迭代數組，為每個數據項創建相應的組件，在開發用戶界面時，如果有相似的組件，可以輕松復制想要的組件。

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

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

RorEach

4、媒體查詢（MediaQuery）實現一次開發多設備頁面適配

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

點擊index.visual畫布右上角的圖標切換到手機橫屏，在手機橫屏狀態下點擊畫布右上角的圖標使mediaquery其處于高亮，來進行多設備頁面的設計。

MediaQuery

5、一鍵逃生轉換代碼

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

如果需要查看或者復制頁面的代碼，可以直接點擊圖標，一鍵生成代碼。

逃生

相信通過以上幾個功能點的介紹，大家已經掌握如何使用低代碼開發來設計一個頁面了。

應用頁面開發示例

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

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

支持設計稿轉低代碼和自定義組件，支持導入Sketch文件自動生成可視化頁面；

支持根據場景需求自定義組件打造領域特定組件，提升低代碼復用能力。

后續還會有更多好用、好玩的功能發布，敬請期待。

END

想了解更多HarmonyOS技術？

后臺留言給我們

立刻安排！

歡迎點擊｜閱讀原文｜

了解更多低代碼開發內容