鸿蒙开发入门
文章平均质量分 84
渐进式的学习鸿蒙开发 & 分享鸿蒙开发的内容
鸿蒙自习室
关注鸿蒙开发。公众号 Harmony自习室
展开
-
鸿蒙媒体开发系列02——媒体系统基本介绍
媒体系统提供用户视觉、听觉信息的处理能力,如音视频信息的采集、压缩存储、解压播放等。在操作系统实现中,通常基于不同的媒体信息处理内容,将媒体划分为不同的模块,包括:音频、视频(也称播放录制)、图片等。如下图所示,媒体系统面向应用开发提供音视频应用、图库应用的编程框架接口;面向设备开发提供对接不同硬件芯片适配加速功能;中间以服务形态提供媒体核心功能和管理机制。提供音量管理、音频路由管理、混音管理接口与服务。提供音视频解压播放、压缩录制接口与服务。提供图片编解码、图片处理接口与服务。原创 2024-09-16 22:04:41 · 659 阅读 · 0 评论 -
鸿蒙媒体开发系列01——资源分类&访问
应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。借助资源文件能力,开发者在应用中自定义资源,自行管理这些资源在不同的设备或配置中的表现。开发者直接使用系统预置的资源定义。原创 2024-09-16 22:01:10 · 706 阅读 · 0 评论 -
鸿蒙交互事件开发08——多层手势事件
多层级手势事件指父子组件嵌套时,父子组件均绑定了手势或事件。在该场景下,手势或者事件的响应受到多个因素的影响,相互之间发生传递和竞争,容易出现预期外的响应。本章主要介绍多层级手势事件的默认响应顺序,以及如何通过设置相关属性影响多层级手势事件的响应顺序。可以通过设置属性,控制默认的多层级手势事件竞争流程,更好的实现手势事件。目前,responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发,从而可以影响到onTouch事件和手势的响应。原创 2024-09-15 22:35:25 · 613 阅读 · 0 评论 -
鸿蒙交互事件开发07——手势竞争问题
如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。原创 2024-09-15 22:32:15 · 642 阅读 · 0 评论 -
鸿蒙交互事件开发06——组合手势
如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。组合手势由多种单一手势组合而成,通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型,支持顺序识别、并行识别和互斥识别三种类型。mode:必选参数,为GestureMode枚举类。用于声明该组合手势的类型。取值有三个:Sequence、Parallel、Exclusive,分别表示:顺序识别、并行识别、互斥识别。原创 2024-09-11 23:37:28 · 883 阅读 · 0 评论 -
鸿蒙交互事件开发05——常用的6种手势类型
我们在鸿蒙交互事件开发04——手势事件中了解到,默认情况下,手势分为一下几种:👉🏻 TapGesture:点击手势,支持单次点击、多次点击的识别。👉🏻 LongPressGesture: 长按手势。👉🏻 PanGesture: 平移手势(滑动距离小于5vp时触发)👉🏻 PinchGesture: 捏合手势👉🏻 RotationGesture: 旋转手势👉🏻 SwipGesture: 滑动手势(滑动最小速度为100vp/s时触发)原创 2024-09-11 23:25:28 · 871 阅读 · 0 评论 -
鸿蒙交互事件开发04——手势事件
手势事件是移动应用开发中最常见的事件之一,鸿蒙提供了一些方法来绑定手势事件。通过给各个组件绑定不同的手势事件,并设计事件的响应方式,当手势识别成功时,ArkUI框架将通过事件回调通知组件手势识别的结果。原创 2024-09-11 22:56:09 · 925 阅读 · 0 评论 -
鸿蒙交互事件开发03——焦点体系
焦点系统在页面初次构建完成时,会搜索当前页下的所有组件,找到第一个绑定了defaultFocus(true)的组件,然后将该组件置为默认焦点,若无任何组件绑定defaultFocus(true),则将第一个找到的可获焦的组件置为默认焦点。以如下应用为例,应用布局如下:以下是实现该应用的示例代码,且示例代码中没有设置defaultFocus:i原创 2024-08-24 23:00:43 · 1129 阅读 · 0 评论 -
鸿蒙交互事件开发02——鼠标与键盘事件
鸿蒙除了常见的触摸事件外,也支持一些外接设备的事件,例如:鼠标和键盘事件(题外话一句:不出意外的话,鸿蒙将会有PC版)。其中,鼠标事件可以是鼠标外设,也可以是触控板。原创 2024-08-17 21:30:30 · 1073 阅读 · 0 评论 -
鸿蒙交互事件开发01——点击/拖拽/触摸事件
1如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。1。原创 2024-08-16 22:59:13 · 805 阅读 · 0 评论 -
鸿蒙动画开发05——页面转场动画
number}): number})重定向指定页面。从PageB回退到之前的页面PageA。对于PageB,指定RouteType为None或者Pop的PageTransitionExit组件样式生效,对于PageA,指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。跳转到下一页面。PageA跳转到下一个新的界面PageB。原创 2024-08-14 22:49:42 · 1305 阅读 · 0 评论 -
鸿蒙动画开发04——共享元素转场动画
两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。两个参数分别介绍如下:id:两个页面共享元素的id;{ duration?: number, // 动画播放时长 curve?: Curve | string, // 动画曲线 delay?: number, // 初始延迟时间 motionPath?: { // 运动路径信息 path: string, form?原创 2024-08-13 22:52:43 · 863 阅读 · 0 评论 -
鸿蒙动画开发03——弹簧曲线动画
ArkUI提供了预置动画曲线函数(指定了动画属性从起始值到终止值的变化规律)如Linear、Ease、EaseIn等。另外,ArkUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线,开发者可以设置超过设置的终止值,在终止值附近震荡,直至最终停下来的效果。弹簧曲线的动画效果比其他曲线具有更强的互动性、可玩性。弹簧曲线的接口包括两类,一类是springCurve,另一类是springMotion和responsiveSpringMotion,这两种方式都可以产生弹簧曲线。下面分别做介绍。原创 2024-08-11 23:10:31 · 714 阅读 · 0 评论 -
鸿蒙动画开发02——组件内转场动画
组件的插入、删除过程即为组件本身的转场过程,组件的插入、删除动画称为组件内转场动画。通过组件内转场动画,可定义组件出现、消失的效果。原创 2024-08-08 23:06:48 · 967 阅读 · 0 评论 -
鸿蒙动画开发01——布局更新动画
从现在起,我们将开启一个新系列——鸿蒙动画开发系列,在这个系列中,我们将分别接触鸿蒙的各种动画效果。在开始之前,我们先对动画做一个简单的介绍。动画的原理是在一个时间段内,多次改变UI外观,由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧,对应一次屏幕刷新,而决定动画流畅度的一个重要指标就是帧率FPS(Frame Per Second),即每秒的动画帧数,帧率越高则动画就会越流畅。ArkUI中,产生动画的方式是改变属性值且指定动画参数。原创 2024-08-06 22:45:02 · 960 阅读 · 0 评论 -
鸿蒙UI系统组件15——画布(Canvas)
Entry@Componentstruct CanvasExample1 { //用来配置CanvasRenderingContext2D对象的参数,包括是否开启抗锯齿,true表明开启抗锯齿。private settings: RenderingContextSettings = new RenderingContextSettings(true) //用来创建CanvasRenderingContext2D对象,通过在canvas中调用CanvasRenderingContext2D对象来绘制。原创 2024-08-05 22:52:23 · 1699 阅读 · 0 评论 -
hello鸿蒙
鸿蒙是一款由华为推出的全生态操作系统(探索 | 华为开发者联盟),最近几年发展势头非常强劲,现在开始,让我们来一起认识他吧。本文针对鸿蒙基本的开发内容做一次概览性的串联。咱们学习一款新的开发平台,一般先关注两个事情:a)开发工具;b)开发语言。鸿蒙的开发目前主推ArkTs语言,它的开发方式倾向于声明式开发,应用的开发模式与当下的前端MVVM接近,对前端开发者比较友好。如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!原创 2024-06-03 23:35:08 · 661 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part01: 装饰器&UI描述
如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。例如,Divider组件不包含构造参数。鸿蒙UI的开发在build()函数中完成,整个build()函数的开发类似于编写描述文件,我们也将buid()开发过程称为。至此,我们已经简单了解了鸿蒙UI开发中的两个重要概念,装饰器和UI描述,接下来,我们开始了解UI开发啦,Let's Go!属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行,示例代码如下:。d)给组件添加子组件。原创 2024-06-04 23:12:27 · 932 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part02: 组件开发
在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。自定义组件具有以下特点:可组合:允许开发者组合使用系统组件、及其属性和方法。可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。原创 2024-06-11 22:55:04 · 1255 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part03: 组件的生命周期
自定义组件的创建:自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear,则执行aboutToAppear方法。在首次渲染的时候,执行build方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。原创 2024-06-12 23:07:24 · 1578 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part04: 组件的UI逻辑复用
至此,我们已经简单了解了使用@Builder装饰器和@BuilderParam装饰器来实现UI组合关系的复用,以及如何复用父组件传入的自定义@Builder函数。接下来,我们将学习如何使用@Styles和@Extend装饰器复用组件的特定样式,请关注 “鸿蒙UI开发快速入门 —— part05”;如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!长按下面的二维码关注公众号。原创 2024-06-13 23:13:26 · 1253 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part05:组件的样式复用
至此,我们将UI开发的组件样式相关的介绍完毕了。回顾一下,涉及到了@Builder UI描述的概念以及如何添加UI组件;UI和界面相关的的生命周期;UI的逻辑复用和样式复用;至此,我们已经可以编写一个静态页面了,但还不够,我们未来将继续学习状态管理和条件渲染。有了状态管理和条件渲染,我们的界面就能随着用户的交互而发生变化。下一个阶段,请持续关注:“鸿蒙UI开发快速入门 —— part06”如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!长按下面的二维码关注公众号。原创 2024-06-15 20:50:50 · 1051 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part06:组件状态管理之@State装饰器
状态管理的内容量比较大,为了阅读的舒适性,本文先介绍@State装饰器。后续:@Prop、@Link、@Provide/@Consume、@Observed、@ObjectLink将分别介绍,持续关注 "鸿蒙UI开发快速入门 —— part07"。如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!原创 2024-06-16 23:32:15 · 1137 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器
至此,我们在@State装饰器的基础上又学习了@Props装饰器和@Link装饰器,@Props装饰器用于接受来自父组件的变量,@Link也用于接受来自父组件的变量,但额外的,@Link装饰器在子组件中被修改后,父组件中对应的值也会发生改变。剩下的状态装饰器请持续关注 “鸿蒙UI开发快速入门 —— part08 ”原创 2024-06-17 23:20:57 · 1600 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part08: 组件状态管理之@Provide/@Consume装饰器
我们再想一种场景:如果有一个状态,有非常多个子组件都需要共用,同时,子组件的层级可能会不止一层,此时,如果我们想做到类似的效果的话,则需要为每个层级都传递一遍@Props,这将是灾难。为了解决多层级的状态同步问题,鸿蒙引入了 @Provide装饰器和@Consume装饰器。原创 2024-06-22 14:57:59 · 996 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part09: 应用级状态管理LocalStorage & AppStorage
如果开发者要实现应用级的,或者多个页面的状态数据共享,就需要用到应用级别的状态管理的概念。ArkTS根据不同特性,提供了多种应用状态管理的能力原创 2024-06-23 23:02:03 · 1021 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part10: PersistentStorage与Environment
PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用程序通过API,以决定哪些AppStorage属性应借助PersistentStorage持久化。UI和业务逻辑不直接访问PersistentStorage中的属性,所有属性访问都是对AppStorage的访问,AppStorage中的更改会自动同步到PersistentStorage。PersistentStorage和AppStorage中的属性建立双向同步。原创 2024-06-23 23:05:52 · 978 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part11: 鸿蒙计算器开发实践
经过我们前面10章的学习,我们基本上可以开发出一个简单的APP了,为了巩固学习的内容,我们先开发一个计算器APP来连个手(文末有源代码),界面如下:包含基本的计算器运算功能支持一键清空,支持逐个删除数字支持将上次计算的过程保存下来,下次打开app继续;支持清理之前保存的记录这里面我们会用到知识如下:开发UI界面(基本控件的使用以及基本布局的使用);监听用户点击事件,在输入栏中及时反馈(动态交互);支持将过程持久化到本地,下次打开后自动恢复;let's go!💪🏻💪🏻💪🏻。原创 2024-06-24 23:03:37 · 1205 阅读 · 0 评论 -
鸿蒙UI开发快速入门 —— part12: 渲染控制
在声明式描述语句中开发者除了使用系统组件外,还可以使用渲染控制语句来辅助UI的构建,这些渲染控制语句包括控制组件是否显示的条件渲染语句,基于数组数据快速生成组件的循环渲染语句。至此,我们的“鸿蒙UI开发快速入门系列”正式结束了!接下来,我们将围绕UI开发的一些细节做展开,例如:学习ArkUI提供的所有布局方式、学习系统的常用控件、UI动画等。请持续关注后续“鸿蒙UI开发系列”。原创 2024-06-28 21:33:17 · 925 阅读 · 0 评论 -
ArcTs布局入门01——线性布局(Row/Column)
接下来,我们将介绍弹性布局(Flex),请持续关注“ArcTs布局入门02”。如果你对鸿蒙开发感兴趣,加入“Harmony自习室”吧~👇🏻👇🏻👇🏻👇🏻扫描下面的二维码关注公众号。原创 2024-06-30 22:55:16 · 1207 阅读 · 0 评论 -
ArcTs布局入门02——弹性布局(Flex)
弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多,比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。主轴为水平方向的Flex容器示意图弹性布局是仅次于线性布局的一种高频使用布局,未来在很多demo中都将会见到他的身影。接下来,我们将介绍剩下的其他布局,请持续关注“ArcTs布局入门03”原创 2024-07-01 23:07:31 · 1225 阅读 · 0 评论 -
ArcTs布局入门03——层叠布局(Stack)
叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。如下图,Stack作为容器,容器内的子元素(子组件)的顺序为Item1->Item2->Item3。如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!原创 2024-07-02 22:42:28 · 424 阅读 · 0 评论 -
ArcTs布局入门04——相对布局 & 媒体查询
RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。子元素并不完全是上图中的依赖关系。比如,Item4可以以Item2为依赖锚点,也可以以RelativeContainer父容器为依赖锚点。媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。原创 2024-07-03 22:20:45 · 1184 阅读 · 0 评论 -
ArcTs布局入门05——栅格布局(GridRow/GridCol)
后续还有网格布局,请持续关注“ArcTs布局入门06”如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧.原创 2024-07-08 22:29:17 · 1776 阅读 · 0 评论 -
ArcTs布局入门06——网格布局(Grid/GridItem)
网格布局是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem,用于构建网格布局。Grid用于设置网格布局相关参数,GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。原创 2024-07-09 22:34:57 · 1125 阅读 · 0 评论 -
ArcTs布局入门07——列表(List)
列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列表、购物清单等)。使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem,为列表中的行或列提供单个视图,或使用ForEach迭代一组行或列,或混合任意数量的单个视图和ForEach结构,构建一个列表。原创 2024-07-10 23:07:21 · 1130 阅读 · 0 评论 -
ArkTs布局入门08——轮播(Swiper)
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。至此,我们已经了解了ArkTs的所有系统布局,“ArkTs布局入门”系列正式结束,未来,我们将逐步学习了解基本系统组件与系统动画,请持续关注。原创 2024-07-12 23:16:20 · 1373 阅读 · 0 评论 -
鸿蒙UI系统组件01——文本组件(Text/Span)
Text是文本组件,是我们开发UI界面中最常见的组件之一,通常用于展示用户的视图,如显示文章的文字。下面将对文本组件展开介绍。通过textAlign属性设置文本对齐样式。原创 2024-07-13 22:41:49 · 419 阅读 · 0 评论 -
鸿蒙UI系统组件02——按钮(Button)
Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。设置边框弧度。一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。设置文本样式。通过添加文本样式设置按钮文本的展示样式。设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。用作功能型按钮。为删除操作创建一个按钮。。原创 2024-07-14 22:18:00 · 903 阅读 · 0 评论 -
鸿蒙UI系统组件03——文本输入(TextInput/TextArea)
TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。设置无输入时的提示文本。TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本'})设置输入框当前的文本内容。TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})添加backgroundColor改变输入框的背景颜色。原创 2024-07-16 23:21:54 · 920 阅读 · 0 评论