经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 鸿蒙 » 查看文章
鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）
来源：cnblogs　　作者：蜀道山QAQ　　时间：2024/5/21 8:45:25　　对本文有异议

??一、开发卡片事件

HarmonyOS元服务卡片页面（Metaservice Card Page）是指在HarmonyOS系统中，用于展示元服务的页面界面。元服务是指一组提供特定功能或服务的组件，例如天气服务、音乐播放服务等。元服务卡片页面可以显示元服务的相关信息和操作选项，用户可以通过点击卡片页面上的按钮或交互元素来使用相关的元服务功能。元服务卡片页面提供了一种快速访问和使用元服务的方式，方便用户进行各种操作和任务。

??1.卡片事件能力说明

postCardAction()接口是ArkTS卡片中用于实现卡片内部和提供方应用间交互的方法。目前这个接口支持三种类型的事件：router、message和call，并且仅在卡片中可以调用。

  • router类型的事件可以用来执行页面跳转或路由切换的操作。通过指定目标路由和传递参数，可以实现页面之间的跳转或路由切换。

  • message类型的事件用于发送消息或通知给提供方应用。可以通过指定目标应用和消息内容，向提供方应用发送消息或通知。

  • call类型的事件用于调用提供方应用的函数或方法。可以通过指定目标应用、要调用的函数或方法名以及传递的参数，调用提供方应用中的函数或方法。

postCardAction()接口仅在卡片内部可以调用，无法在提供方应用中直接调用。这个接口提供了卡片和提供方应用之间进行交互的方式，可以实现卡片的功能扩展和与提供方应用的数据交互。

image

??2.使用router事件跳转到指定UIAbility

1、元服务界面

  1. @Entry
  2. @Component
  3. struct WidgetCard {
  4.   build() {
  5.     Column() {
  6.       Button('功能A')
  7.         .margin('20%')
  8.         .onClick(() => {
  9.           console.info('Jump to EntryAbility funA');
  10.           postCardAction(this, {
  11.             'action': 'router',
  12.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  13.             'params': {
  14.               'targetPage': 'funA' // 在EntryAbility中处理这个信息
  15.             }
  16.           });
  17.         })
  19.       Button('功能B')
  20.         .margin('20%')
  21.         .onClick(() => {
  22.           console.info('Jump to EntryAbility funB');
  23.           postCardAction(this, {
  24.             'action': 'router',
  25.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  26.             'params': {
  27.               'targetPage': 'funB' // 在EntryAbility中处理这个信息
  28.             }
  29.           });
  30.         })
  31.     }
  32.     .width('100%')
  33.     .height('100%')
  34.   }
  35. }

image

2、UIAbility接收参数

  1. import UIAbility from '@ohos.app.ability.UIAbility';
  2. import window from '@ohos.window';
  4. let selectPage = "";
  5. let currentWindowStage = null;
  7. export default class CameraAbility extends UIAbility {
  8.   // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
  9.   onCreate(want, launchParam) {
  10.     // 获取router事件中传递的targetPage参数
  11.     console.info("onCreate want:" + JSON.stringify(want));
  12.     if (want.parameters.params !== undefined) {
  13.       let params = JSON.parse(want.parameters.params);
  14.       console.info("onCreate router targetPage:" + params.targetPage);
  15.       selectPage = params.targetPage;
  16.     }
  17.   }
  18.   // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  19.   onNewWant(want, launchParam) {
  20.     console.info("onNewWant want:" + JSON.stringify(want));
  21.     if (want.parameters.params !== undefined) {
  22.       let params = JSON.parse(want.parameters.params);
  23.       console.info("onNewWant router targetPage:" + params.targetPage);
  24.       selectPage = params.targetPage;
  25.     }
  26.     if (currentWindowStage != null) {
  27.       this.onWindowStageCreate(currentWindowStage);
  28.     }
  29.   }
  31.   onWindowStageCreate(windowStage: window.WindowStage) {
  32.     let targetPage;
  33.     // 根据传递的targetPage不同，选择拉起不同的页面
  34.     switch (selectPage) {
  35.       case 'funA':
  36.         targetPage = 'pages/FunA';
  37.         break;
  38.       case 'funB':
  39.         targetPage = 'pages/FunB';
  40.         break;
  41.       default:
  42.         targetPage = 'pages/Index';
  43.     }
  44.     if (currentWindowStage === null) {
  45.       currentWindowStage = windowStage;
  46.     }
  47.     windowStage.loadContent(targetPage, (err, data) => {
  48.       if (err && err.code) {
  49.         console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
  50.         return;
  51.       }
  52.     });
  53.   }
  54. };

