??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

3月31日OpenHarmony首款應(yīng)用開發(fā)工具 DevEco Studio 3.0 Beta3 for OpenHarmony發(fā)布，其中支持可視化的界面UI開發(fā)是其一大亮點(diǎn)。在信息中心，僅僅介紹了JS的低代碼開發(fā)。OpenHarmony低代碼開發(fā)方式，遵循JS、TS開發(fā)規(guī)范，具有豐富的UI界面編輯功能，可以通過可視化方式快速構(gòu)建布局，熟練掌握后?？纱蠓档烷_發(fā)時(shí)間，提升構(gòu)建UI界面的效率。

其實(shí)，ETS完全可以進(jìn)行低代碼可視化開發(fā)，來體驗(yàn)一下它的快捷和高效。

準(zhǔn)備

1. 安裝好DevEco Studio 3.0 Beta3 for OpenHarmony。
2. Hi3516開發(fā)板，燒錄好OpenHarmony 3.1 Release標(biāo)準(zhǔn)系統(tǒng)。
3. Type C 數(shù)據(jù)線一根。
4. 準(zhǔn)備好喜歡的圖片資源。

低代碼可視化開發(fā)

創(chuàng)建工程，點(diǎn)選“Enable Supper Visual"，創(chuàng)建一個(gè)低代碼可視化工程，API8和API9都可以。

工程目錄中自動(dòng)生成低代碼目錄結(jié)構(gòu)，打開“index.visual”文件，即可進(jìn)行頁面的可視化布局設(shè)計(jì)與開發(fā)。

刪除并清空默認(rèn)模板中的“text”和“row”控件，拖放組件欄中的Column組件，放至畫布中，使其滿屏，在Column組件內(nèi)拖放Text組件，在右側(cè)屬性欄設(shè)置樣式。

在Column組件內(nèi)拖放Swiper組件，在右側(cè)屬性欄設(shè)置樣式，將多個(gè)image組件拖放至Swiper組件內(nèi)，關(guān)聯(lián)對(duì)應(yīng)的圖片資源。同時(shí)設(shè)置Swiper組件AutoPlay為true。

打開預(yù)覽器，首個(gè)圖片輪播頁面已經(jīng)完成。

接著創(chuàng)建第二個(gè)低代碼頁面，實(shí)現(xiàn)天氣預(yù)報(bào)的輪播。

在entry/src/main/ets/MainAbility/pages下新建page頁面，清空模板原來的控件。

拖放Column組件，在畫布中使其滿屏。在Column組件內(nèi)拖放Text和Swiper組件，操作同index頁。

在Swiper組件下，組合Column，Row，Text，Progress，Image組件成為一個(gè)組合組件。

在Swiper內(nèi)，復(fù)制組合組件，生成其它日期的UI.分別設(shè)置各個(gè)組件的屬性和樣式。

同樣設(shè)置Swiper組件AutoPlay為true，這樣第二個(gè)低代碼頁面也已生成。

兩個(gè)UI頁面是無代碼的，全部通過拖放完成。為了實(shí)現(xiàn)頁面間跳轉(zhuǎn)和其它邏輯控制，數(shù)據(jù)驅(qū)動(dòng)等，目前ETS還需要少量代碼。

在entry/src/main/ets/MainAbility/pages/index.ets添加onclick方法。

import router from '@system.router';
@Entry
@Component
struct Index {
  build() {
  }
  onclick()  {
    router.push({
      uri:'pages/page'
    })
  }
}

在entry/src/main/ets/MainAbility/pages/page.ets添加onclick方法。

import router from '@system.router';
@Entry
@Component
struct Page {
  build() {
  }
  onclick()  {
    router.push({
      uri:'pages/index'
    })
  }
}

分別在兩個(gè)頁面的Swiper組件點(diǎn)擊(Events)圖標(biāo)，綁定onClick事件，實(shí)現(xiàn)點(diǎn)擊圖片切換頁面功能。

至此，低代碼開發(fā)全部完成。

簽名，燒錄

1. 點(diǎn)擊“文件——項(xiàng)目結(jié)構(gòu)——Project——Signing Config"，彈窗中勾選“Automatically generate signing”后，等待簽名完成，點(diǎn)擊“ok”。
2. 用usb線連接電腦和3516開發(fā)板，開發(fā)板啟動(dòng)完成后，后自動(dòng)連接到IDE。
3. 點(diǎn)擊設(shè)備“運(yùn)行”按鈕，同時(shí)完成工程編譯和下載到3516開發(fā)板。

總結(jié)

1. 低代碼開發(fā)上手容易，操作簡(jiǎn)單。
2. 低代碼開發(fā)效率高，節(jié)省時(shí)間。
3. 低代碼開發(fā)出錯(cuò)機(jī)率極低。
4. 目前主要用于UI開發(fā)，必要時(shí)可一鍵轉(zhuǎn)化為ETS代碼，繼續(xù)完善。
5. ETS相比JS的低代碼開發(fā)，可用控件比較少，有些功能無法實(shí)現(xiàn)。相信后續(xù)版本會(huì)逐步增加各種常用組件。

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。