HarmonyOS服务卡片开发指导(Stage模型)概述

服务卡片概述

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

服务卡片架构

图1 服务卡片架构

卡片的基本概念:

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

卡片的常见使用步骤如下。

图2 卡片常见使用步骤

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

服务卡片UI页面开发方式

在Stage模型下,服务卡片的UI页面支持通过ArkTSJS两种语言进行开发:

  • 基于声明式范式ArkTS UI开发的卡片,简称ArkTS卡片。
  • 基于类Web范式JS UI开发的卡片,简称JS卡片。

ArkTS卡片与JS卡片具备不同的实现原理及特征,在场景能力上的差异如下表所示。

类别 JS卡片 ArkTS卡片
开发范式 类Web范式 声明式范式
组件能力 支持 支持
布局能力 支持 支持
事件能力 支持 支持
自定义动效 不支持 支持
自定义绘制 不支持 支持
逻辑代码执行(不包含import能力) 不支持 支持

相比于JS卡片,ArkTS卡片在能力和场景方面更加丰富,因此无论开发何种用途的卡片,都推荐使用ArkTS卡片,因为它可以提高开发效率并实现动态化。但如果只需要做静态页面展示的卡片,可以考虑使用JS卡片。

相关推荐
码上成长4 分钟前
微前端 Invalid hook call?先把「window 注入 + externals」整明白
前端·react.js·前端框架
宿6745 分钟前
vue3-DOM树
前端·javascript·vue.js
math_hongfan26 分钟前
鸿蒙离线数据缓存高级架构:弱网预加载/离线数据优先级/同步冲突解决/上线后数据合并策略
学习·缓存·华为·架构·harmonyos·鸿蒙
白狐_79844 分钟前
408数据结构:中缀转后缀与操作符栈容量——真题精讲
前端·javascript·数据结构
谷哥的小弟1 小时前
TypeScript在Vue3中的常见写法
前端·javascript·typescript
人间凡尔赛1 小时前
2026 前端全栈新范式:Server Actions + Edge Runtime,告别传统 API 路由
前端·全栈·next.js
淼澄研学2 小时前
OpenAI集成Photoshop API:函数调用机制解析与实操指南
ui·photoshop
学习使我健康3 小时前
一个基于 **Jetpack Compose + Material 3** 的 Android 入门示例项目,演示 Compose 声明式 UI 的核心用法
ui·kotlin·android jetpack
码林鼠4 小时前
2026前端面试题(二)
前端
math_hongfan4 小时前
鸿蒙企业级数据存储高级架构:从读写分离到冷热数据分层/归档策略/数据生命周期管理最佳实践
人工智能·学习·华为·架构·harmonyos·鸿蒙