鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）

最新推荐文章于 2024-07-26 14:17:45 发布
最新推荐文章于 2024-07-26 14:17:45 发布
阅读量1.2k 收藏 16
点赞数 28
分类专栏： 鸿蒙 文章标签： harmonyos 华为 华为od 华为云 鸿蒙 microsoft 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/135479965
版权
本文详细介绍了HarmonyOS系统中元服务卡片页面的开发，重点讲解了postCardAction接口如何通过router、message和call事件实现页面跳转、消息传递和与提供方应用的交互，包括UIAbility的接收和处理这些事件的方式。
摘要由CSDN通过智能技术生成

 一、开发卡片事件

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

1.卡片事件能力说明

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

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

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

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

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

在这里插入图片描述

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

1、元服务界面

@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      Button('功能A')
        .margin('20%')
        .onClick(() => {
          console.info('Jump to EntryAbility funA');
          postCardAction(this, {
            'action': 'router',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'targetPage': 'funA' // 在EntryAbility中处理这个信息
            }
          });
        })

      Button('功能B')
        .margin('20%')
        .onClick(() => {
          console.info('Jump to EntryAbility funB');
          postCardAction(this, {
            'action': 'router',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'targetPage': 'funB' // 在EntryAbility中处理这个信息
            }
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

在这里插入图片描述

2、UIAbility接收参数

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

let selectPage = "";
let currentWindowStage = null;

export default class CameraAbility extends UIAbility {
  // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
    // 获取router事件中传递的targetPage参数
    console.info("onCreate want:" + JSON.stringify(want));
    if (want.parameters.params !== undefined) {
      let params = JSON.parse(want.parameters.params);
      console.info("onCreate router targetPage:" + params.targetPage);
      selectPage = params.targetPage;
    }
  }
  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want, launchParam) {
    console.info("onNewWant want:" + JSON.stringify(want));
    if (want.parameters.params !== undefined) {
      let params = JSON.parse(want.parameters.params);
      console.info("onNewWant router targetPage:" + params.targetPage);
      selectPage = params.targetPage;
    }
    if (currentWindowStage != null) {
      this.onWindowStageCreate(currentWindowStage);
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    let targetPage;
    // 根据传递的targetPage不同，选择拉起不同的页面
    switch (selectPage) {
      case 'funA':
        targetPage = 'pages/FunA';
        break;
      case 'funB':
        targetPage = 'pages/FunB';
        break;
      default:
        targetPage = 'pages/Index';
    }
    if (currentWindowStage === null) {
      currentWindowStage = windowStage;
    }
    windowStage.loadContent(targetPage, (err, data) => {
      if (err && err.code) {
        console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
    });
  }
};

在这里插入图片描述

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

1、元服务界面

@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      Button('功能A')
        .margin('20%')
        .onClick(() => {
          console.info('call EntryAbility funA');
          postCardAction(this, {
            'action': 'call',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'method': 'funA' // 在EntryAbility中调用的方法名
            }
          });
        })
       Button('功能B')
        .margin('20%')
        .onClick(() => {
          console.info('call EntryAbility funB');
          postCardAction(this, {
            'action': 'call',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'method': 'funB', // 在EntryAbility中调用的方法名
              'num': 1 // 需要传递的其他参数
            }
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

2、UIAbility接收参数

import UIAbility from '@ohos.app.ability.UIAbility';
 
function FunACall(data) {
  // 获取call事件中传递的所有参数
  console.log('FunACall param:' + JSON.stringify(data.readString()));
  return null;
}
 function FunBCall(data) {
  console.log('FunACall param:' + JSON.stringify(data.readString()));
  return null;
}
 
export default class CameraAbility extends UIAbility {
  // 如果UIAbility第一次启动，在收到call事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
      try {
          // 监听call事件所需的方法
          this.callee.on('funA', FunACall);
          this.callee.on('funB', FunBCall);
      } catch (error) {
          console.log('register failed with error. Cause: ' + JSON.stringify(error));
      }
  }
   
  // 进程退出时，解除监听
  onDestroy() {
      try {
          this.callee.off('funA');
          this.callee.off('funB');
      } catch (error) {
          console.log('register failed with error. Cause: ' + JSON.stringify(error));
      }
  }
};

不截图同上

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

1、卡片页面

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('title') title: string = 'init';
  @LocalStorageProp('detail') detail: string = 'init';

  build() {
    Column() {
      Button('刷新')
        .onClick(() => {
          postCardAction(this, {
            'action': 'message',
            'params': {
              'msgTest': 'messageEvent'
            }
          });
        })
      Text(`${this.title}`)
      Text(`${this.detail}`)
    }
    .width('100%')
    .height('100%')
  }
}

2、卡片FormExtensionAbility

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 {
  onFormEvent(formId, message) {
    // Called when a specified message event defined by the form provider is triggered.
    console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
    let formData = {
      'title': 'Title Update Success.', // 和卡片布局中对应
      'detail': 'Detail Update Success.', // 和卡片布局中对应
    };
    let formInfo = formBindingData.createFormBindingData(formData)
    formProvider.updateForm(formId, formInfo).then((data) => {
      console.info('FormAbility updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    })
  }
}

在这里插入图片描述

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

🦋5.1 router

1、卡片

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('detail') detail: string = 'init';

  build() {
    Column() {
      Button('跳转')
        .margin('20%')
        .onClick(() => {
          console.info('postCardAction to EntryAbility');
          postCardAction(this, {
            'action': 'router',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'detail': 'RouterFromCard'
            }
          });
        })
      Text(`${this.detail}`).margin('20%')
    }
    .width('100%')
    .height('100%')
  }
}

2、UIAbility

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

export default class EntryAbility extends UIAbility {
  // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
    console.info('Want:' + JSON.stringify(want));
    if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      let message = JSON.parse(want.parameters.params).detail;
      console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
      let formData = {
        "detail": message + ': onCreate UIAbility.', // 和卡片布局中对应
      };
      let formMsg = formBindingData.createFormBindingData(formData)
      formProvider.updateForm(curFormId, formMsg).then((data) => {
        console.info('updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
        console.error('updateForm failed:' + JSON.stringify(error));
      })
    }
  }
  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want, launchParam) {
    console.info('onNewWant Want:' + JSON.stringify(want));
    if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      let message = JSON.parse(want.parameters.params).detail;
      console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
      let formData = {
        "detail": message + ': onNewWant UIAbility.', // 和卡片布局中对应
      };
      let formMsg = formBindingData.createFormBindingData(formData)
      formProvider.updateForm(curFormId, formMsg).then((data) => {
        console.info('updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
        console.error('updateForm failed:' + JSON.stringify(error));
      })
    }
  }

  ...
}

🦋5.2 call

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

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

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {
   let formId = want.parameters["ohos.extra.param.key.form_identity"];
   let dataObj1 = {
     "formId": formId
   };
   let obj1 = formBindingData.createFormBindingData(dataObj1);
   return obj1;
 }
    
 ...
};

2、卡片界面

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('detail') detail: string = 'init';
  @LocalStorageProp('formId') formId: string = '0';

  build() {
    Column() {
      Button('拉至后台')
        .margin('20%')
        .onClick(() => {
          console.info('postCardAction to EntryAbility');
          postCardAction(this, {
            'action': 'call',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'method': 'funA',
              'formId': this.formId,
              'detail': 'CallFromCard'
            }
          });
        })
      Text(`${this.detail}`).margin('20%')
    }
    .width('100%')
    .height('100%')
  }
}

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('detail') detail: string = 'init';
  @LocalStorageProp('formId') formId: string = '0';

  build() {
    Column() {
      Button('拉至后台')
        .margin('20%')
        .onClick(() => {
          console.info('postCardAction to EntryAbility');
          postCardAction(this, {
            'action': 'call',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
              'method': 'funA',
              'formId': this.formId,
              'detail': 'CallFromCard'
            }
          });
        })
      Text(`${this.detail}`).margin('20%')
    }
    .width('100%')
    .height('100%')
  }
}