image

??3.使用call事件拉起指定UIAbility到后台

1、元服务界面

  1. @Entry
  2. @Component
  3. struct WidgetCard {
  4.   build() {
  5.     Column() {
  6.       Button('功能A')
  7.         .margin('20%')
  8.         .onClick(() => {
  9.           console.info('call EntryAbility funA');
  10.           postCardAction(this, {
  11.             'action': 'call',
  12.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  13.             'params': {
  14.               'method': 'funA' // 在EntryAbility中调用的方法名
  15.             }
  16.           });
  17.         })
  18.        Button('功能B')
  19.         .margin('20%')
  20.         .onClick(() => {
  21.           console.info('call EntryAbility funB');
  22.           postCardAction(this, {
  23.             'action': 'call',
  24.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  25.             'params': {
  26.               'method': 'funB', // 在EntryAbility中调用的方法名
  27.               'num': 1 // 需要传递的其他参数
  28.             }
  29.           });
  30.         })
  31.     }
  32.     .width('100%')
  33.     .height('100%')
  34.   }
  35. }

2、UIAbility接收参数

  1. import UIAbility from '@ohos.app.ability.UIAbility';
  2.  
  3. function FunACall(data) {
  4.   // 获取call事件中传递的所有参数
  5.   console.log('FunACall param:' + JSON.stringify(data.readString()));
  6.   return null;
  7. }
  8.  function FunBCall(data) {
  9.   console.log('FunACall param:' + JSON.stringify(data.readString()));
  10.   return null;
  11. }
  12.  
  13. export default class CameraAbility extends UIAbility {
  14.   // 如果UIAbility第一次启动，在收到call事件后会触发onCreate生命周期回调
  15.   onCreate(want, launchParam) {
  16.       try {
  17.           // 监听call事件所需的方法
  18.           this.callee.on('funA', FunACall);
  19.           this.callee.on('funB', FunBCall);
  20.       } catch (error) {
  21.           console.log('register failed with error. Cause: ' + JSON.stringify(error));
  22.       }
  23.   }
  24.    
  25.   // 进程退出时，解除监听
  26.   onDestroy() {
  27.       try {
  28.           this.callee.off('funA');
  29.           this.callee.off('funB');
  30.       } catch (error) {
  31.           console.log('register failed with error. Cause: ' + JSON.stringify(error));
  32.       }
  33.   }
  34. };

不截图同上

??4.通过message事件刷新卡片内容

1、卡片页面

  1. let storage = new LocalStorage();
  3. @Entry(storage)
  4. @Component
  5. struct WidgetCard {
  6.   @LocalStorageProp('title') title: string = 'init';
  7.   @LocalStorageProp('detail') detail: string = 'init';
  9.   build() {
  10.     Column() {
  11.       Button('刷新')
  12.         .onClick(() => {
  13.           postCardAction(this, {
  14.             'action': 'message',
  15.             'params': {
  16.               'msgTest': 'messageEvent'
  17.             }
  18.           });
  19.         })
  20.       Text(`${this.title}`)
  21.       Text(`${this.detail}`)
  22.     }
  23.     .width('100%')
  24.     .height('100%')
  25.   }
  26. }

