今年HDC.Together 2023的Codelabs挑戰(zhàn)系列活動(dòng)如期而至，眾多開(kāi)發(fā)者齊聚一堂，積極參與。本次賽題中部分Codelabs已在官網(wǎng)上線詳細(xì)操作指南，讓我們與眾多coders一起探索代碼的獨(dú)特魅力。

01

ArkTS基礎(chǔ)知識(shí)（ArkTS）

本課程使用聲明式語(yǔ)法和組件化基礎(chǔ)知識(shí)，搭建一個(gè)可刷新的排行榜頁(yè)面。在排行榜頁(yè)面中，使用循環(huán)渲染控制語(yǔ)法來(lái)實(shí)現(xiàn)列表數(shù)據(jù)渲染，使用@Builder創(chuàng)建排行列表布局內(nèi)容，使用裝飾器@State、@Prop、@Link來(lái)管理組件狀態(tài)。最后我們點(diǎn)擊系統(tǒng)返回按鍵，來(lái)學(xué)習(xí)自定義組件生命周期函數(shù)。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Ranking-Demo

02

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的使用（ArkTS）

在本教程中，我們將會(huì)通過(guò)一個(gè)簡(jiǎn)單的樣例，學(xué)習(xí)如何基于ArkTS的聲明式開(kāi)發(fā)范式開(kāi)發(fā)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。其中包含頁(yè)面間轉(zhuǎn)場(chǎng)、組件內(nèi)轉(zhuǎn)場(chǎng)以及共享元素轉(zhuǎn)場(chǎng)。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_TransitionAnimation

03

Swiper的使用（ArkTS）

本篇Codelab主要介紹了滑動(dòng)容器組件Swiper的幾種常見(jiàn)的應(yīng)用場(chǎng)景，包括頂部導(dǎo)航、輪播圖以及視頻滑動(dòng)播放。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_tutorials_HarmonyOS-SwiperArkTS

04

構(gòu)建多種樣式彈窗（ArkTS）

本篇Codelab將介紹如何使用彈窗功能，實(shí)現(xiàn)四種類型彈窗。分別是：警告彈窗、自定義彈窗、日期滑動(dòng)選擇器彈窗、文本滑動(dòng)選擇器彈窗。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultipleDialog

05

二級(jí)聯(lián)動(dòng)（ArkTS）

本篇Codelab主要介紹如何基于List組件實(shí)現(xiàn)一個(gè)導(dǎo)航和內(nèi)容的二級(jí)聯(lián)動(dòng)效果。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_SecondLevelLinkage

06

彈性布局（ArkTS）

本篇Codelab主要介紹如何基于Flex容器組件特性，實(shí)現(xiàn)彈性布局效果。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_FlexLayout

07

鬧鐘（ArkTS）

本篇Codelab主要介紹如何基于ArkTS的聲明式開(kāi)發(fā)范式及HarmonyOS的后臺(tái)代理提醒能力，實(shí)現(xiàn)簡(jiǎn)單的鬧鐘提醒功能。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_AlarmClock

08

圖片編輯（ArkTS）

本篇Codelab主要介紹如何基于圖片編解碼，實(shí)現(xiàn)圖片編輯，包含裁剪、旋轉(zhuǎn)、色域調(diào)節(jié)（本文只介紹亮度、透明度、飽和度）等功能。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_ImageEdit

09

視頻播放器（ArkTS）

本篇Codelab基于HarmonyOS的播放管理類（AVPlayer），使用ArkTS語(yǔ)言實(shí)現(xiàn)視頻播放器，主要包括視頻獲取和視頻播放功能。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Video-Player

10

電子相冊(cè)（ArkTS）

本篇Codelab介紹了基于ArkTS實(shí)現(xiàn)一個(gè)電子相冊(cè)的案例，通過(guò)捏合和拖拽手勢(shì)控制圖片的放大、縮小、左右拖動(dòng)查看細(xì)節(jié)等效果。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_ElectronicAlbum

11

一次開(kāi)發(fā)，多端部署-音樂(lè)專輯（ArkTS）

本篇Codelab基于自適應(yīng)布局和響應(yīng)式布局，實(shí)現(xiàn)一次開(kāi)發(fā)，多端部署音樂(lè)專輯。介紹手機(jī)、折疊屏、平板等不同屏幕尺寸設(shè)備的頁(yè)面設(shè)計(jì)和實(shí)現(xiàn)方案，通過(guò)合理的工程結(jié)構(gòu)組織代碼，以及解決系統(tǒng)能力差異的兼容性問(wèn)題。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultiDeviceMusic

12

一次開(kāi)發(fā)，多端部署-購(gòu)物應(yīng)用（ArkTS）

本篇Codelab基于自適應(yīng)布局和響應(yīng)式布局，實(shí)現(xiàn)購(gòu)物應(yīng)用在手機(jī)、折疊屏、平板不同屏幕尺寸設(shè)備上按不同設(shè)計(jì)顯示。通過(guò)三層工程結(jié)構(gòu)組織代碼，實(shí)現(xiàn)一次開(kāi)發(fā)，多端部署。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultiShopping

13

健康生活卡片（ArkTS）

本篇Codelab基于健康生活應(yīng)用實(shí)現(xiàn)ArkTS卡片，介紹卡片的開(kāi)發(fā)及生命周期。實(shí)現(xiàn)2x2和2x4規(guī)格的卡片功能，并通過(guò)關(guān)系型數(shù)據(jù)庫(kù)完成創(chuàng)建、查詢、添加、刪除卡片數(shù)據(jù)。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_HealthyLifeArkTSCard

14

溪村小鎮(zhèn)

溪村小鎮(zhèn)是一款展示溪流背坡村園區(qū)風(fēng)貌的應(yīng)用，包括園區(qū)內(nèi)的導(dǎo)航功能，小火車行車狀態(tài)查看，以及各區(qū)域的風(fēng)景展覽介紹，主要用于展示HarmonyOS的ArkUI能力和動(dòng)畫(huà)效果。

操作指南：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_OxHornCampus

除了豐富的Codelabs供開(kāi)發(fā)者學(xué)習(xí)，為了幫助大家更好地了解本次HDC大會(huì)期間發(fā)布的最新開(kāi)發(fā)資料，論壇更是為大家準(zhǔn)備了鴻蒙生態(tài)資料錦集，帶您快速了解鴻蒙生態(tài)，輕松開(kāi)啟HarmonyOS應(yīng)用開(kāi)發(fā)旅程，實(shí)現(xiàn)共建、共享、共贏。

2023 HDC.Together | 鴻蒙生態(tài)資料錦集：https://developer.huawei.com/consumer/cn/forum/topic/0211126551683576003?fid=23

【有獎(jiǎng)活動(dòng)】還希望今后的Codelabs活動(dòng)增添哪些互動(dòng)內(nèi)容？歡迎到論壇參與討論并曬出你的認(rèn)證考試證書(shū)。精彩好禮等你喲~點(diǎn)擊"閱讀原文"參與活動(dòng)！