#夏日挑戰賽# DevEco Studio V3.0 Beta4 低代碼開發系列之 初體驗

本文正在參加星光計劃3.0 – 夏日挑戰賽

(目錄)

介紹

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

說明：

該特性在DevEco Studio V2.2 Beta1及更高版本中支援。eTS低代碼特性在DevEco Studio 3.0 Beta4及更高版本中支援。compileSdkVersion必須為7或以上，eTS低代碼要求compileSdkVersion必須為8或以上，本次将會對比着介紹低代碼開發的功能及使用方法。

這幾天一直再用低代碼開發的方式去做一些頁面效果，即使沒有太多前端的設計經驗，利用低代碼開發也能做出很不錯的頁面效果，操作性，美觀性，效率都有了提升，體驗不錯，是以，也做一期分享。

體驗步驟

簡單3步就可以開啟低代碼開發了

1. 在打開的工程中，選中子產品的pages檔案夾，單擊滑鼠右鍵，選擇New > Visual
2. 在彈出的對話框中，輸入Visual name，點選Finish。建立Visual後，會在工程中自動生成低代碼的目錄結構，js版本和eTS根據自身特點檔案略有不同。
3. 打開“page.visual”檔案，即可進行頁面的可視化布局設計與開發

低代碼開發支援哪些操作

拖拽元件這個是最基本的功能了，還有元件的複制--粘貼；元件的過濾查詢 (個人認為如果屬性和樣式區域也支援過濾查詢就更好了)；還有通過元件樹快速關聯到畫布中的元件，顯示/隐藏元件；畫布效果即時預覽，還可以切換橫豎屏，放大縮小，明暗主題；屬性和樣式、事件的設定等等。

按操作的功能區低代碼開發界面可以分為5個區域，界面布局如下：

::: hljs-center

JS版本低代碼開發界面

:::

::: hljs-center

eTS版本低代碼開發界面

:::

UI控件區域

提供了可以拖拽的控件，JS版本和eTS版本控件的數量和類型是不同的，如下圖，可以看出來目前還是JS的控件豐富一些。

JS版本支援 27種拖拽元件	eTS版本支援 12種拖拽元件

元件樹區域

元件樹，在低代碼開發界面中，可以友善開發者直覺地看到元件的層級結構、摘要資訊以及錯誤提示。開發者可以通過選中元件樹中的元件（畫布中對應的元件被同步選中），實作畫布内元件的快速定位；點選元件後的或圖示，可以隐藏/顯示相應的元件，還可以檢視是否存在媒體查詢的屬性

JS版本	eTS版本

畫布預覽區域

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

屬性和樣式設定區域

屬性和樣式設定區域，JS版本和eTS版本有差別，JS版本支援8面闆，eTS支援6個面闆，因為屬性不同，是以面闆支援設定的屬性也是存在差異的，這裡就不一一列舉了。

1. Properties面闆（JS）

   用于設定元件基本辨別和外觀顯示特征的屬性，如：元件的ID、For、Value、Type、Content、Checked等屬性

2. General面闆(JS/eTS)

   用于設定Width、Height、Background、Position、Display等正常樣式

3. Feture面闆(JS/eTS)

   用于設定元件的特有樣式，如描述Text元件文字大小的FontSize樣式等

4. Flex面闆(JS/eTS)

   用于設定Flex布局相關樣式

5. Events面闆(JS/eTS)

   為元件綁定相關事件，并設定綁定事件的回調函數

6. Dimension面闆(JS/eTS)

   用于設定Padding、Border、Margin等與盒式模型相關的樣式

7. Grid面闆（JS）

   該圖示隻有Div元件的Display樣式被設定為grid時才會出現。

   用于設定Grid網格布局相關樣式，

8. Atomic面闆(JS/eTS)

   用于設定原子布局相關樣式。

工具欄操作區域

