1# 卡片传递消息给应用（message事件） 2 3在卡片页面中可以通过[postCardAction](../reference/apis-arkui/js-apis-postCardAction.md#postcardaction-1)接口触发message事件拉起[FormExtensionAbility](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md)，通过[onFormEvent](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonformevent)接口回调通知，以完成点击卡片控件后传递消息给应用的功能，然后由FormExtensionAbility刷新卡片内容，下面是这种刷新方式的简单示例。 4 5> **说明：** 6> 7> 本文主要介绍动态卡片的事件开发。对于静态卡片，请参见[FormLink](../reference/apis-arkui/arkui-ts/ts-container-formlink.md)。 8 9- 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用postCardAction接口触发message事件拉起FormExtensionAbility。卡片页面中使用[LocalStorageProp](../ui/state-management/arkts-localstorage.md#localstorageprop)装饰需要刷新的卡片数据。 10 11 ```ts 12 let storageUpdateByMsg = new LocalStorage(); 13 14 @Entry(storageUpdateByMsg) 15 @Component 16 struct UpdateByMessageCard { 17 @LocalStorageProp('title') title: ResourceStr = $r('app.string.default_title'); 18 @LocalStorageProp('detail') detail: ResourceStr = $r('app.string.DescriptionDefault'); 19 20 build() { 21 Column() { 22 Column() { 23 Text(this.title) 24 .fontColor('#FFFFFF') 25 .opacity(0.9) 26 .fontSize(14) 27 .margin({ top: '8%', left: '10%' }) 28 Text(this.detail) 29 .fontColor('#FFFFFF') 30 .opacity(0.6) 31 .fontSize(12) 32 .margin({ top: '5%', left: '10%' }) 33 }.width('100%').height('50%') 34 .alignItems(HorizontalAlign.Start) 35 36 Row() { 37 Button() { 38 Text($r('app.string.update')) 39 .fontColor('#45A6F4') 40 .fontSize(12) 41 } 42 .width(120) 43 .height(32) 44 .margin({ top: '30%', bottom: '10%' }) 45 .backgroundColor('#FFFFFF') 46 .borderRadius(16) 47 .onClick(() => { 48 postCardAction(this, { 49 action: 'message', 50 params: { msgTest: 'messageEvent' } 51 }); 52 }) 53 }.width('100%').height('40%') 54 .justifyContent(FlexAlign.Center) 55 } 56 .width('100%') 57 .height('100%') 58 .alignItems(HorizontalAlign.Start) 59 .backgroundImage($r('app.media.CardEvent')) 60 .backgroundImageSize(ImageSize.Cover) 61 } 62 } 63 ``` 64 65- 在FormExtensionAbility的onFormEvent生命周期中调用[updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formproviderupdateform)接口刷新卡片。 66 67 ```ts 68 import { BusinessError } from '@kit.BasicServicesKit'; 69 import { formBindingData, FormExtensionAbility, formProvider } from '@kit.FormKit'; 70 import { hilog } from '@kit.PerformanceAnalysisKit'; 71 72 const TAG: string = 'EntryFormAbility'; 73 const DOMAIN_NUMBER: number = 0xFF00; 74 75 export default class EntryFormAbility extends FormExtensionAbility { 76 onFormEvent(formId: string, message: string): void { 77 // 当卡片提供方的postCardAction接口的message事件被触发时调用 78 hilog.info(DOMAIN_NUMBER, TAG, `FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 79 80 class FormDataClass { 81 title: string = 'Title Update.'; // 和卡片布局中对应 82 detail: string = 'Description update success.'; // 和卡片布局中对应 83 } 84 85 // 请根据业务替换为实际刷新的卡片数据 86 let formData = new FormDataClass(); 87 let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData); 88 formProvider.updateForm(formId, formInfo).then(() => { 89 hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.'); 90 }).catch((error: BusinessError) => { 91 hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`); 92 }) 93 } 94 //... 95 } 96 ``` 97 98 运行效果如下图所示。 99 100 | 初始状态 | 点击刷新 | 101 | ------------------------------------------------------- | ----------------------------------------------------- | 102 |  |  | 103
