一、什么是低代碼

所謂低代碼開發，即無需編碼或只需少量代碼就可以快速生成應用程序。也就是說，企業的應用開發通過“拖拉拽”的方式即可完成的一種開發方式。

相信這種方式對使用過Android Studio進行安卓APP開發的程序員來說都不陌生，就是通過拖動創建組件，從而完成項目框架的搭建。在HarmonyOS中，也支持使用這種可視化拖拽的方式進行開發。

二、如何進行鴻蒙低代碼開發

1、 創建低代碼開發工程（方式壹）

這種方式簡單粗暴，就是直接創建一個支持低代碼開發的新工程，從而進行應用或服務UI界面的開發。注意：該開發能力在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必須為7或以上。

在工程模板中，提供了低代碼開發的工程模塊，您可以直接選擇一個支持低代碼開發的工程模板來開發應用或服務的UI界面，當前支持“Empty Ability”和“Sport and Health Ability”兩個工程模板，支持的設備類型包括Phone、Tablet和Wearable。

（1）打開DevEco Studio，創建一個新工程，模板選擇Empty Ability。

（2）選擇Super Visual，表示使用低代碼開發功能開發應用/服務。點擊Finish等待工程同步完成。

（3）同步完成后，查看工程目錄中自動生成低代碼目錄結構。

從目錄結構中可以看出，低代碼開發的項目目錄結構與純ArkTS的目錄結構大致相同，ets文件也同樣存在pages目錄下。不過低代碼開發的項目目錄最主要的特點便是index.visual文件，這就是支持項目進行可視化開發的核心。

pages > index >index.js：低代碼頁面的邏輯描述文件，定義了頁面里所用到的所有的邏輯關系，比如數據、事件等，詳情請參考JS語法參考。如果創建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應的js文件

pages > index >index.visual：visual文件存儲低代碼頁面的數據模型，雙擊該文件即可打開低代碼頁面，進行可視化開發設計。如果創建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應的visual文件。

（4）打開“page.visual”文件，即可進行頁面的可視化布局設計與開發。
使用低代碼開發界面過程中，如果界面需要使用到其它暫不支持可視化布局的控件時，可以在低代碼界面開發完成后，點擊img按鈕，將低代碼界面轉換為hml和css代碼。注意，代碼轉換操作會刪除visual文件及其父目錄，且為不可逆過程，代碼轉換后不能通過hml/css文件反向生成visual文件。多設備開發的場景，可以點擊界面畫布右上角設備/模式切換按鈕img，進行設備切換或模式切換。

如上圖所示，便是將Button按鈕組件拖入UI編輯器中，并且可以直接在按鈕上打字。

2、已有工程則創建Visual文件（方拾貳）

在已有的HarmonyOS工程中，可以通過創建JS Visual文件的方式，使用低代碼開發應用或服務的UI界面。支持的設備類型為Phone、Tablet、Wearable設備，且ompileSdkVersion必須為6或以上。
（1）在打開的DevEco工程中，選中entry > src > main > ets下的pages文件夾，單擊鼠標右鍵，選擇New > Visual > Page.

（2）這樣便會跳轉進入Visual界面的命名，建好Visual的頁面文件，點擊“Finish”，然后便會直接進入該Visual文件的低代碼開發界面。

三、低代碼開發界面介紹

①：項目的目錄結構，是打開文件時的主要操控面板；

②：UI Control，即UI控件欄，可以將相應的組件選中并拖動到畫布（Canvas）中，實現控件的添加。

③：Component Tree，即組件樹，在低代碼開發界面中，可以方便開發者直觀地看到組件的層級結構、摘要信息以及錯誤提示。開發者可以通過選中組件樹中的組件（畫布中對應的組件被同步選中），實現畫布內組件的快速定位；點擊組件后的img或img圖標，可以隱藏/顯示相應的組件。

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

⑤：Canvas，即畫布，開發者可在此區域對組件進行拖拽、拉伸等可視化操作，構建UI界面布局效果。

⑥：Attributes & Styles，即屬性樣式欄，選中畫布中的相應組件后，在右側屬性樣式欄可以對該組件的屬性樣式進行配置。包括：

• Properties：對應img圖標，用于設置組件基本標識和外觀顯示特征的屬性，如組件的ID、If等屬性。

• General：對應img圖標，用于設置Width、Height、Background、Position、Display等常規樣式。

• Feature：對應img圖標，用于設置組件的特有樣式，如描述Text組件文字大小的FontSize樣式等。

• Flex：對應img圖標，用于設置Flex布局相關樣式。

• Events：對應img圖標，為組件綁定相關事件，并設置綁定事件的回調函數。

• Dimension：對應img圖標，用于設置Padding、Border、Margin等與盒式模型相關的樣式。

• Grid：對應img圖標，用于設置Grid網格布局相關樣式，該圖標只有Div組件的Display樣式被設置為grid時才會出現。

• Atom：對應img圖標，用于設置原子布局相關樣式。

⑦：Previewer，即窗口預覽器，更多關于頁面預覽的操作參見文章：鴻蒙4.0開發筆記之DevEco Studio如何使用Previewer窗口預覽器

四、低代碼實現頁面跳轉

1、實現思路
第一步：在ets文件夾下找到ets文件加上事件方法的函數

第二步：在Visual可視化界面給按鈕綁定事件方法

2、實現的ets代碼
第一個頁面：

import router from '@ohos.router'
@Entry
@Component
struct Index {@State message: string = 'Hello World'/*** In low-code mode, do not add anything to the build function, as it will be* overwritten by the content generated by the .visual file in the build phase.*/build() {}goTwo(){router.pushUrl({url:"pages/Two"})}
}

第二個頁面：

import router from '@ohos.router'
@Entry
@Component
struct Two {@State message: string = '無際鷹'/*** In low-code mode, do not add anything to the build function, as it will be* overwritten by the content generated by the .visual file in the build phase.*/build() {}backs(){router.back()}
}

3、效果

五、低代碼開發建議

HarmonyOS低代碼開發方式，具有豐富的UI界面編輯功能，通過可視化界面開發方式快速構建布局，可有效降低用戶的時間成本和提升用戶構建UI界面的效率。

建議用于項目框架的搭建，通過拖動組件，設定基本屬性樣式和基礎的動作方法。但是不建議用于一個鴻蒙項目的全流程開發，因為還有很多更為靈活的界面效果、接口接入和數據傳輸等等，都需要通過代碼來進行調整。

因此，可以用這種低代碼開發范式構建項目框架，再重點使用ArkTS語言進行編程以完成項目的開發。