功能面闆，包括常用的畫布縮小放大、撤銷、顯示/隐藏元件虛拟邊框、裝置切換、模式切換、可視化布局界面一鍵轉換為代碼檔案等。

JS版本	eTS版本

這裡說一下Switch to media query（切換至媒體查詢）,也就是這個圖示

切換到media query模式，可以為元件設定不同的樣式和屬性。目前media query模式僅針對不同裝置類型和不同螢幕狀态（橫屏\豎屏）有效。

解釋一下這個意思：

當我們在豎屏下設計好界面後，再切換到橫屏的時候，發現有些不适配的地方，點選切換到media query模式，然後進行調整，例如一些寬度占比，調整完成後，我們再切換為豎屏，發現橫豎屏都是适配的。

::: hljs-center

media query模式的效果

:::

最後設計完成後，

将低代碼界面轉換為代碼時，我們的代碼中會增加媒體查詢的相關代碼。

import mediaQuery_WFRd from '@ohos.mediaquery'
@Entry
@Component
struct ConsoleManager {
  @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.
  */
  @State row1Height_b3cx: string | number = undefined
  @State row17Width_b3cx: string | number = undefined
  @State text32Width_Xh0M: string | number = undefined
  @State text32TextAlign_0MzJ: TextAlign = undefined
  @State row2Height_b3cy: string | number = undefined
  @State column2Height_x1bW: string | number = undefined
  @State text1Height_Xh0M: string | number = undefined
  @State row4Height_b3c0: string | number = undefined
  @State image7Height_WFnZ: string | number = undefined
  @State image7ObjectFit_nZTd: ImageFit = undefined
  @State text21Height_Xh0M: string | number = undefined
  @State image8Height_WFnZ: string | number = undefined
  @State image8ObjectFit_nZTh: ImageFit = undefined
  @State text22Height_Xh0M: string | number = undefined
  @State image9Height_WFnZ: string | number = undefined
  @State image9ObjectFit_nZTl: ImageFit = undefined
  @State text23Height_Xh0M: string | number = undefined
  @State image10Height_FnZT: string | number = undefined
  @State image10ObjectFit_ZTEw: ImageFit = undefined
  @State text24Height_Xh0M: string | number = undefined
  @State row7Height_b3c3: string | number = undefined
  @State column16Height_1bW4: string | number = undefined
  @State text27Height_Xh0M: string | number = undefined
  @State row8Height_b3c4: string | number = undefined
  @State row10Height_3cxM: string | number = undefined
  @State row9Height_b3c5: string | number = undefined
  @State row20Height_3cyM: string | number = undefined
  @State row13Height_3cxM: string | number = undefined
  @State image17Height_FnZT: string | number = undefined
  @State image17ObjectFit_ZTE3: ImageFit = undefined
  @State row23Height_3cyM: string | number = undefined
  @State column32Height_1bW4: string | number = undefined
  mediaQueryCb_FRdW = null
  tabletLandscape_TGFu: boolean = false
  tabletPortrait_0UG9: boolean = false
  listener_tabletLandscape_TGFu = mediaQuery_WFRd.matchMediaSync('(device-type: tablet) and (orientation: landscape)')
  listener_tabletPortrait_0UG9 = mediaQuery_WFRd.matchMediaSync('(device-type: tablet) and (orientation: portrait)')

  saveMediaQueryResult_hUXV(mediaQueryResult) {
    switch (mediaQueryResult.media) {
      case '(device-type: tablet) and (orientation: landscape)':
        this.tabletLandscape_TGFu = mediaQueryResult.matches
        break
      case '(device-type: tablet) and (orientation: portrait)':
        this.tabletPortrait_0UG9 = mediaQueryResult.matches
        break
      default:
        break
    }
    this.updateForMediaQuery_yTWV()
  }

