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

程序员一鸣
• 阅读 2

前言

本文基于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/服务卡片,参考资料:官方文档之服务卡片指导。

点赞
收藏
评论区
推荐文章
使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南
随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍
少湖说 少湖说
7个月前
鸿蒙原生开发手记:02-服务卡片开发
介绍服务卡片是一直桌面小组件,可以放置在桌面上等位置,一触即达。服务卡片分为静态卡片和动态卡片两类。本文介绍静态卡片。创建回到DevEco,在目录entry右键,点击创建ServiceWidget,选择StaticWidget,点击Next。输入名称,选择
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨UNI-app适合个人开发者使用吗?
UNIapp非常适合个人开发者使用,原因如下:跨平台高效开发:UNIapp基于Vue.js,支持一次编写代码,多端发布,包括iOS、Android、H5及各大小程序平台,显著降低开发成本。组件丰富:提供大量内置组件和API,加速开发进程,同时支持自定义组件
京东云开发者 京东云开发者
5个月前
使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南
作者:京东零售利齐诺随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列
码农较瘦 码农较瘦
1个月前
鸿蒙Ability对比Android的Fragment
鸿蒙通过Ability和动态组件(NodeController)实现类似AndroidFragment的模块化UI,采用声明式开发,生命周期更简洁(onStart/Active/Inactive/Stop)。相比Fragment,鸿蒙在资源占用、渲染效率(支持Vulkan)、跨设备适配及权限管理方面更优,支持多设备无缝流转。Android依赖FragmentTransaction,生态成熟但内存消耗较高。鸿蒙系统以轻量化、高效能见长,兼顾开发效率与多终端适配。
陈杨 陈杨
2天前
鸿蒙5开发宝藏案例分享---一多开发实例(音乐)
各位开发者小伙伴们好呀!今天咱们来点硬核干货!最近在鸿蒙文档中心挖到一座“金矿”——官方竟然暗藏了100实战案例,从分布式架构到交互动效优化应有尽有!这些案例不仅藏着华为工程师的私房技巧,还直接关联实际开发中的高频痛点,比如内存泄漏、跨端适配、服务卡片设
布局王 布局王
4小时前
Uniapp开发鸿蒙应用时如何运行和调试项目
经过前几天的分享,大家应该应该对uniapp开发鸿蒙应用的开发语法有了一定的了解,可以进行一些简单的应用开发,今天分享一下在使用uniapp开发鸿蒙应用时怎么运行到鸿蒙设备,并且在开发中怎么调试程序。运行Uniapp项目支持运行到鸿蒙真机和模拟器,不过在这
程序员一鸣 程序员一鸣
4小时前
鸿蒙开发:绘制服务卡片
服务卡片的绘制,和正常的UI绘制一样,需要注意是否支持卡片的标识,还有一点需要注意的,服务卡片虽然可以设置多个,但是最多只支持配置16个卡片,按照官方解读,若超过16个,则保留配置的前16个。