2、卡片FormExtensionAbility

  1. import formBindingData from '@ohos.app.form.formBindingData';
  2. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  3. import formProvider from '@ohos.app.form.formProvider';
  5. export default class EntryFormAbility extends FormExtensionAbility {
  6.   onFormEvent(formId, message) {
  7.     // Called when a specified message event defined by the form provider is triggered.
  8.     console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
  9.     let formData = {
  10.       'title': 'Title Update Success.', // 和卡片布局中对应
  11.       'detail': 'Detail Update Success.', // 和卡片布局中对应
  12.     };
  13.     let formInfo = formBindingData.createFormBindingData(formData)
  14.     formProvider.updateForm(formId, formInfo).then((data) => {
  15.       console.info('FormAbility updateForm success.' + JSON.stringify(data));
  16.     }).catch((error) => {
  17.       console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
  18.     })
  19.   }
  20. }

image

??5.通过router或call事件刷新卡片内容

??5.1 router

1、卡片

  1. let storage = new LocalStorage();
  3. @Entry(storage)
  4. @Component
  5. struct WidgetCard {
  6.   @LocalStorageProp('detail') detail: string = 'init';
  8.   build() {
  9.     Column() {
  10.       Button('跳转')
  11.         .margin('20%')
  12.         .onClick(() => {
  13.           console.info('postCardAction to EntryAbility');
  14.           postCardAction(this, {
  15.             'action': 'router',
  16.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  17.             'params': {
  18.               'detail': 'RouterFromCard'
  19.             }
  20.           });
  21.         })
  22.       Text(`${this.detail}`).margin('20%')
  23.     }
  24.     .width('100%')
  25.     .height('100%')
  26.   }
  27. }

2、UIAbility

  1. import UIAbility from '@ohos.app.ability.UIAbility';
  2. import formBindingData from '@ohos.app.form.formBindingData';
  3. import formProvider from '@ohos.app.form.formProvider';
  4. import formInfo from '@ohos.app.form.formInfo';
  6. export default class EntryAbility extends UIAbility {
  7.   // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
  8.   onCreate(want, launchParam) {
  9.     console.info('Want:' + JSON.stringify(want));
  10.     if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
  11.       let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
  12.       let message = JSON.parse(want.parameters.params).detail;
  13.       console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
  14.       let formData = {
  15.         "detail": message + ': onCreate UIAbility.', // 和卡片布局中对应
  16.       };
  17.       let formMsg = formBindingData.createFormBindingData(formData)
  18.       formProvider.updateForm(curFormId, formMsg).then((data) => {
  19.         console.info('updateForm success.' + JSON.stringify(data));
  20.       }).catch((error) => {
  21.         console.error('updateForm failed:' + JSON.stringify(error));
  22.       })
  23.     }
  24.   }
  25.   // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  26.   onNewWant(want, launchParam) {
  27.     console.info('onNewWant Want:' + JSON.stringify(want));
  28.     if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
  29.       let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
  30.       let message = JSON.parse(want.parameters.params).detail;
  31.       console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
  32.       let formData = {
  33.         "detail": message + ': onNewWant UIAbility.', // 和卡片布局中对应
  34.       };
  35.       let formMsg = formBindingData.createFormBindingData(formData)
  36.       formProvider.updateForm(curFormId, formMsg).then((data) => {
  37.         console.info('updateForm success.' + JSON.stringify(data));
  38.       }).catch((error) => {
  39.         console.error('updateForm failed:' + JSON.stringify(error));
  40.       })
  41.     }
  42.   }
  44.   ...
  45. }

??5.2 call

1、在使用postCardAction接口的call事件时，需要在FormExtensionAbility中的onAddForm生命周期回调中更新formId。

  1. import formBindingData from '@ohos.app.form.formBindingData'; 
  2. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  4. export default class EntryFormAbility extends FormExtensionAbility {
  5.   onAddForm(want) {
  6.    let formId = want.parameters["ohos.extra.param.key.form_identity"];
  7.    let dataObj1 = {
  8.      "formId": formId
  9.    };
  10.    let obj1 = formBindingData.createFormBindingData(dataObj1);
  11.    return obj1;
  12.  }
  13.     
  14.  ...
  15. };

