介紹

本篇Codelab是基于ArkTS語(yǔ)言的低代碼開(kāi)發(fā)方式實(shí)現(xiàn)的一個(gè)簡(jiǎn)單實(shí)例。具體實(shí)現(xiàn)功能如下：

1. 創(chuàng)建一個(gè)低代碼工程。
2. 通過(guò)拖拽的方式實(shí)現(xiàn)任務(wù)列表和任務(wù)信息界面的界面布局。
3. 在UI編輯界面實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)渲染和事件的綁定。

最終實(shí)現(xiàn)效果如下：

相關(guān)概念

低代碼開(kāi)發(fā)方式具有豐富的UI界面編輯功能，通過(guò)可視化界面開(kāi)發(fā)方式快速構(gòu)建布局，可有效降低開(kāi)發(fā)者的上手成本并提升開(kāi)發(fā)者構(gòu)建UI界面的效率。

• List：List 是很常用的滾動(dòng)類容器組件之一，它按照水平或者豎直方向線性排列子組件， List 的子組件必須是 ListItem ，它的寬度默認(rèn)充滿 List 的寬度。
• 循環(huán)渲染：開(kāi)發(fā)框架提供循環(huán)渲染（ForEach組件）來(lái)迭代數(shù)組，并為每個(gè)數(shù)組項(xiàng)創(chuàng)建相應(yīng)的組件。
• 警告彈窗：顯示警告彈窗組件，可設(shè)置文本內(nèi)容與響應(yīng)回調(diào)。

環(huán)境搭建

軟件要求

• DevEco Studio版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開(kāi)發(fā)板類型：潤(rùn)和RK3568開(kāi)發(fā)板。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

1. 獲取OpenHarmony系統(tǒng)版本：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：

2.搭建燒錄環(huán)境。

1. 完成DevEco Device Tool的安裝
2. 完成RK3568開(kāi)發(fā)板的燒錄

3.搭建開(kāi)發(fā)環(huán)境。

1. 開(kāi)始前請(qǐng)參考工具準(zhǔn)備，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考使用工程向?qū)?chuàng)建工程（模板選擇“Empty Ability”）。
3. 工程創(chuàng)建完成后，選擇使用真機(jī)進(jìn)行調(diào)測(cè)。

代碼結(jié)構(gòu)解讀

└──entry/src/main/ets // 代碼區(qū)│ ├──common │ │ ├──images // 圖片│ │ └──Const.ets // 常量類│ ├──entryability │ │ └──EntryAbility.ets // 程序入口類│ └──pages│ ├──TaskDetailPage.ets // 詳情頁(yè)的邏輯描述文件│ └──TaskPage.ets // 首頁(yè)的邏輯描述文件├──entry/src/main/resources // 資源文件└──entry/src/main/supervisual └──pages ├──TaskDetailPage.visual // 詳情頁(yè)面的數(shù)據(jù)模型 └──TaskPage.visual // 首頁(yè)頁(yè)面的數(shù)據(jù)模型

創(chuàng)建低代碼工程

首先需要先創(chuàng)建一個(gè)低代碼的工程，創(chuàng)建工程時(shí)，在配置工程界面打開(kāi)“Enable Super Visual”開(kāi)關(guān)，點(diǎn)擊“Finish”。工程創(chuàng)建完成后，在src/main目錄下會(huì)生成一個(gè)supervisual目錄，supervisual/pages目錄下的.visual文件，可以通過(guò)組件拖拽實(shí)現(xiàn)的頁(yè)面數(shù)據(jù)模型文件。ets/pages下的.ets文件是跟supervisual/pages中的文件一一對(duì)應(yīng)的，是對(duì)應(yīng)界面的邏輯描述文件。

低代碼設(shè)計(jì)界面布局

打開(kāi)TaskPage.visual文件，界面如圖所示：

中間部分是界面布局后的整體效果。

左側(cè)上部的“UI Control”模塊是我們可以進(jìn)行拖拽的組件。

左側(cè)下部的“Component Tree”模塊是我們界面上所有的元素樹。

右側(cè)的“Attributes&Styles”模塊是當(dāng)前選中的界面元素的屬性和樣式的詳細(xì)信息，通過(guò)修改這個(gè)模塊的內(nèi)容來(lái)改變界面上元素的樣式屬性等信息。

任務(wù)列表頁(yè)面分了上下兩部分，上邊拖進(jìn)來(lái)了一個(gè)Row組件來(lái)展示界面標(biāo)題，下邊用一個(gè)List組件來(lái)實(shí)現(xiàn)任務(wù)列表的數(shù)據(jù)展示，每個(gè)Item子組件用的橫向布局，里邊拖進(jìn)去了一個(gè)Image組件和兩個(gè)Text組件。

