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

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、智慧屏、智能手表

选择建议

• 简单展示 → 静态卡片

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

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