# codelabs **Repository Path**: openharmony/codelabs ## Basic Information - **Project Name**: codelabs - **Description**: 分享知识与见解，一起探索代码的独特魅力。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 880 - **Forks**: 418 - **Created**: 2021-02-26 - **Last Updated**: 2025-06-05 ## Categories & Tags **Categories**: harmonyos-guide **Tags**: None ## README # OpenHarmony Codelabs ## 概要简介 为帮助开发者快速熟悉OpenHarmony的能力以及相关的应用开发流程，我们提供了一系列的基于趣味场景的应用示例，即Codelabs，开发者可以根据我们的文档一步步的学习和完成简单项目的开发。 ## 目录 - 优秀案例 - [一次开发，多端部署-音乐专辑（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ExcellentCase/MultiDeviceMusic) - [一次开发，多端部署-视频应用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ExcellentCase/Multi_device_V2) - [健康生活应用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ExcellentCase/Healthy_life) - Ability开发 - [UIAbility和自定义组件生命周期（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/UIAbilityLifeCycle) - [UIAbility内和UIAbility间页面的跳转（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/StageAbility) - [UIAbility内页面间的跳转（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/PagesRouter) - [Stage模型下Ability的创建和使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/StageAbilityDemo) - UI(ArkTS) - [电子相册（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ElectronicAlbum) - [构建多种样式弹窗（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultipleDialog) - [简易计算器（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleCalculator) - [自定义抽奖转盘（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CanvasComponent) - [像素转换（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelConversion) - [二级联动（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SecondLevelLinkage) - [目标管理（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TargetManagement) - [弹性布局（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlexLayout) - [待办列表（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ToDoListArkTS) - [ArkTS基础知识（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/RankingDemo) - [动效示例（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/Animation) - [转场动画的使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimation) - [自定义下拉刷新动画（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/AnimateRefresh) - [ArkUI常用布局容器对齐方式（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/OHLayoutAlign) - [常用组件与布局（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ArkTSComponents) - [Web组件的使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/WebCookie) - [Swiper的使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SwiperArkTS) - [基础组件Slider的使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderExample) - [Web组件抽奖案例（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/WebComponent) - [List组件的使用之商品列表（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List) - [List组件的使用之设置项（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List_HDC) - [购物应用（ArkTS）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts) - [自定义弹窗（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialog) - UI(JS) - [image、image-animator组件的使用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJs) - [rating组件的使用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication) - [slider组件的使用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication) - [switch、chart组件的使用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchChart) - [弹窗基本使用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo) - [动画样式（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo) - [自定义抽奖转盘（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponent) - [购物应用（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingSample) - 公共事件与通知 - [闹钟（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/CommonEventAndNotification/AlarmClock) - 媒体 - [视频播放器（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoPlayer) - [图片编辑（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEdit) - [简易视频播放器（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/SimpleVideo) - [音乐播放器（ArkTS）（Full SDK）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/AudioPlayer) - [图片常见操作（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageOperation) - [简易视频播放器（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony) - [图片编辑（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate) - 安全 - [为应用添加运行时权限（ArkTS）（Full SDK）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Security/AccessPermission) - [字符串加解密（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Security/StringCipherArkTS) - 网络管理 - [新闻数据加载（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS) - 数据库 - [关系型数据库（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/Rdb) - [首选项（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/Preferences) - [应用内字体大小调节（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/SetAppFontSize) - [应用的首次启动（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/FirstStartDemo) - [备忘录（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/NotePadOpenHarmony) - [用户首选项（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Data/PreferenceJS) - [分布式数据库（JS）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Data/JsDistributedData) - 分布式 - [分布式手写板（ArkTS）（Full SDK）（API 10）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/DistributeDraw) - [分布式新闻客户端（ArkTS）（Full SDK）（API 10）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/DistributedNewsClient) - [分布式游戏手柄（ArkTS）（Full SDK）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/HandleGameApplication) - [分布式邮件（ArkTS）（Full SDK）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/OHMailETS) - [分布式亲子早教系统（ArkTS）（Full SDK）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/OpenHarmonyPictureGame) - [分布式遥控器（ArkTS）（Full SDK）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/RemoteControllerETS) - [分布式新闻客户端（JS）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/NewsDemo) - [分布式鉴权（JS）（API 8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/GameAuthOpenH) - 卡片 - [电影卡片（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Card/MovieCard) - [计步器卡片（JS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/Card/StepsCardJS) - 效率提升套件 - [常用组件和容器低代码开发示例（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/EfficiencyEnhancementKit/SuperVisualSample) - 三方库 - [库的调用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/ThirdPartyComponents/ThirdPartyLibrary) - NativeAPI - [简易Native C++ 示例（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/NativeTemplateDemo) - [Native XComponent组件的使用（ArkTS）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/XComponent) - 图形图像 - [手势截屏（ArkTS）（Full SDK）（API 9）](https://gitee.com/openharmony/codelabs/tree/master/GraphicImage/GestureScreenshot) ## 使用说明 1. 将独立的应用示例工程导入DevEco Studio进行编译构建及运行调试。 2. 部分应用示例中含有多个模块，开发者可以选择对单个模块进行编译构建，生成一个HAP应用安装包，也可以对整个工程进行编译构建，生成多个HAP应用安装包。 3. 安装运行后，即可在设备上查看应用示例运行效果，以及进行相关调试。 ## 约束与限制 安装应用示例之前，请先查看"README.md"文件来确认应用示例是否为Stage模型，若为Stage模型需要查看entry/src/main路径下的module.json5文件中的"deviceType"字段来确认该应用支持的设备类型；否则为FA模型，查看entry/src/main路径下的config.json文件中的"deviceType"字段来确认该应用示例支持的设备类型，两种模型都可尝试通过修改该字段使其可以在相应类型的设备上运行。