3、UIAbility界面

import UIAbility from '@ohos.app.ability.UIAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo';
const MSG_SEND_METHOD: string = 'funA'
 
// 在收到call事件后会触发callee监听的方法
function FunACall(data) {
  // 获取call事件中传递的所有参数
  let params = JSON.parse(data.readString())
  if (params.formId !== undefined) {
    let curFormId = params.formId;
    let message = params.detail;
    console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
    let formData = {
      "detail": message
    };
    let formMsg = formBindingData.createFormBindingData(formData)
    formProvider.updateForm(curFormId, formMsg).then((data) => {
      console.info('updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      console.error('updateForm failed:' + JSON.stringify(error));
    })
  }
  return null;
}
export default class EntryAbility extends UIAbility {
  // 如果UIAbility第一次启动，call事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
    console.info('Want:' + JSON.stringify(want));
    try {
       // 监听call事件所需的方法
      this.callee.on(MSG_SEND_METHOD, FunACall);
    } catch (error) {
      console.log(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`)
    }
  }
  ...
}

 🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资料，请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试”中，我们可以学习到关于HarmonyOS应用开发的关键知识点。这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。...
HarmonyOS4.0系统性深入开发10卡片事件能力说明
qq_46189388的博客
12-31 1376
ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。接口定义：postCardAction(component: Object, action: Object): void。
鸿蒙开发实战：快速上手【万能卡片】
m0_62167422的博客
03-26 1434
本案例使用HUAWEI DevEco Studio 3.0.0.800，API4-API7都可以体验，由于IDE版本与API不断升级与兼容性等问题，大家练习时可能会遇到一些细节上的差异，整体流程是一致的。1.创建工程项目打开DevEco Studio选择你的Ability 模板，这里我们选择Empty Ability模板，然后点击Next进行下一步。如图1所示。2.配置工程项目配置的项目工程，如图2和图3所示，然后单击Finish创建。
HarmonyOS实战—影视类卡片应用
李元静
06-20 7325
目录HarmonyOS实战影视类卡片应用实战swiper选项卡推荐功能网络数据请求页面路由list列表横向视频推荐grid网格视频推荐样式文件（index.css）视频播放页面页面（pagevideo.hml）用户交互（pagevideo.js）界面样式（pagevideo.css）其他设置 HarmonyOS实战 影视类卡片应用实战 在前面，博主详细介绍了HarmonyOS原子化服务的优点，通过卡片式操作，我们可以快速找到我们想要的功能模块。 而在实际的用户体验中，比如影视类用户，有这么一群人，它们只关
鸿蒙HarmonyOS实战-Stage模型（服务卡片的模块和创建）
shudaoshanQAQ的博客
01-09 826
在HarmonyOS中，服务卡片是一种提供即时信息和快速操作的小组件，类似于Android中的通知栏。
【鸿蒙】桌面卡片开发教程：从底层原理开始讲透call事件的刷新机制 “坚果派-咸鱼”
2401_82772199的博客
03-03 1084
第二个原因是从实际的运行机制来说，桌面卡片实际上并不是应用主体的一部分，而是归属于 OpenHarmony 系统中的桌面应用所管理的一系列服务，桌面卡片与其对应的应用主体之间相互隔离，只能使用专门的接口来进行数据交互与页面管理。由于卡片与应用主体是独立运作的，并且一个应用可能会有多个应用卡片，应用其实并不知到是哪个卡片触发了 call 事件，所以我们需要把卡片 id 作为参数一起写入接口，让卡片的管理方能找到我们要刷新的卡片。2.call 事件拉起应用主体的后台，进行数据准备，通过。
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HarmonyOS第一课 应用程序框架-闯关习题及答案.docx
11-19
HarmonyOS 是华为开发的一款面向全场景的分布式操作系统，旨在提供跨设备、无缝协同的用户体验。在 HarmonyOS 的应用程序框架中，UIAbility 是构建用户界面的关键组件，它负责处理与用户交互相关的逻辑。本篇将围绕 ...
HarmonyOS应用开发者认证题目满分指南
01-27
为了帮助开发者快速掌握HarmonyOS应用开发，官方提供了"HarmonyOS第一课"系列课程，其中包含了丰富的练习题目。本指南将围绕这些题目解析相关知识点。 1. **DevEco Studio**： - DevEco Studio是HarmonyOS应用开发...
目标检测之one-stage模型发展总结
01-07
由于广泛的应用和技术上的突破，目标检测（object detection）在近些年吸引了越来越多的注意力，以飞快的速度发展着。在导致目标检测领域飞速发展的众多因素中，深度卷积神经网络和GPU算力无疑占据着重要的地位。...
【ARK UI】【HarmonyOS】鸿蒙跳转action说明
华为开发者联盟
09-07 1136
鸿蒙跳转action说明
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1650
开发版烧录
HarmonyOS应用开发学习笔记 UI布局学习 栅格布局（GridRow/GridCol）
小木子102
01-10 1785
HarmonyOS应用开发学习笔记 UI布局学习 栅格布局（GridRow/GridCol）
Stage模型生命周期函数
qq_57985179的博客
02-07 2096
自己对生命周期函数一些理解
鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）_harmonyos元服务卡片(3)
04-11 730
Entry@Component// 初始化CanvasRenderingContext2D和RenderingContextSettingsbuild() {Column() {Row() {// 在onReady回调中获取画布的实际宽和高// 绘制画布的背景// 在画布的中心绘制一个红色的圆自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
鸿蒙元服务万能卡片开发-stage模型和fa模型的卡片区别
weixin_69135651的博客
05-22 1277
鸿蒙元服务万能卡片开发-stage模型和fa模型的卡片区别
鸿蒙开发实例 | 鸿蒙原子化服务卡片开发完美体验
不断学习，不断进步，提高自己
10-28 3671
服务卡片是 FA 的一种界面展示形式，将 FA 的重要信息或操作直接放置到卡片中，用户通过操作卡片就可以达到应用的使用体验，这样做大大减少了应用的使用层级性。卡片常用于嵌入到其他应用中作为其界面的一部分显示（也可以使用原子化服务将应用保存到服务中心中，这种方式不需要安装应用），并支持拉起页面、发送消息等基础的交互功能。服务卡片实际界面如图1所示。■ 图1 服务卡片实际界面桌面上混合着服务卡片和应用图标。例如天气服务卡片，展示了多时段天气；运动健康服务卡片，展示了运动步数等重要信息。
HarmonyOS Next开发学习手册——卡片事件
最新发布
maniuT的博客
07-26 593
在卡片中使用 postCardAction 接口的router能力，能够快速拉起卡片提供方应用的指定UIAbility，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。例如相机卡片，卡片上提供拍照、录像等按钮，点击不同按钮将拉起相机应用的不同UIAbility，从而提高用户的体验。对动态卡片，ArkTS卡片中提供了 postCardAction 接口用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。
鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）_harmonyos元服务卡片(2)
04-11 818
Entry@Component// 初始化CanvasRenderingContext2D和RenderingContextSettingsbuild() {Column() {Row() {// 在onReady回调中获取画布的实际宽和高// 绘制画布的背景自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值