實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)渲染

頁(yè)面布局完成后，需要給ListItem 組件綁定一個(gè)ForEach的數(shù)據(jù)源。如圖：

// TaskPage.ets@State taskList: Array<TaskInfo> = TASK_LIST;taskClickAction() { router.push({ url: 'pages/TaskDetailPage' });}

同時(shí)給ListItem綁定一個(gè)點(diǎn)擊事件來(lái)實(shí)現(xiàn)界面的跳轉(zhuǎn)功能。

手動(dòng)創(chuàng)建低代碼頁(yè)面

在pages下新建一個(gè)visual文件（右鍵->New->Visual），IDE會(huì)在ets/pages和supervisual/pages下同時(shí)創(chuàng)建一個(gè)名字相同后綴分別是.ets和.visual的文件，同樣通過(guò)組件拖拽的方式去實(shí)現(xiàn)任務(wù)信息界面的布局，給界面綁定數(shù)據(jù)源和點(diǎn)擊事件。detail.ets文件中代碼如下：

@State detailList: Array<DetailModel> = DETAILS;showDialog() { AlertDialog.show({ title: $r('app.string.task_clock'), message: $r('app.string.task_done'), autoCancel: true, confirm: { value: $r('app.string.clock'), action: () => { } } });}backAction() { router.back();}

總結(jié)

恭喜大家已經(jīng)完成了本次Codelab的學(xué)習(xí)，并了解到以下知識(shí)點(diǎn)：

1. 如何創(chuàng)建一個(gè)低代碼工程。
2. 如何使用低代碼實(shí)現(xiàn)界面布局。
3. 如何在低代碼界面實(shí)現(xiàn)數(shù)據(jù)綁定和點(diǎn)擊事件的綁定

為了幫助大家更深入有效的學(xué)習(xí)到鴻蒙開(kāi)發(fā)知識(shí)點(diǎn)，小編特意給大家準(zhǔn)備了幾套最新版的HarmonyOS NEXT學(xué)習(xí)資源

獲取完整版高清學(xué)習(xí)路線，請(qǐng)點(diǎn)擊→《HarmonyOS教學(xué)視頻》

HarmonyOS教學(xué)視頻

鴻蒙語(yǔ)法ArkTS、TypeScript、ArkUI等…..視頻教程

鴻蒙生態(tài)應(yīng)用開(kāi)發(fā)白皮書V2.0PDF：

獲取白皮書：請(qǐng)點(diǎn)擊→《鴻蒙生態(tài)應(yīng)用開(kāi)發(fā)白皮書V2.0PDF》

鴻蒙 (Harmony OS)開(kāi)發(fā)學(xué)習(xí)手冊(cè)

一、入門必看

1. 應(yīng)用開(kāi)發(fā)導(dǎo)讀(ArkTS)
2. ……

二、HarmonyOS 概念

1. 系統(tǒng)定義
2. 技術(shù)架構(gòu)
3. 技術(shù)特性
4. 系統(tǒng)安全
5. ……..

三、如何快速入門？《鴻蒙星河版開(kāi)發(fā)教程指南》

1. 基本概念
2. 構(gòu)建第一個(gè)ArkTS應(yīng)用
3. ……

四、開(kāi)發(fā)基礎(chǔ)知識(shí)

1. 應(yīng)用基礎(chǔ)知識(shí)
2. 配置文件
3. 應(yīng)用數(shù)據(jù)管理
4. 應(yīng)用安全管理
5. 應(yīng)用隱私保護(hù)
6. 三方應(yīng)用調(diào)用管控機(jī)制
7. 資源分類與訪問(wèn)
8. 學(xué)習(xí)ArkTS語(yǔ)言
9. ……

五、基于ArkTS 開(kāi)發(fā)

1. Ability開(kāi)發(fā)
2. UI開(kāi)發(fā)
3. 公共事件與通知
4. 窗口管理
5. 媒體
6. 安全
7. 網(wǎng)絡(luò)與鏈接
8. 電話服務(wù)
9. 數(shù)據(jù)管理
10. 后臺(tái)任務(wù)(Background Task)管理
11. 設(shè)備管理
12. 設(shè)備使用信息統(tǒng)計(jì)
13. DFX
14. 國(guó)際化開(kāi)發(fā)
15. 折疊屏系列
16. ……

更多了解更多鴻蒙開(kāi)發(fā)的相關(guān)知識(shí)可以參考：《鴻蒙 (Harmony OS)開(kāi)發(fā)學(xué)習(xí)手冊(cè)》