鸿蒙开发:一文了解桌面卡片

简介: 在鸿蒙开发中,服务卡片虽然功能丰富,但也存在一些限制。例如,它不支持极速预览、断点调试和Hot Reload热重载等功能,同时也无法使用setTimeOut。此外,开发过程中还面临其他约束,如不支持导入动态共享包、使用native语言开发或加载native so。目前,服务卡片仅支持基于ArkUI的开发方式,且不支持跨平台开发,仅能使用声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。

前言


本文基于Api13


鸿蒙的桌面卡片功能,也就是服务卡片,和Android端的小部件以及iOS端的小组件功能是一样的,只是叫法不一样,都是将应用内比较核心的功能,或者用户关注度高的功能,通过触发桌面应用进行添加到服务卡片上,进而添加到桌面上,以此达到信息展示的及时性,相关功能直达应用内的便捷效果,可以说在用户体验上,是一个质的提升。


触发方式也是十分的简单,无论你是Android、iOS还是HarmonyOS,只要已经适配了这个功能,在桌面长按应用图标,就可以进行添加小部件/小组件/卡片功能,毕竟,我们是鸿蒙相关的文章,重点就以鸿蒙系统的效果进行展示了。


如下的案例,目前已经开发了卡片功能,我们长按桌面图标之后,就会显示卡片的功能:



点击卡片之后,就会展示卡片的效果页面,这个页面中,我们可以自定义UI,支持多个卡片效果。



点击添加至桌面,就会在手机的桌面展示卡片效果,用户可以根据卡片上的逻辑,可以直观的进行查看一些重要的数据,并且可以点击后,直达某一个功能页面,可以大大提升了用户的体验。



今天,这篇文章,重点了解一下服务卡片的相关知识,下篇文章,会从0到1带着大家实现一个服务卡片。


卡片基础知识


从前言中,我们已经知道,所谓的卡片,就是把应用中重要的功能,添加至桌面或者锁屏页面,是提升用户体验的一个功能,目前,卡片功能无论是应用开发还是元服务开发均是支持的,有一点需要知道,那就是,卡片只支持桌面和锁屏添加使用。


开发模式


我们知道,目前开发鸿蒙提供了两种模型,分别是Stage和FA,卡片呢,也是支持这两种模型的,由于在API7之后的版本,FA不在主推,所以呢,在之后的开发中,还是以Stage模型做为首选。



模型选择Stage之后,关于UI开发方式,这里也简单说一下,也是提供了有两种方式,一种是基于声明式范式ArkTS语言开发的卡片,还有一种则是基于类Web范式JS语言开发的卡片,记得之前在《了解项目的工程结构》一文中,有过重点概述,作为移动端应用的开发者,考虑到性能,复杂度高,开发效率和发展趋势而言,声明式开发方式,绝对是我们的首选方式,当然了,官方也是主推这种方式,所以关于卡片的创建,我们还是以声明式范式ArkTS语言为主,两者的主要区别如下:



卡片类型


当我们去创建一个卡片时,可以发现,有两种选择,一种是Static Widget,也就是静态卡片,另一种是Dynamic Widget,也就是动态卡片,在对应的模块右键点后,找到服务卡片Seivice Widget,如下图所示:



这两种类型的卡片,在整体的运行框架和渲染流程上是一样的,主要的区别是在于静态卡片渲染服务将卡片内容渲染完毕后,卡片的使用方会使用最后一帧渲染的数据作为静态图片显示,其次卡片渲染服务中的卡片实例也会释放该卡片的所有运行资源以节省内存;这样就会导致频繁的刷新会使得静态卡片运行时资源不断的创建和销毁,增加卡片功耗。


以下是两种类型的区别:



静态卡片


关于静态卡片如何交互组件,官方提供了FormLink,可用于静态卡片内部和提供方应用间的交互,当前支持router、message和call三种类型的事件。


动态卡片


动态卡片中,官方提供了postCardAction接口用于动态卡片内部和提供方应用间的交互,和静态一致,也是仅支持router、message和call三种类型的事件,并且只能在卡片控件的点击事件中可以调用。


动态卡片事件实现原理



