news 2026/7/28 3:08:42

鸿蒙 卡片开发服务-ArkTS卡片(二)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
鸿蒙 卡片开发服务-ArkTS卡片(二)

本文同步发表于我的微信公众号,微信搜索程语新视界即可关注,每个工作日都有文章更新

ArkTS卡片是基于ArkTS声明式开发范式语言开发的服务卡片。它统一了卡片和应用页面的开发范式,让应用页面的布局可以直接复用到卡片布局中,大幅提升开发效率和开发体验。

亮点说明
统一开发范式应用页面布局可直接复用到卡片,开发效率提升
动效能力支持属性动画和显式动画,交互更友好
自定义绘制支持Canvas画布组件,构建多样显示效果
逻辑代码运行卡片内部可运行部分业务逻辑,拓宽应用场景

二、实现原理

核心角色

角色定义功能
卡片使用方显示卡片内容的宿主应用控制卡片展示位置,当前仅系统应用可作为卡片使用方
卡片提供方提供卡片显示内容的应用控制卡片显示内容、控件布局和点击事件
卡片管理服务管理所添加卡片的常驻代理服务提供formProvider接口能力,管理卡片对象和周期性刷新
卡片渲染服务管理卡片渲染实例运行卡片页面代码widget.abc,将渲染数据发送至卡片使用方

机制:虚拟机隔离

  • 相同卡片提供方:渲染实例运行在同一个ArkTS虚拟机环境中

  • 不同卡片提供方:渲染实例运行在不同的ArkTS虚拟机环境中

  • 作用:通过虚拟机环境隔离,保障不同卡片提供方之间的资源和状态互不干扰

关于globalThis对象

  • 相同提供方卡片:globalThis对象是同一个

  • 不同提供方卡片:globalThis对象是不同的

  • 开发注意:使用globalThis时需考虑作用域影响

三、ArkTS卡片类型

ArkTS卡片分为三种类型:静态卡片、动态卡片、互动卡片

类型对比

卡片类型支持能力适用场景优缺点
静态卡片仅支持UI组件和布局能力展示静态信息,UI相对固定功能简单,内存开销小
动态卡片UI组件 + 布局 + 通用事件 + 自定义动效复杂业务逻辑和交互(如图片刷新、内容刷新)功能丰富,内存开销较大
互动卡片动态卡片能力 + 破框动效复杂业务逻辑 + 破框动效视觉体验(如桌面卡片游戏)功能丰富,内存开销较大

1. 静态卡片

特点

  • 仅支持UI组件和布局能力

  • 通过FormLink组件跳转到指定UIAbility

工作原理

  • 整体运行框架与动态卡片一致

  • 卡片渲染服务渲染完毕后,卡片使用方使用最后一帧渲染数据作为静态图片显示

  • 卡片渲染服务中的卡片实例会释放所有运行资源以节省内存

注意事项

  • 频繁刷新会导致静态卡片运行时资源不断创建和销毁

  • 会增加卡片功耗,需谨慎设计刷新策略

2. 动态卡片

特点

  • 支持UI组件和布局能力

  • 支持通用事件能力

  • 支持自定义动效能力(属性动画、显式动画)

适用场景

  • 卡片页面图片刷新

  • 卡片内容定时更新

  • 需要交互响应的场景

3. 互动卡片

支持版本:API version 20+

特点

  • 包含动态卡片所有能力

  • 额外支持破框动效能力

  • 实现更丰富的人机交互

适用场景

  • 信息提醒

  • 浅层交互

  • 可玩性高的场景(如桌面卡片游戏)

四、动态卡片事件交互

核心接口:postCardAction

postCardAction接口用于卡片(Card.ets)和FormExtensionAbility之间的交互,仅在卡片控件的点击事件中可以调用

三种事件类型

事件类型功能使用场景
router事件跳转到应用自身的UIAbility点击卡片跳转应用内页面
call事件拉起应用自身的UIAbility到后台申请后台长时任务,实现音乐播放等
message事件拉起FormExtensionAbility通过onFormEvent回调通知,更新卡片内容

使用示例

// 卡片内点击事件 Button('跳转页面') .onClick(() => { postCardAction(this, { action: 'router', abilityName: 'EntryAbility', params: { target: 'detailPage', id: 123 } }); }) Button('更新卡片') .onClick(() => { postCardAction(this, { action: 'message', params: { actionType: 'refresh', data: '新数据' } }); }) Button('后台播放') .onClick(() => { postCardAction(this, { action: 'call', abilityName: 'PlayAbility', params: { action: 'play' } }); })

五、静态卡片交互组件:FormLink

静态卡片通过FormLink组件实现与提供方应用的交互。

FormLink支持的三种事件

与动态卡片的postCardAction类似,FormLink也支持三种事件类型:

