HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第41天,卡片事件能力说明。

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第41天,卡片事件能力说明。 1、卡片事件能力说明

ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互,当前支持router、message和call三种类型的事件,仅在卡片中可以调用。

接口定义:postCardAction(component: Object, action: Object): void

接口参数说明:

参数名 参数类型 必填 参数描述
component Object 当前自定义组件的实例,通常传入this
action Object action的具体描述,详情见下表。

action参数说明:

Key Value 样例描述
"action" string action的类型,支持三种预定义的类型:
- "router":跳转到提供方应用的指定UIAbility。
- "message":自定义消息。触发后会调用提供方FormExtensionAbilityonFormEvent()生命周期回调。
- "call":后台启动提供方应用。触发后会拉起提供方应用的指定UIAbility(仅支持launchType为singleton的UIAbility,即启动模式为单实例的UIAbility),但不会调度到前台。提供方应用需要具备后台运行权限(ohos.permission.KEEP_BACKGROUND_RUNNING)。
"bundleName" string "router" / "call" 类型时跳转的包名,可选。
"moduleName" string "router" / "call" 类型时跳转的模块名,可选。
"abilityName" string "router" / "call" 类型时跳转的UIAbility名,必填。
"params" Object 当前action携带的额外参数,内容使用JSON格式的键值对形式。"call"类型时需填入参数'method',且类型需要为string类型,用于触发UIAbility中对应的方法,必填。

postCardAction()接口示例代码:

Button('跳转')
  .width('40%')
  .height('20%')
  .onClick(() => {
    postCardAction(this, {
      'action': 'router',
      'bundleName': 'com.example.myapplication',
      'abilityName': 'EntryAbility',
      'params': {
        'message': 'testForRouter' // 自定义要发送的message
      }
    });
  })
Button('拉至后台')
  .width('40%')
  .height('20%')
  .onClick(() => {
    postCardAction(this, {
      'action': 'call',
      'bundleName': 'com.example.myapplication',
      'abilityName': 'EntryAbility',
      'params': {
        'method': 'fun', // 自定义调用的方法名,必填
        'message': 'testForCall' // 自定义要发送的message
      }
    });
  })

以下介绍通过卡片事件实现的典型开发场景。

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

在卡片中使用postCardAction接口的router能力,能够快速拉起卡片提供方应用的指定UIAbility,因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮,实现一键直达的效果。例如相机卡片,卡片上提供拍照、录像等按钮,点击不同按钮将拉起相机应用的不同UIAbility,从而提升用户的体验。

通常使用按钮控件来实现页面拉起,示例代码如下:

@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%')
  }
}

在UIAbility中接收router事件并获取参数,根据传递的params不同,选择拉起不同的页面。

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到后台

许多应用希望借助卡片的能力,实现和应用在前台时相同的功能。例如音乐卡片,卡片上提供播放、暂停等按钮,点击不同按钮将触发音乐应用的不同功能,进而提高用户的体验。在卡片中使用postCardAction接口的call能力,能够将卡片提供方应用的指定UIAbility拉到后台。同时,call能力提供了调用应用指定方法、传递数据的功能,使应用在后台运行时可以通过卡片上的按钮执行不同的功能。

通常使用按钮控件来触发call事件,示例代码如下:

@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%')
  }
}

在UIAbility中接收call事件并获取参数,根据传递的method不同,执行不同的方法。其余数据可以通过readString的方式获取。需要注意的是,UIAbility需要在onCreate生命周期中监听所需的方法。

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));
      }
  }
};

更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第41天,卡片事件能力说明。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中,ArkTS语言提供了卡片事件能力,用于处理卡片与用户交互的相关事件。卡片事件能力主要包括以下几种:

  1. 点击事件(onClick):当用户点击卡片时触发,可以用于执行特定的操作或跳转到其他页面。

  2. 长按事件(onLongPress):当用户长按卡片时触发,通常用于显示上下文菜单或执行其他长按操作。

  3. 滑动事件(onSwipe):当用户在卡片上滑动时触发,可以用于实现滑动删除或切换卡片内容等功能。

  4. 拖拽事件(onDrag):当用户拖拽卡片时触发,通常用于重新排列卡片或移动卡片位置。

  5. 焦点事件(onFocus/onBlur):当卡片获得或失去焦点时触发,可以用于处理焦点变化时的逻辑。

  6. 生命周期事件(onAppear/onDisappear):当卡片出现在屏幕上或从屏幕上消失时触发,可以用于处理卡片的生命周期管理。

  7. 数据更新事件(onDataChange):当卡片的数据发生变化时触发,可以用于更新卡片内容或执行相关操作。

这些事件能力通过ArkTS语言的事件绑定机制来实现,开发者可以在卡片组件中定义相应的事件处理函数,并在函数中编写具体的逻辑代码。例如:

@Entry
@Component
struct MyCard {
    build() {
        Column() {
            Text('点击我')
                .onClick(() => {
                    console.log('卡片被点击了');
                })
        }
    }
}

在上述代码中,onClick事件绑定了一个匿名函数,当用户点击卡片时,控制台会输出“卡片被点击了”。

通过合理使用这些事件能力,开发者可以增强卡片的交互性,提升用户体验。

更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第41天,卡片事件能力说明。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next的ArkTS语言教程第41天,主要讲解了卡片事件能力。卡片事件是指用户与卡片交互时触发的事件,如点击、长按等。开发者可以通过监听这些事件来实现动态响应,例如更新卡片内容或执行特定操作。ArkTS提供了丰富的事件处理机制,开发者可以使用@State@Prop等装饰器来管理卡片状态,并通过onClickonLongPress等事件回调函数处理用户交互。掌握卡片事件能力有助于提升应用的用户体验和交互性。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!