#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】 原创

穆雄雄的博客
发布于 2024-1-1 18:10
浏览
0收藏

鸿蒙服务卡片入门【坚果派-穆雄雄】

作者:穆雄雄的博客
团队:坚果派
公众号:“大前端之旅”

团队介绍:坚果派由坚果创建,团队拥有8个华为HDE,3个HSD,以及若干其他领域的三十余位万粉博主运营。

团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,欢迎合作。

一、运行环境

DevEco Studio:4.0Release

OpenHarmony SDK API10

开发板:润和DAYU200

二、服务卡片概述

服务卡片(以下简称“卡片”)是一种界面展示形式,可以将应用的重要信息或操作前置到卡片,以达到服务直达、减少体验层级的目的。卡片常用于嵌入到其他应用(当前卡片使用方只支持系统应用,如桌面)中作为其界面显示的一部分,并支持拉起页面、发送消息等基础的交互功能。

三、服务卡片架构

服务卡片架构

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

卡片的基本概念:

  • 卡片使用方:如上图中的桌面,显示卡片内容的宿主应用,控制卡片在宿主中展示的位置。
    • 应用图标:应用入口图标,点击后可拉起应用进程,图标内容不支持交互。
    • 卡片:具备不同规格大小的界面展示,卡片的内容可以进行交互。
  • 卡片提供方:包含卡片的应用,提供卡片的显示内容、控件布局以及控件点击处理逻辑。
    • FormExtensionAbility:卡片业务逻辑模块,提供卡片创建、销毁、刷新等生命周期回调。
    • 卡片页面:卡片UI模块,包含页面控件、布局、事件等显示和交互信息。

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

  1. 长按“桌面图标”,弹出操作菜单。
  2. 点击“服务卡片”选项,进入卡片预览界面。
  3. 点击“添加到桌面”按钮,即可在桌面上看到新添加的卡片。

四、实现原理

ArkTS卡片实现原理

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

  • 卡片使用方:显示卡片内容的宿主应用,控制卡片在宿主中展示的位置,当前仅系统应用可以作为卡片使用方。

  • 卡片提供方:提供卡片显示内容的应用,控制卡片的显示内容、控件布局以及控件点击事件。

  • 卡片管理服务:用于管理系统中所添加卡片的常驻代理服务,提供formProvider接口能力,同时提供卡片对象的管理与使用以及卡片周期性刷新等能力。

  • 卡片渲染服务:用于管理卡片渲染实例,渲染实例与卡片使用方上的卡片组件一一绑定。卡片渲染服务运行卡片页面代码widgets.abc进行渲染,并将渲染后的数据发送至卡片使用方对应的卡片组件。

    图2 ArkTS卡片渲染服务运行原理

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

与动态卡片相比,静态卡片整体的运行框架和渲染流程是一致的,主要区别在于,卡片渲染服务将卡片内容渲染完毕后,卡片使用方会使用最后一帧渲染的数据作为静态图片显示,其次卡片渲染服务中的卡片实例会释放该卡片的所有运行资源以节省内存。因此频繁的刷新会导致静态卡片运行时资源不断的创建和销毁,提升卡片功耗。

五、ArkTS卡片的优势

卡片作为应用的一个快捷入口,ArkTS卡片相较于JS卡片具备如下几点优势:

  • 统一开发范式,提升开发体验和开发效率。

    提供ArkTS卡片能力后,统一了卡片和页面的开发范式,页面的布局可以直接复用到卡片布局中,提升开发体验和开发效率。

    卡片工程结构对比

    #星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

  • 增强了卡片的能力,使卡片更加万能。

    • 新增了动效的能力
    • 新增了自定义绘制的能力
    • 允许卡片中运行逻辑代码

六、ArkTS卡片的约束

ArkTS卡片相较于JS卡片具备了更加丰富的能力,但也增加了使用卡片进行恶意行为的风险。由于ArkTS卡片显示在使用方应用中,使用方应用一般为桌面应用,为确保桌面的使用体验以及功耗相关考虑,对ArkTS卡片的能力做了以下约束:

  • 不支持加载so。
  • 不支持使用native语言开发。
  • 仅支持声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。
  • 卡片的事件处理和使用方的事件处理是独立的,建议在使用方支持左右滑动的场景下卡片内容不要使用左右滑动功能的组件,以防手势冲突影响交互体验。

除此之外,当前ArkTS卡片还存在如下约束:

  • 暂不支持导入模块。
  • 暂不支持极速预览。
  • 暂不支持断点调试能力。
  • 暂不支持Hot Reload热重载。
  • 暂不支持setTimeOut。

七、创建ArkTS服务卡片

创建卡片当前有两种入口:

  • 创建工程时,选择Application,默认不带卡片,可以在创建工程后右键新建卡片。
  • 创建工程时,选择Atomic Service,默认自带卡片,也可以在创建工程后右键新建卡片。

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

根据实际业务场景,选择一个卡片模板。

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

在选择卡片的开发语言类型(Language)时,选择ArkTS选项,然后单击“Finish”,即可完成ArkTS卡片创建。

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

完成创建

#星计划#鸿蒙服务卡片入门【坚果派-穆雄雄】-鸿蒙开发者社区

八、总结

本次我们主要就是了解服务卡片定义,以及架构,实现原理。和了解它的优势,并清楚它的使用约束。最好创建一个ArkTS卡片。

不得不说,跟着坚果派的老师们一起进度还是很快的。

九、参考文档

https://gitee.com/openharmony

https://mp.weixin.qq.com/s/Ul7WTXidIHZX4RI--NkXkQ

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-1-2 11:10:12修改
3
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
翻生咸鱼
翻生咸鱼

很细致,感谢老师

回复
2024-1-2 11:35:28
回复
    相关推荐