1. 服务卡片定义与核心价值

服务卡片是鸿蒙系统（HarmonyOS）中一种轻量级应用界面展示形式，能够将应用的重要信息或操作前置到桌面，实现"服务直达、减少跳转层级"的用户体验。其核心价值在于：

轻量化体验：无需启动完整应用即可获取关键信息和核心功能
多端适配：支持手机、平板、智慧屏等多种鸿蒙设备
免安装特性：作为元服务的一部分，用户无需显式安装即可使用
动态信息展示：支持实时数据更新，如天气、步数、股票行情等

2. 技术架构与核心组件

2.1 服务卡片架构

鸿蒙服务卡片架构包含四个核心部分：

卡片使用方：显示卡片内容的宿主应用（如桌面），控制卡片展示位置
卡片提供方：提供卡片内容的应用，控制显示内容、布局和交互逻辑
卡片管理服务：管理系统中所有卡片的常驻代理服务，处理生命周期和刷新机制
卡片渲染服务：管理卡片渲染实例，与卡片使用方的组件一一绑定

2.2 开发模型选择

鸿蒙提供两种开发模型：

开发模型	适用场景	技术特点
Stage模型	复杂应用开发	支持ArkTS和JS两种卡片开发方式，功能更丰富
FA模型	轻量级应用	仅支持JS卡片开发，已不再主推

推荐使用Stage模型，其支持的ArkTS卡片相比JS卡片具有以下优势：

支持自定义动效和绘制
允许运行逻辑代码
统一开发范式，提升开发效率

3. 卡片类型与规格

3.1 卡片类型

根据交互能力分为：

静态卡片：仅支持基础信息展示，内存占用小，适合简单信息展示
动态卡片：支持交互操作和实时数据更新，功能丰富但资源消耗较高

3.2 尺寸规格

支持多种尺寸规格，以适应不同场景需求：

1×2：窄条型，适合简单信息展示
2×2：正方形，基础信息展示
2×4：长方形，可展示更多内容和操作
4×4：大型卡片，适合复杂数据展示

4. 生命周期管理

卡片生命周期由FormExtensionAbility管理，核心回调方法包括：

方法名	描述
onAddForm	卡片被创建时触发
onCastToNormalForm	临时卡片转为常态卡片时触发
onUpdateForm	卡片需要更新时触发
onFormEvent	卡片交互事件触发时调用
onRemoveForm	卡片被删除时触发

5. 开发关键步骤

5.1 项目结构

创建服务卡片后，项目中将新增以下核心文件：

EntryFormAbility.ts：卡片生命周期管理文件
WidgetCard.ets：卡片UI页面文件（基于ArkUI）
form_config.json：卡片配置文件

5.2 配置文件示例

{
  "forms": [
    {
      "name": "widget",
      "displayName": "服务卡片示例",
      "description": "这是一个服务卡片示例",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": ["2*2"]
    }
  ]
}

5.3 基础UI实现

使用ArkTS语言开发卡片UI的简单示例：

@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      Image($r("app.media.icon"))
        .width(40)
        .height(40)
      Text("服务卡片示例")
        .fontSize(16)
        .margin({ top: 10 })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

6. 数据交互与刷新机制

6.1 刷新方式

鸿蒙服务卡片支持多种刷新机制：

主动刷新：应用通过updateForm接口手动触发刷新
定点刷新：每天固定时间点刷新（如"10:30"）
定时刷新：按固定时间间隔刷新（单位为30分钟）
动态定时刷新：设置下次刷新时间，最小间隔5分钟

6.2 数据同步代码示例

// 主动刷新卡片数据
import formProvider from '@ohos.app.form.formProvider';

function updateCardData(formId: string, newData: Object) {
  let formBindingData = formBindingData.createFormBindingData(newData);
  formProvider.updateForm(formId, formBindingData)
    .then(() => {
      console.log('卡片更新成功');
    })
    .catch((error) => {
      console.error(`卡片更新失败: ${error}`);
    });
}

7. 桌面交互设计原则

7.1 交互基本原则

突出核心内容：卡片应以展示服务内容为主，而非全是跳转入口
简化操作流程：避免复杂交互，单个卡片尽量只提供1-2个核心操作
避免手势冲突：不使用左右滑动等可能与系统手势冲突的交互方式
明确视觉层级：合理排布文本、图片和操作区域关系

7.2 热区设计规范

推荐将整张卡片作为一个热区，降低用户操作成本
若需划分多个热区，需明确区分，防止误触
可点击元素热区尺寸不小于32vp（物理尺寸约5mm）

8. 跨设备交互能力

鸿蒙服务卡片依托分布式能力，支持跨设备流转和协同：

设备发现与连接：通过分布式设备管理模块发现附近可用设备
任务迁移：将卡片任务无缝迁移到其他鸿蒙设备
数据同步：多设备间保持数据一致性

跨设备启动应用示例代码：

// 发现并连接其他鸿蒙设备
import { distributedDeviceManager } from '@ohos.distributedDeviceManager';

const deviceManager = distributedDeviceManager.createDeviceManager();
const devices = deviceManager.getTrustedDeviceListSync();

// 选择目标设备并启动应用
if (devices.length > 0) {
  let targetDevice = devices[0];
  let want = {
    deviceId: targetDevice.deviceId,
    bundleName: "com.example.app",
    abilityName: "MainAbility"
  };
  context.startAbility(want);
}

9. 开发工具与环境配置

9.1 开发工具

DevEco Studio：鸿蒙应用开发IDE，支持卡片可视化设计
SDK版本：需HarmonyOS SDK 3.1及以上版本

9.2 环境配置要点

安装DevEco Studio并配置HarmonyOS SDK
开启设备开发者模式
配置签名信息
创建Atomic Service项目
启用服务卡片开发支持

鸿蒙服务卡片与桌面交互基础概念