华为服务卡片

---

前言

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

---

一、服务卡片

1. 服务卡片是什么

服务卡片提供了一种界面展示形式，可以将应用的重要信息或操作前置到服务卡片以达到服务直达、减少跳转层级的体验效果。有些类似于创建了一种 “快键方式”，比如下面的卡片流程图：

2. 创建一个ArkTS卡片

2.1 创建卡片

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

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

创建完成后，就是如下图显示的结构。

长按应用图标会出现Hello Word 基础卡片，代表卡片添加成功

3. 修改卡片UI

卡片的UI可以像一个一般组件一样进行基础布局，很方便就可以做定制修改，打开WidgetCard.ets文件进行修改即可

二、点击卡片唤起特定页

1. 实现原理

1. 卡片组件点击之后通过postCardAction触发router事件并携带参数
2. 在应用的UIAbility中接收router事件，解析参数完成跳转
   

卡片的点击事件中触发router**事件并携带参数

.onClick(() => {
        // postCardAction 卡片可以使用 和应用通信的一个 api
        postCardAction(this, {
          action: 'router', // 通信的方式 是 router
          abilityName: 'EntryAbility', // ability 的名字，当前应用写这个即可
          params: { targetPage: 'pages/RecommendPage' } // 传递的参数
        });
      })

通过router事件跳转到指定Ability: 具体实现可见文档

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'EntryAbility';
const DOMAIN_NUMBER: number = 0xFF00;

export default class EntryAbility extends UIAbility {

  // 保存 传递的信息
  private selectPage: string = ''
  // 保存当前的  WindowStage 对象
  private currentWindowStage: window.WindowStage | null = null;

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 获取router事件中传递的targetPage参数
    hilog.info(DOMAIN_NUMBER, TAG, `Ability onCreate: ${JSON.stringify(want?.parameters)}`);
    if (want?.parameters?.params) {
      // want.parameters.params 对应 postCardAction() 中 params 内容
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.targetPage as string;
      hilog.info(DOMAIN_NUMBER, TAG, `onCreate selectPage: ${this.selectPage}`);
    }
  }

  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(DOMAIN_NUMBER, TAG, `Ability onNewWant: ${JSON.stringify(want?.parameters)}`);
   
    if (want?.parameters?.params) {
      // want.parameters.params 对应 postCardAction() 中 params 内容
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.targetPage as string;
      hilog.info(DOMAIN_NUMBER, TAG, `onNewWant selectPage: ${this.selectPage}`);
    }
    if (this.currentWindowStage !== null) {
      this.onWindowStageCreate(this.currentWindowStage);
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    // const pageName = this.selectPage != '' ? this.selectPage : 'pages/Index';
   
    if (this.currentWindowStage === null) {
      this.currentWindowStage = windowStage;
    }
    windowStage.loadContent(targetPage, (err, data) => {
      if (err.code) {
        hilog.error(DOMAIN_NUMBER, TAG, 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
       // 清空 传递进来的 页面名称，避免重复打开即可
      this.selectPage = ''
      
      hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }
}

总结

相比于JS卡片，ArkTS卡片在能力和场景方面更加丰富，因此无论开发何种用途的卡片，都推荐使用 ArkTS卡片，因为它可以提高开发效率并实现动态化。