2、卡片界面

  1. let storage = new LocalStorage();
  3. @Entry(storage)
  4. @Component
  5. struct WidgetCard {
  6.   @LocalStorageProp('detail') detail: string = 'init';
  7.   @LocalStorageProp('formId') formId: string = '0';
  9.   build() {
  10.     Column() {
  11.       Button('拉至后台')
  12.         .margin('20%')
  13.         .onClick(() => {
  14.           console.info('postCardAction to EntryAbility');
  15.           postCardAction(this, {
  16.             'action': 'call',
  17.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  18.             'params': {
  19.               'method': 'funA',
  20.               'formId': this.formId,
  21.               'detail': 'CallFromCard'
  22.             }
  23.           });
  24.         })
  25.       Text(`${this.detail}`).margin('20%')
  26.     }
  27.     .width('100%')
  28.     .height('100%')
  29.   }
  30. }
  31. let storage = new LocalStorage();
  33. @Entry(storage)
  34. @Component
  35. struct WidgetCard {
  36.   @LocalStorageProp('detail') detail: string = 'init';
  37.   @LocalStorageProp('formId') formId: string = '0';
  39.   build() {
  40.     Column() {
  41.       Button('拉至后台')
  42.         .margin('20%')
  43.         .onClick(() => {
  44.           console.info('postCardAction to EntryAbility');
  45.           postCardAction(this, {
  46.             'action': 'call',
  47.             'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
  48.             'params': {
  49.               'method': 'funA',
  50.               'formId': this.formId,
  51.               'detail': 'CallFromCard'
  52.             }
  53.           });
  54.         })
  55.       Text(`${this.detail}`).margin('20%')
  56.     }
  57.     .width('100%')
  58.     .height('100%')
  59.   }
  60. }

3、UIAbility界面

  1. import UIAbility from '@ohos.app.ability.UIAbility';
  2. import formBindingData from '@ohos.app.form.formBindingData';
  3. import formProvider from '@ohos.app.form.formProvider';
  4. import formInfo from '@ohos.app.form.formInfo';
  5. const MSG_SEND_METHOD: string = 'funA'
  6.  
  7. // 在收到call事件后会触发callee监听的方法
  8. function FunACall(data) {
  9.   // 获取call事件中传递的所有参数
  10.   let params = JSON.parse(data.readString())
  11.   if (params.formId !== undefined) {
  12.     let curFormId = params.formId;
  13.     let message = params.detail;
  14.     console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
  15.     let formData = {
  16.       "detail": message
  17.     };
  18.     let formMsg = formBindingData.createFormBindingData(formData)
  19.     formProvider.updateForm(curFormId, formMsg).then((data) => {
  20.       console.info('updateForm success.' + JSON.stringify(data));
  21.     }).catch((error) => {
  22.       console.error('updateForm failed:' + JSON.stringify(error));
  23.     })
  24.   }
  25.   return null;
  26. }
  27. export default class EntryAbility extends UIAbility {
  28.   // 如果UIAbility第一次启动，call事件后会触发onCreate生命周期回调
  29.   onCreate(want, launchParam) {
  30.     console.info('Want:' + JSON.stringify(want));
  31.     try {
  32.        // 监听call事件所需的方法
  33.       this.callee.on(MSG_SEND_METHOD, FunACall);
  34.     } catch (error) {
  35.       console.log(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`)
  36.     }
  37.   }
  38.   ...
  39. }

??写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing??，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY

image

原文链接：https://www.cnblogs.com/shudaoshan/p/18203026

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

鸿蒙热门文章

  • 小窗口大魔力，实况窗服务实时掌控重要信息变化
  • 鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）
  • 鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）
  • 鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）
  • Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
  • 鸿蒙开发学习（一）之ArkTS
  • 纯血鸿蒙来了，企业开发者应该关注什么
  • 鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
  • 鸿蒙开发游戏（一）---大鱼吃小鱼（界面部署）
  • 鸿蒙开发游戏（三）---大鱼吃小鱼（放置NPC）

    • 鸿蒙推荐文章

  • 鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）
  • 鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）
  • 鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）
  • 鸿蒙HarmonyOS实战-Stage模型（UIAbility组件）
  • 鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Flex）
  • 鸿蒙HarmonyOS实战-工具安装和Helloworld案例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号