1、图标处理
介绍:为开发者提供丰富的高端精致图标处理API。开发者可轻松集成,开发出与华为HarmonyOS多设备UI设计风格完美融合的图标。
总结:通过此Codelab,可了解到以下知识点:
- 如何使用Harmony OS SDK完成一个基本Demo编写。
- 如何调用Harmony OS SDK中的UIDesignKit。
详情地址:developer.huawei.com/consumer/cn…
2、Web组件之cookie常见操作
介绍:使用ArkTS语言实现一个简单的免登录过程,向大家介绍基本的cookie管理操作。
相关知识:Web
总结:通过此Codelab,可了解到以下知识点:
- Web组件的基本用法。
- 使用WebCookieManager进行cookie管理操作。
详情地址:developer.huawei.com/consumer/cn…
3、Stage模型下Ability的创建和使用
介绍:基于Stage模型,对Ability的创建和使用进行讲解。首先在课程中我们将带领大家使用DevEco Studio创建一个Stage模型Ability,并使用UIAbilityContext启动另一个Ability,然后借助Want,在Ability之间传递参数,最后我们使用HiLog打印Ability的生命周期。
相关知识:Ability框架
总结:通过此Codelab,可了解到以下知识点:
- UIAbilityContext的获取方式和startAbility方法的使用。
- Want的基础使用。
- HiLog的使用方式。
- Ability相关生命周期函数的调用。
详情地址:developer.huawei.com/consumer/cn…
4、窗口管理
介绍:基于窗口能力,实现验证码登录的场景。
相关知识:窗口管理、沉浸式
总结:通过此Codelab,可了解到以下知识点:
- 如何实现主窗口沉浸式。
- 如何创建子窗口,并设置子窗口属性。
- 主窗口与子窗口之间如何传递信息。
详情地址:developer.huawei.com/consumer/cn…
5、首选项
介绍:基于HarmonyOS的首选项能力实现的一个简单示例。
相关知识:数据库、首选项
总结:通过此Codelab,可了解到以下知识点:
- 如何使用TextInput输入框。
- 如何使用首选项数据库。
详情地址:developer.huawei.com/consumer/cn…
6、分布式邮件
介绍:基于应用接续、分布式数据对象、分布式文件系统等功能,实现分布式邮件应用。
相关知识:分布式文件、分布式数据对象、分布式邮件
总结:通过此Codelab,可了解到以下知识点:
- 通过分布式数据对象传输数据。
- 使用分布式文件系统跨设备获取文件。
详情地址:developer.huawei.com/consumer/cn…
7、一次开发,多端部署-图片美化
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的图片美化页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏、平板以及2in1不同的设备尺寸设计对应页面。
相关知识:双指缩放
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署的方案设计。
- 通过双指缩放实现组件缩放。
详情地址:developer.huawei.com/consumer/cn…
8、一次开发,多端部署-银行理财
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的银行理财应用。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案,解决系统能力差异的兼容性问题。
相关知识:银行理财、一次开发多端部署
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署的方案设计。
- 实现自定义弹窗。
- 使用分栏组件Navigation实现分栏布局。
详情地址:developer.huawei.com/consumer/cn…
9、一次开发,多端部署-即时通讯
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的即时通讯页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏以及2in1不同的设备尺寸设计对应页面。
相关知识:一次开发多端部署
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署的方案设计。
- 通过Navigation组件实现分栏布局的一次开发,多端部署。
详情地址:developer.huawei.com/consumer/cn…
10、一次开发,多端部署-音乐专辑
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署音乐专辑页。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案,通过合理的工程结构组织代码,解决系统能力差异的兼容性问题。
相关知识:音乐专辑、一次开发多端部署
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署的方案设计。
- 通过自适应布局和响应式布局方案实现一次开发,多端部署。
详情地址:developer.huawei.com/consumer/cn…
11、一次开发,多端部署-社区评论
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的社区评论页。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案,解决系统能力差异的兼容性问题。
相关知识:一次开发多端部署、响应式布局、自适应布局
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署的方案设计。
- 实现重复列表、动态卡片、挪移布局等一次开发,多端部署布局设计。
详情地址:developer.huawei.com/consumer/cn…
12、一次开发,多端部署-购物比价
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的购物比价应用页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏、平板以及2in1不同的设备尺寸设计对应页面。同时实现以画中画模式呈现购物直播内容。
相关知识:一次开发多端部署、画中画
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的多设备完成一次开发,多端部署的方案设计。
- 通过自适应布局和响应式布局方案实现一次开发,多端部署。
- 通过Navigation组件实现分栏布局。
- 通过@ohos.PiPWindow模块实现画中画功能。
详情地址:developer.huawei.com/consumer/cn…
13、一次开发,多端部署-长视频
介绍:基于自适应布局和响应式布局,实现一次开发,多端部署的长视频页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏、平板以及2in1不同的设备尺寸设计对应页面。
相关知识:一次开发多端部署、自适应布局、响应式布局
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的多设备完成一次开发,多端部署的方案设计。
- 通过自适应布局和响应式布局方案实现一次开发,多端部署。
- 使用AVPlayer+XComponent实现视频播放功能。
- 使用window实现视频横屏及全屏播放功能。
详情地址:developer.huawei.com/consumer/cn…
14、Web组件抽奖案例
介绍:基于ArkTS的声明式开发范式的样例,主要介绍了Web组件如何加载本地、云端的H5和Vue页面。
相关知识:Web组件
总结:通过此Codelab,可了解到以下知识点:
- 使用Web组件加载H5/Vue页面。
- 使用ArkTS与H5/Vue页面进行交互。
详情地址:developer.huawei.com/consumer/cn…
15、常用组件与布局
介绍:HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。在本篇Codelab中,您将通过一个简单的购物社交应用示例,学习如何使用常用的基础组件和容器组件。本示例主要包含:“登录”、“首页”、“我的”三个页面。
相关知识:登录
总结:通过此Codelab,可了解到以下知识点:
- Button、Image、TextInput、Text等基础组件的使用。
- Column、Row、List、Tabs等容器组件的使用。
详情地址:developer.huawei.com/consumer/cn…
16、溪村小镇
介绍:基于ArkUI实现了一个展示溪村小镇的应用,主要用于呈现ArkUI的基本能力和动画效果。
相关知识:Canvas画布、动画、手势处理
总结:通过此Codelab,可了解到以下知识点:
- 实现页面跳转和自定义弹窗。
- 识别用户操作手势并触发相应事件。
- 添加页面动画效果。
- 使用画布组件自定义绘制图形。
详情地址:developer.huawei.com/consumer/cn…
17、健康生活应用
介绍:介绍如何实现一个简单的健康生活应用。
相关知识:首选项、关系型数据库、ArkTS
总结:通过此Codelab,可了解到以下知识点:
- ArkUI基础组件、容器组件的使用。
- 使用页面路由跳转到指定页面并传递所需参数。
- 基于基础组件封装自定义组件,如日历、弹窗等。
- 数据驱动UI组件刷新。
- 使用首选项接口实现应用权限管理。
- 使用关系型数据库读写关系型数据。
详情地址:developer.huawei.com/consumer/cn…
18、目标管理
介绍:介绍如何使用@State、@Prop、@Link、@Watch、@Provide、@Consume管理页面级变量的状态,实现对页面数据的增加、删除、修改。
相关知识:状态管理
总结:通过此Codelab,可了解到以下知识点:
- @State、@Prop、@Link、@Watch、@Provide、@Consume的使用。
- List组件的使用。
- 自定义弹窗的使用。
- Slider组件的使用。
详情地址:developer.huawei.com/consumer/cn…
19、UIAbility内页面间的跳转
介绍:基于Stage模型下的UIAbility开发,实现UIAbility内页面间的跳转和数据传递。
相关知识:UIAbility
总结:通过此Codelab,可了解到以下知识点:
- 使用页面路由实现应用内页面跳转。
详情地址:developer.huawei.com/consumer/cn…
20、待办列表
介绍:介绍如何使用ArkTS声明式语法和基础组件,实现简易待办列表。效果为点击某一事项,替换标签图片、虚化文字。
相关知识:基础组件
总结:通过此Codelab,可了解到以下知识点:
- ArkTS声明式语法。
- Image、Text、Column、Row等基础组件的使用。
详情地址:developer.huawei.com/consumer/cn…
21、UIAbility和自定义组件生命周期
介绍:描述了应用运行过程中UIAbility和自定义组件的生命周期。对于UIAbility,描述了Create、Foreground、Background、Destroy四种生命周期。对于自定义组件描述了aboutToAppear、onPageShow、onPageHide、onBackPress、aboutToDisappear五种生命周期。
相关知识:UIAbility
总结:通过此Codelab,可了解到以下知识点:
- UIAbility生命周期。
- 自定义组件生命周期。
详情地址:developer.huawei.com/consumer/cn…
22、应用内字体大小调节
介绍:介绍如何使用基础组件Slider,通过拖动滑块调节应用内字体大小。
相关知识:ArkTS、首选项
总结:通过此Codelab,可了解到以下知识点:
- 使用Slider实现滑动条。
- 使用首选项实现持久化应用轻量级数据。
详情地址:developer.huawei.com/consumer/cn…
23、一次开发,多端部署-购物应用
介绍:基于自适应布局和响应式布局,实现购物应用在手机、折叠屏、平板等不同屏幕尺寸设备上按不同设计显示。通过common、features、product三层工程结构,实现一次开发,多端部署。
相关知识:一次开发,多端部署、自适应布局、响应式布局
总结:通过此Codelab,可了解到以下知识点:
- 针对不同屏幕尺寸的设备完成一次开发,多端部署页面设计。
- 按照三层工程结构划分模块、组织代码。
- 通过自适应布局、响应式布局、栅格布局实现一次开发,多端部署。
详情地址:developer.huawei.com/consumer/cn…
24、一次开发,多端部署-视频应用
介绍:基于“一次开发,多端部署”提供的自适应布局和响应式布局能力,实现了常见的视频播放应用的主界面。通过三层工程结构尽可能复用了部分代码,并根据设备尺寸的区别设计了对应的页面以兼顾美观和易用。应用被打开时会根据具体的设备形态显示对应的UI界面,主要包括手机、折叠屏和平板。
相关知识:一次开发,多端部署、自适应布局、响应式布局
总结:通过此Codelab,可了解到以下知识点:
- 根据设备尺寸形态设计不同的页面布局。
- 使用栅格布局实现“一次开发,多端部署”能力。
详情地址:developer.huawei.com/consumer/cn…
25、健康生活卡片
介绍:基于健康生活应用实现ArkTS卡片,介绍卡片的开发及生命周期。
相关知识:ArkTS卡片、关系型数据库
总结:通过此Codelab,可了解到以下知识点:
- 使用ArkTS卡片能力实现2x2和2x4规格的卡片。
- 使用关系型数据库完成创建、查询、添加、删除卡片数据。
详情地址:developer.huawei.com/consumer/cn…
26、应用首次启动
介绍:基于自定义弹框、首选项和页面路由实现一个模拟应用首次启动的案例。
相关知识:首次启动、首选项、自定义弹框
总结:通过此Codelab,可了解到以下知识点:
- 使用首选项功能实现数据持久化。
- 使用CustomDialogController实现自定义弹窗。
- 使用router实现通过url跳转指定页面。
详情地址:developer.huawei.com/consumer/cn…
27、WaterFlow容器的使用
介绍:主要WaterFlow容器的使用。
相关知识:WaterFlow、FlowItem、LazyForEach
总结:通过此Codelab,可了解到以下知识点:
- WaterFlow容器的使用。
- LazyForEach的使用。
详情地址:developer.huawei.com/consumer/cn…
28、库的调用
介绍:主要向开发者展示了在Stage模型中,如何调用已经上架的社区库和项目内创建的本地库。
相关知识:三方库
总结:通过此Codelab,可了解到以下知识点:
- 如何创建及调用本地三方库。
- 如何调用社区三方库。
详情地址:developer.huawei.com/consumer/cn…
29、构建多种样式弹窗
介绍:介绍如何使用弹窗功能,实现四种类型弹窗。分别是:警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。
相关知识:弹窗、自定义弹窗
总结:通过此Codelab,可了解到以下知识点:
使用CustomDialogController实现自定义弹窗。
使用AlertDialog实现警告弹窗。
使用DatePickerDialog实现日期滑动选择弹窗。
使用TextPickerDialog实现文本滑动选择弹窗。
详情地址:developer.huawei.com/consumer/cn…
30、文件管理
介绍:介绍了如何实现文件管理的相关操作。
相关知识:文件管理
总结:通过此Codelab,可了解到以下知识点:
- 基本的文件读写操作。
- 对用户文件的读写能力。
详情地址:developer.huawei.com/consumer/cn…
31、ArkUI常用布局容器对齐方式
介绍:介绍Flex、Column、Row和Stack这四种布局容器内子组件对齐方式的设置方法。
相关知识:ArkUI
总结:通过此Codelab,可了解到以下知识点:
- Flex、Column、Row和Stack四种常用布局容器在主轴和交叉轴的对齐方式。
详情地址:developer.huawei.com/consumer/cn…
32、二级联动
介绍:介绍如何基于List组件实现一个导航和内容的二级联动效果。
相关知识:二级联动、ListItemGroup
总结:通过此Codelab,可了解到以下知识点:
- 使用List组件实现导航与内容联动的效果。
- ListItemGroup组件的使用方法。
详情地址:developer.huawei.com/consumer/cn…
33、ArkTS基础知识
介绍:使用声明式语法和组件化基础知识,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使用@Builder创建排行列表布局内容,使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键,来学习自定义组件生命周期函数。
相关知识:ArkTS
总结:通过此Codelab,可了解到以下知识点:
- 条件渲染、循环渲染语法的使用。
- @State、@Prop、@Link修饰器的使用。
- @Builder修饰器的使用。
- 自定义组件生命周期函数onBackPress的调用。
详情地址:developer.huawei.com/consumer/cn…
34、Swiper的使用
介绍:介绍了滑动容器组件Swiper的几种常见的应用场景,包括顶部导航、轮播图以及视频滑动播放。
相关知识:Swiper、Stack、Video
总结:通过此Codelab,可了解到以下知识点:
- 使用Swiper组件实现顶部导航、轮播图、视频滑动播放等场景。
- 使用Stack组件实现堆叠布局。
- 使用@Extend快速定义并复用组件的自定义样式。
详情地址:developer.huawei.com/consumer/cn…
35、转场动画的使用
介绍:通过一个简单的样例,学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间转场、组件内转场以及共享元素转场。
相关知识:转场动画
总结:通过此Codelab,可了解到以下知识点:
- 如何实现页面间转场动画。
- 如何实现组件内转场动画。
- 如何实现共享元素转场动画。
详情地址:developer.huawei.com/consumer/cn…
36、动效示例
介绍:利用ArkUI组件不仅可以实现属性变化引起的属性动画,也可以实现父组件状态变化引起子组件产生动画效果,这种动画为显式动画。
相关知识:动画
总结:通过此Codelab,可了解到以下知识点:
- 如何使用animateTo实现显式动画。
- 如何使用animation为组件添加属性动画。
详情地址:developer.huawei.com/consumer/cn…
37、弹性布局
介绍:基于Flex容器组件,实现弹性布局效果。弹性布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。
相关知识:Flex组件、Search组件、布局
总结:通过此Codelab,可了解到以下知识点:
- 使用Flex容器组件,实现弹性布局效果。
- 使用if/else实现条件渲染。
- 使用ForEach实现循环渲染。
详情地址:developer.huawei.com/consumer/cn…
38、电子相册
介绍:介绍了如何实现一个简单的电子相册应用,主要功能包括:
- 实现首页顶部的轮播效果。
- 实现页面多种布局方式。
- 实现通过手势控制图片的放大、缩小、左右滑动查看细节等效果。
相关知识:手势控制
总结:通过此Codelab,可了解到以下知识点:
- 如何实现首页顶部的轮播效果。
- 如何实现页面跳转时共享元素的转场动画效果。
- 如何通过手势控制图片的放大、缩小、左右滑动查看细节等效果。
详情地址:developer.huawei.com/consumer/cn…
39、List组件的使用之商品列表
介绍:HarmonyOS ArkTS提供了丰富的接口和组件,开发者可以根据实际场景和开发需求,选用不同的组件和接口。在本篇CodeLab中,我们使用Scroll组件、List组件以及LazyForEach组件实现一个商品列表的页面,并且拥有下拉刷新、懒加载和到底提示的效果。
相关知识:List、懒加载
总结:通过此Codelab,可了解到以下知识点:
- 使用Scroll组件与List组件实现列表布局。
- 使用onTouch事件实现下拉刷新动作与懒加载效果。
详情地址:developer.huawei.com/consumer/cn…
40、List组件的使用之设置项
介绍:使用List组件、Toggle组件以及Router接口,实现一个简单的设置页,点击将跳转到对应的详细设置页面。
相关知识:List
总结:通过此Codelab,可了解到以下知识点:
- 使用List组件实现列表布局。
- 使用@CustomDialog实现自定义弹窗。
详情地址:developer.huawei.com/consumer/cn…
41、ArkTS与H5的交互
介绍:介绍H5如何调用ArkTS侧相关功能并且获取ArkTS侧的回调数据。以“获取通讯录”为示例分步去讲解JSBridge桥接的实现。
相关知识:WebView、JSBridge桥接
总结:通过此Codelab,可了解到以下知识点:
- ArkTS侧如何使用桥接通道提供给H5调用方法。
- H5如何接收ArkTS侧的异步数据。
详情地址:developer.huawei.com/consumer/cn…
42、基础组件Slider的使用
介绍:通过一个简单的样例,学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画。
相关知识:ArkTS、Slider组件
总结:通过此Codelab,可了解到以下知识点:
- Slider组件的使用。
- Image组件的使用。
- Text组件的使用。
- 通用属性rotate和scale属性的使用。
详情地址:developer.huawei.com/consumer/cn…
43、像素转换
介绍:介绍像素单位的基本知识与像素单位转换API的使用。通过像素转换案例,向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。
相关知识:像素转换、vp、fp
总结:通过此Codelab,可了解到以下知识点:
- 不同像素单位的使用。
- 像素单位转换相关API的使用。
详情地址:developer.huawei.com/consumer/cn…
44、自定义下拉刷新动画
介绍:介绍组件动画animation属性设置。当组件的某些通用属性变化时,可以通过属性动画实现渐变效果,提升用户体验。
相关知识:属性动画
总结:通过此Codelab,可了解到以下知识点:
- 使用属性动画实现自定义下拉组件。
- 使用属性动画实现自定义刷新组件。
详情地址:developer.huawei.com/consumer/cn…
45、关系型数据库
介绍:以记账为例,使用关系型数据库的相关接口实现了对账单的增、删、改、查操作。
相关知识:关系型数据库
总结:通过此Codelab,可了解到以下知识点:
- 操作关系型数据库对数据进行增、删、改、查操作。
详情地址:developer.huawei.com/consumer/cn…
46、简易计算器
介绍:基于基础组件、容器组件,实现一个支持加减乘除混合运算的计算器。
相关知识:ForEach组件、TextInput组件、Image组件
总结:通过此Codelab,可了解到以下知识点:
- ForEach组件的使用。
- TextInput组件的使用。
- Image组件的使用。
详情地址:developer.huawei.com/consumer/cn…
47、自定义抽奖转盘
介绍:基于画布组件、显式动画,实现的一个自定义抽奖圆形转盘。
相关知识:画布组件、显式动画、自定义弹窗
总结:通过此Codelab,可了解到以下知识点:
- 使用画布组件Canvas,画出抽奖圆形转盘。
- 使用显式动画启动抽奖功能。
- 使用自定义弹窗弹出抽中的奖品。
详情地址:developer.huawei.com/consumer/cn…
48、ArkTS开发案例
介绍:介绍通过ArkTS语法,来实现一些基础的算法,例如水仙花数,打印九九乘法表等。
相关知识:ArkTS
总结:通过此Codelab,可了解到以下知识点:
- 掌握基本的ArkTS语法,可以通过ArkTS语法完成基本的算法实现。