# Codelabs
**Repository Path**: hongyu/codelabs
## Basic Information
- **Project Name**: Codelabs
- **Description**: 分享知识与见解,一起探索HarmonyOS的独特魅力。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 855
- **Created**: 2023-12-11
- **Last Updated**: 2024-06-12
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# HarmonyOS Codelabs
- [概要简介](#section117915431558)
- [目录](#sectionMenu)
- [使用说明](#section1954919258619)
- [约束与限制](#section682025019613)
- [相关链接](#section01752910717)
## 概要简介
为帮助开发者快速熟悉HarmonyOS和OpenHarmony的能力以及相关的应用开发流程,我们提供了一系列的基于趣味场景的应用示例,即Codelabs,开发者可以根据我们的文档一步步的学习和完成简单项目的开发。
## 目录
- 优秀案例
- [溪村小镇(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/OxHornCampus)
- [一次开发,多端部署-购物应用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/MultiShopping)
- [一次开发,多端部署-音乐专辑(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/MultiDeviceMusic)
- [健康生活应用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Healthy_life)
- Ability开发
- [UIAbility和自定义组件生命周期(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/UIAbilityLifeCycle)
- [UIAbility内页面间的跳转(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/PagesRouter)
- [Stage模型下Ability的创建和使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/StageAbilityDemo)
- UI(ArkTS)
- [一次开发,多端部署-视频应用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Multi_device_V2)
- [WaterFlow容器的使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/WaterFlow)
- [ArkTS与H5的交互(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SelectContact)
- [电子相册(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ElectronicAlbum)
- [构建多种样式弹窗(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/MultipleDialog)
- [简易计算器(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SimpleCalculator)
- [自定义抽奖转盘(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/CanvasComponent)
- [像素转换(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/PixelConversion)
- [二级联动(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SecondLevelLinkage)
- [目标管理(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/TargetManagement)
- [弹性布局(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/FlexLayout)
- [待办列表(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ToDoListArkTS)
- [ArkTS基础知识(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/RankingDemo)
- [动效示例(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Animation)
- [转场动画的使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/TransitionAnimation)
- [自定义下拉刷新动画(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/AnimateRefresh)
- [ArkUI常用布局容器对齐方式(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/LayoutAlign)
- [常用组件与布局(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ArkTSComponents)
- [Web组件之cookie常见操作(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/WebCookie)
- [Swiper的使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SwiperArkTS)
- [基础组件Slider的使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SliderExample)
- [List组件的用法之商品列表(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/List)
- [List组件的用法之设置项(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/List-HDC)
- UI(JS)
- [image、image-animator组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ClickableJs)
- [input、label组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/InputApplication)
- [rating组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/RatingApplication)
- [slider组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SliderApplication)
- [switch、chart组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SwitchChart)
- [弹窗基本使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/DialogDemo)
- [动画样式(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/AnimationDemo)
- [toolbar、toolbar-item组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ToolbarApplication)
- [video组件的使用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/VideoApplication)
- [购物应用(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ShoppingSample)
- 公共事件与通知
- [系统公共事件(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SystemCommonEvent)
- [进度条通知(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/DownloadNotification)
- [闹钟(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/AlarmClock)
- 窗口管理
- [窗口管理(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/WindowManager)
- 媒体
- [录音机(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Recorder)
- [视频播放器(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/VideoPlayer)
- [图片编辑(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ImageEdit)
- [简易视频播放器(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SimpleVideo)
- [图片编辑(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ImageEditorTemplate)
- 网络与连接
- [新闻发布(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/NewsRelease)
- [HTTPS请求过程(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/HttpsRequest)
- [新闻数据加载(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/NewsDataArkTS)
- [Web组件抽奖案例(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/WebComponent)
- 数据库
- [关系型数据库(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Rdb)
- [首选项(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Preferences)
- [应用内字体大小调节(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SetAppFontSize)
- [应用首次启动(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/FirstStartDemo_HOS)
- 设备管理
- [计步器应用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/PedometerApp)
- 分布式
- [分布式新闻客户端(ArkTS)(API 7)](https://gitee.com/harmonyos/codelabs/tree/master/DistributeNewsETS)
- [分布式新闻客户端(JS)(API 7)](https://gitee.com/harmonyos/codelabs/tree/master/DistributeNewsJS)
- [分布式手写板(JS)(API 7)](https://gitee.com/harmonyos/codelabs/tree/master/JSDistributeDraw)
- [分布式鉴权(JS)(API 7)](https://gitee.com/harmonyos/codelabs/tree/master/GameAuth)
- 卡片
- [音乐播放元服务和卡片(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/MusicPlay)
- [健康生活卡片(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/Healthy_life)
- [电影卡片(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/MovieCard)
- [计步器卡片(JS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/StepsCardJS)
- 效率提升
- [使用DevEco Studio高效开发(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/LoginDemo)
- [常见组件和容器低代码开发示例(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/SuperVisualSample)
- 三方库
- [库的调用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/ThirdPartyLibrary)
- Native
- [简易Native C++ 示例(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/NativeTemplateDemo)
- [Native XComponent组件的使用(ArkTS)(API 9)](https://gitee.com/harmonyos/codelabs/tree/master/XComponent)
## 使用说明
1. 将独立的应用示例工程导入DevEco Studio进行编译构建及运行调试。
2. 部分应用示例中含有多个模块,开发者可以选择对单个模块进行编译构建,生成一个HAP应用安装包,也可以对整个工程进行编译构建,生成多个HAP应用安装包。
3. 安装运行后,即可在设备上查看应用示例运行效果,以及进行相关调试。
## 约束与限制
1. 安装运行应用示例之前,请先通过config.json文件中的"deviceType"字段来确认该应用示例支持的设备类型,可尝试通过修改该字段使其可以在相应类型的设备上运行(config.json文件一般在代码的entry/src/main路径下,不同的Codelabs可能会有不同)。
2. 配置开发环境时,如果您想让应用示例运行到HarmonyOS上,请参考[DevEco Studio使用说明](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。
3. IDE版本及配套SDK问题,可前往[DevEco Studio版本说明](https://developer.harmonyos.com/cn/docs/documentation/doc-releases/release_notes-0000001057597449)来查看详细的IDE、SDK、插件及Gradle配套版本。
4. 所有OpenHarmony相关Codelabs代码已被全部迁移至OpenHarmony组织之下的[Codelabs](https://gitee.com/openharmony/codelabs)仓中,本仓中不再体现。
## 相关链接
1. HarmonyOS Codelabs官网:[HarmonyOS Codelabs](https://developer.harmonyos.com/cn/documentation/codelabs/)
2. OpenHarmony Codelabs仓:[OpenHarmony Codelabs](https://gitee.com/openharmony/codelabs)