事件类型功能
router跳转到应用页面
message发送消息到FormExtensionAbility
call拉起UIAbility到后台

使用示例

import { FormLink } from '@kit.FormKit' @Entry @Component struct WidgetCard { build() { Column() { Text('静态卡片内容') .fontSize(16) FormLink({ action: 'router', abilityName: 'EntryAbility', params: { target: 'detail' } }) { Text('点击跳转详情') .fontColor('#007dff') } FormLink({ action: 'message', params: { actionType: 'refresh' } }) { Text('点击刷新卡片') .fontColor('#ff6a00') } } .padding(12) .width('100%') .height('100%') } }

六、注意事项

ArkTS卡片支持在UI内运行逻辑代码,相比JS卡片功能更丰富,但也带来了风险考虑。为确保系统渲染进程的稳定性、卡片隔离安全性,以及内存功耗控制,有以下约束:

1. 开发范式约束

约束项说明
开发语言仅支持基于ArkUI开发卡片,不支持跨平台开发
模块导入仅支持导入标识"支持在ArkTS卡片中使用"的模块
HAR支持支持导入HAR静态共享包
HSP支持不支持导入HSP动态共享包
native支持不支持使用native语言开发,不支持加载native so

2. API能力约束

  • ArkTS卡片仅支持声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力

  • 支持在卡片中使用的接口会添加"卡片能力"标记

  • 例如:从API version 12开始,该接口支持在ArkTS卡片中使用

3. 手势交互约束

  • 卡片组件内容的事件处理和卡片使用方的事件处理是独立

  • 不支持卡片内左右滑动的控件(防止手势冲突)

4. 开发工具约束

约束项说明
极速预览不支持
断点调试不支持
Hot Reload热重载不支持
setTimeOut不支持

七、卡片类型选择

业务需求推荐卡片类型理由
纯信息展示,无需交互静态卡片内存开销小,足够满足需求
需要点击跳转页面静态卡片FormLink支持router跳转
需要定时刷新内容动态卡片支持逻辑代码和更新机制
需要复杂动画效果动态卡片支持属性动画和显式动画
需要破框动效互动卡片专有破框动效能力
桌面小游戏互动卡片需要破框动效和复杂交互

内存开销对比

静态卡片:★☆☆☆☆ (内存开销小) 动态卡片:★★★☆☆ (内存开销较大) 互动卡片:★★★★☆ (内存开销较大)

八、总结

ArkTS卡片是鸿蒙系统服务卡片的重要演进方向,通过统一开发范式、增强卡片能力,为开发者提供了更强大的卡片开发体验。

维度要点
开发语言ArkTS声明式范式
卡片类型静态卡片、动态卡片、互动卡片
核心能力动效、自定义绘制、逻辑代码
交互方式postCardAction(动态)、FormLink(静态)
运行环境卡片渲染服务 + 虚拟机隔离
适用设备手机、平板、PC/2in1、智慧屏、智能手表

选择建议

  • 简单展示→ 静态卡片

  • 需要交互刷新→ 动态卡片

  • 需要破框动效→ 互动卡片

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/28 3:08:40

Android应用开发核心技术详解与面试指南

东莞新旭光学有限公司 APP开发 职位信息 工作内容: 1、负责公司原生APP功能开发(android) 2、对现有APP功能进行运维和优化 任职资格: 安卓: 1、熟练Java语言及xml文件使用(UI) 2、熟悉使用Android SDK、Android Studio等开发工具 3、熟悉webSocket、多线程、异步、git代码…

作者头像 李华
网站建设 2026/7/21 5:39:45

3步攻克绝地求生压枪难题:罗技鼠标宏零基础配置指南

3步攻克绝地求生压枪难题:罗技鼠标宏零基础配置指南 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 在激烈的绝地求生战场上&#xf…

作者头像 李华
网站建设 2026/7/24 17:46:43

100 美元/月!ChatGPT 新订阅「Pro Lite」曝光,Plus 危?

ChatGPT 正在逐渐「Claude 化」。20 美元的 Plus,200 美元的 Pro。10 倍价差。这是 ChatGPT 一直被吐槽的定价断层。现在,有网友从 ChatGPT 的前端代码里扒出了一个还没发布的新订阅。月费 100 美元,订阅名叫 ChatGPT Pro Lite。2 月 20 日&a…

作者头像 李华
网站建设 2026/7/21 5:39:46

5步掌握显卡驱动深度清理:DDU工具新手实战指南

5步掌握显卡驱动深度清理:DDU工具新手实战指南 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers-uninstaller 当…

作者头像 李华
网站建设 2026/7/21 5:39:47

告别右键菜单混乱:ContextMenuManager让Windows操作效率提升50%

告别右键菜单混乱:ContextMenuManager让Windows操作效率提升50% 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾遇到这样的场景:…

作者头像 李华