一、ArkTS卡片相關模塊

ArkTS卡片創建完成後，工程中會新增如下卡片相關文件：卡片生命週期管理文件（EntryFormAbility.ets）、卡片頁面文件（WidgetCard.ets）和卡片配置文件（form_config.json）。

二、卡片事件能力説明

ArkTS卡片中提供了postCardAction接口用於卡片內部和提供方應用間的交互，當前支持router、message和call三種類型的事件，僅在卡片中可以調用。

三、卡片事件的主要使用場景

• router事件：可以使用router事件跳轉到指定UIAbility，並通過router事件刷新卡片內容。

• call事件：可以使用call事件拉起指定UIAbility到後台，並通過call事件刷新卡片內容。

• message事件：可以使用message拉起FormExtensionAbility，並通過FormExtensionAbility刷新卡片內容。

3.1、使用router事件跳轉到指定UIAbility

在卡片中使用postCardAction接口的router能力，能夠快速拉起卡片提供方應用的指定UIAbility，因此UIAbility較多的應用往往會通過卡片提供不同的跳轉按鈕，實現一鍵直達的效果。

3.1.1、卡片內按鈕跳轉到應用的不同頁面

在UIAbility中接收router事件並獲取參數，根據傳遞的params不同，選擇拉起不同的頁面。

// Entryability.ts

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  // 服務卡片跳轉的頁面
  private selectPage: string = '';
  //當前windowStage
  private currentWindowStage: window.WindowStage | null = null;

  // 如果UIAbility第一次啓動，在收到Router事件後會觸發onCreate生命週期回調
  onCreate(want, launchParam) {
    // 獲取router事件中傳遞的targetPage參數
    if (want.parameters !== undefined && want.parameters.params) {
      let params = JSON.parse(want.parameters.params)
      this.selectPage = params.targetPage
    }
  }

  // 如果UIAbility已在後台運行，在收到Router事件後會觸發onNewWant生命週期回調
  onNewWant(want, launchParam) {
    // 獲取router事件中傳遞的targetPage參數
    if (want.parameters !== undefined && want.parameters.params) {
      let params = JSON.parse(want.parameters.params)
      this.selectPage = params.targetPage
    }
    this.onWindowStageCreate(this.currentWindowStage)
  }

  // 創建主窗口，為此功能設置主頁
  onWindowStageCreate(windowStage: window.WindowStage) {
    let targetPage = this.selectPage || "Index"
    targetPage = "pages/" + targetPage
    // 為currentWindowStage賦值
    if (this.currentWindowStage === null) {
      this.currentWindowStage = windowStage;
    }
    windowStage.loadContent(targetPage, (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }
}

3.1.2、服務卡片的點擊跳轉事件

在卡片頁面中佈局兩個按鈕，點擊其中一個按鈕時調用postCardAction向指定UIAbility發送router事件，並在事件內定義需要傳遞的內容。

// WidgetCard.ets

@Entry
@Component
struct WidgetCard {

  build() {
    Column(){
      Button("個人中心")
        .onClick(() => {
          postCardAction(this, {
            "action": "router",
            "abilityName": "EntryAbility",
            "params": {
              "targetPage": "Personals"
            }
          });
        })

      Button("消息列表")
        .onClick(() => {
          postCardAction(this, {
            "action": "router",
            "abilityName": "EntryAbility",
            "params": {
              "targetPage": "Message"
            }
          });
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

3.2、通過message事件刷新卡片內容

在卡片頁面中可以通過postCardAction接口觸發message事件拉起FormExtensionAbility，然後由FormExtensionAbility刷新卡片內容。

3.2.1、在卡片頁面調用postCardAction接口觸發message事件

在卡片頁面通過註冊Button的onClick點擊事件回調，並在回調中調用postCardAction接口觸發message事件拉起FormExtensionAbility。卡片頁面中使用LocalStorageProp裝飾需要刷新的卡片數據。

// WidgetCard.ets

let storageUpdateByMsg = new LocalStorage();

@Entry(storageUpdateByMsg)
@Component
struct UpdateByMessageCard {
  @LocalStorageProp('title') title: ResourceStr = 'title';
  @LocalStorageProp('detail') detail: ResourceStr = 'detail';

  build() {
    Column() {
      Text(this.title)
      Text(this.detail)
      Button("刷新數據")
        .onClick(() => {
          postCardAction(this, {
            "action": "message",
            "params": {
              "msgTest": "messageEvent"
            }
          });
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

3.2.2、onFormEvent生命週期中調用updateForm接口刷新卡片

在FormExtensionAbility的onFormEvent生命週期中調用updateForm接口刷新卡片。

// EntryFormAbility.ts

import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {
    // Called to return a FormBindingData object.
    let formData = {};
    return formBindingData.createFormBindingData(formData);
  }

  onFormEvent(formId, message) {
    class FormDataClass {
      title: string = 'Title Update.'; // 和卡片佈局中對應
      detail: string = 'Description update success.'; // 和卡片佈局中對應
    }

    let formData = new FormDataClass();
    let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
    formProvider.updateForm(formId, formInfo)
    .then(() => {})
    .catch((error) => {})
  }

};

3.2.2、運行效果如下圖所示

一鍵三連+關注，你的支持是我創作的動力。在這裏，我樂於傾囊相授。