  initForMediaQuery_k1lZ() {
    this.row1Height_b3cx = "280vp"
    this.row17Width_b3cx = "50%"
    this.text32Width_Xh0M = "50%"
    this.text32TextAlign_0MzJ = TextAlign.End
    this.row2Height_b3cy = "50vp"
    this.column2Height_x1bW = "80%"
    this.text1Height_Xh0M = "50vp"
    this.row4Height_b3c0 = "100vp"
    this.image7Height_WFnZ = "50vp"
    this.image7ObjectFit_nZTd = undefined
    this.text21Height_Xh0M = "50vp"
    this.image8Height_WFnZ = "50vp"
    this.image8ObjectFit_nZTh = undefined
    this.text22Height_Xh0M = "50vp"
    this.image9Height_WFnZ = "50vp"
    this.image9ObjectFit_nZTl = undefined
    this.text23Height_Xh0M = "50vp"
    this.image10Height_FnZT = "50vp"
    this.image10ObjectFit_ZTEw = undefined
    this.text24Height_Xh0M = "50vp"
    this.row7Height_b3c3 = "50vp"
    this.column16Height_1bW4 = "80%"
    this.text27Height_Xh0M = "50vp"
    this.row8Height_b3c4 = "100vp"
    this.row10Height_3cxM = "50vp"
    this.row9Height_b3c5 = "100vp"
    this.row20Height_3cyM = "50vp"
    this.row13Height_3cxM = "110vp"
    this.image17Height_FnZT = "50vp"
    this.image17ObjectFit_ZTE3 = undefined
    this.row23Height_3cyM = "50vp"
    this.column32Height_1bW4 = "80%"
  }

  updateForMediaQuery_yTWV(){
    this.initForMediaQuery_k1lZ()
    if (this.tabletLandscape_TGFu) {
      this.row1Height_b3cx = "150vp"
      this.text32Width_Xh0M = "20%"
      this.text32TextAlign_0MzJ = TextAlign.Start
      this.row2Height_b3cy = "40vp"
      this.column2Height_x1bW = "100%"
      this.text1Height_Xh0M = "100%"
      this.row4Height_b3c0 = "70vp"
      this.image7Height_WFnZ = "50%"
      this.image7ObjectFit_nZTd = ImageFit.Contain
      this.text21Height_Xh0M = "50%"
      this.image8Height_WFnZ = "50%"
      this.image8ObjectFit_nZTh = ImageFit.Contain
      this.text22Height_Xh0M = "50%"
      this.image9Height_WFnZ = "50%"
      this.image9ObjectFit_nZTl = ImageFit.Contain
      this.text23Height_Xh0M = "50%"
      this.image10Height_FnZT = "50%"
      this.image10ObjectFit_ZTEw = ImageFit.Contain
      this.text24Height_Xh0M = "50%"
      this.row7Height_b3c3 = "40vp"
      this.column16Height_1bW4 = "100%"
      this.text27Height_Xh0M = "100%"
      this.row8Height_b3c4 = "70vp"
      this.row10Height_3cxM = "40vp"
      this.row9Height_b3c5 = "70vp"
      this.row20Height_3cyM = "40vp"
      this.row13Height_3cxM = "70vp"
      this.image17Height_FnZT = "50%"
      this.image17ObjectFit_ZTE3 = ImageFit.Fill
      this.row23Height_3cyM = "40vp"
      this.column32Height_1bW4 = "100%"
    }
    if (this.tabletPortrait_0UG9) {
      this.row17Width_b3cx = "40%"
    }
  }

  aboutToAppear() {
    this.mediaQueryCb_FRdW = this.saveMediaQueryResult_hUXV.bind(this)
    this.listener_tabletLandscape_TGFu.on('change', this.mediaQueryCb_FRdW)
    this.listener_tabletPortrait_0UG9.on('change', this.mediaQueryCb_FRdW)
  }
           

通過低代碼開發界面實作的一些效果

登入頁面	首頁

試用頁面	控制台頁面

我的頁面	注冊頁面

今天的分享就到這裡了，歡迎大家留言讨論，感謝閱讀！