动态卡片中的三个事件应用场景分别是,首先是router事件,它主要用于跳转指定的UIAbility,有一点需要注意,如果是非系统应用,目前仅支持跳转到自己应用内的UIAbility;第二个是call事件,主要用于拉起指定UIAbility到后台,然后再通过UIAbility申请对应后台长时任务,如完成一个音乐播放等功能;最后一个是message事件,可以使用它拉起FormExtensionAbility,通过onFormEvent接口回调通知,以完成卡片内控件点击消息传递,从而更新卡片内容。


实现原理


具体的实现原理主要牵扯到四个,分别是卡片使用方,卡片提供方,卡片管理服务和卡片渲染服务。


卡片使用方,一般就是设备的桌面,也就是显示卡片内容的宿主应用,可以控制卡片的显示位置,用于和用于进行交互,还可以完成卡片的添加、删除、显示功能。


卡片提供方,也就是创建卡片的应用或者元服务,它是卡片功能的具体实现者,控制着卡片的UI及事件,以及数据更新。


卡片管理服务,它是作为卡片提供方和使用方的桥梁,向使用方提供卡片信息查询、添加、删除等能力,同时向提供方提供卡片被添加、被删除、刷新、点击事件等通知能力,其实说白了,就是用于管理系统中所添加卡片的常驻代理服务。


卡片渲染服务,主要用于管理卡片渲染实例,渲染实例与卡片使用方的卡片组件一一绑定。


卡片实现原理图



相关总结


在鸿蒙开发中,服务卡片虽然功能丰富,但也存在一些限制。例如,它不支持极速预览、断点调试和Hot Reload热重载等功能,同时也无法使用setTimeOut。此外,开发过程中还面临其他约束,如不支持导入动态共享包、使用native语言开发或加载native so。目前,服务卡片仅支持基于ArkUI的开发方式,且不支持跨平台开发,仅能使用声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。


本文标签:HarmonyOS/服务卡片,参考资料:官方文档之服务卡片指导。

相关文章
|
1月前
|
开发者
鸿蒙开发:资讯项目实战之项目初始化搭建
目前来说,我们的资讯项目只是往前迈了很小的一步,仅仅实现了项目创建,步虽小,但概念性的知识很多,这也是这个项目的初衷,让大家不仅仅可以掌握日常的技术开发,也能让大家理解实际的项目开发知识。
鸿蒙开发:资讯项目实战之项目初始化搭建
|
20天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
20天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
26天前
|
缓存 JavaScript IDE
鸿蒙开发:基于最新API,如何实现组件化运行
手动只是让大家了解切换的原理,在实际开发中,可不推荐手动,下篇文章,我们将通过脚本或者插件,快速实现组件化模块之间的切换,实现独立运行,敬请期待!
鸿蒙开发:基于最新API,如何实现组件化运行
|
1月前
|
SQL 弹性计算 数据库
鸿蒙5开发宝藏案例分享---优化应用时延问题
鸿蒙性能优化指南来了!从UI渲染到数据库操作,6大实战案例助你提升应用流畅度。布局层级优化、数据加载并发、数据库查询提速、相机资源延迟释放、手势识别灵敏调整及转场动画精调,全面覆盖性能痛点。附赠性能自检清单,帮助开发者高效定位问题,让应用运行如飞!来自华为官方文档的精华内容,建议收藏并反复研读,共同探讨更多优化技巧。
|
19天前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
73 0
|
20天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
20天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
20天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
1月前
|
缓存
鸿蒙5开发宝藏案例分享---Swiper组件性能优化实战
本文分享了鸿蒙系统中Swiper组件的性能优化技巧,包括:1) 使用`LazyForEach`替代`ForEach`实现懒加载,显著降低内存占用;2) 通过`cachedCount`精准控制缓存数量,平衡流畅度与内存消耗;3) 利用`onAnimationStart`在抛滑时提前加载资源,提升构建效率;4) 添加`@Reusable`装饰器复用组件实例,减少创建开销。实际应用后,图库页帧率从45fps提升至58fps,效果显著。适合处理复杂列表或轮播场景,欢迎交流经验!