小白指南：手把手教你用低程式碼開發一個應用頁面

一、什麼是低程式碼開發

在瞭解低程式碼開發之前，我們先看看使用低程式碼開發的效果。

低程式碼開發效果示例

低程式碼開發是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，只設定了左側元件的屬性，右側自動複製生成相對應的圖片和文字。

ForEach

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

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

點選index.visual畫布右上角的圖示

切換到手機橫屏，在手機橫屏狀態下點選畫布右上角的圖示

使mediaquery其處於高亮，來進行多裝置頁面的設計。

MediaQuery

5、一鍵逃生轉換程式碼

低程式碼開發支援將視覺化.visual檔案生成對應的.ets檔案程式碼供我們複製此部分的程式碼，需要注意的是此操作不可逆，逃生後.ets檔案無法轉換為.visual檔案。

如果需要檢視或者複製頁面的程式碼，可以直接點選圖示

，一鍵生成程式碼。

逃生

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

應用頁面開發示例

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

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

支援設計稿轉低程式碼和自定義元件，支援匯入Sketch.檔案自動生成視覺化頁面；

支援根據場景需求自定義元件打造領域特定元件，提升低程式碼複用能力。

後續還會有更多好用、好玩的功能釋出，敬請期待。