HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第41天,卡片事件能力说明。
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" :自定义消息。触发后会调用提供方FormExtensionAbility 的onFormEvent() 生命周期回调。- "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
在HarmonyOS鸿蒙Next中,ArkTS语言提供了卡片事件能力,用于处理卡片与用户交互的相关事件。卡片事件能力主要包括以下几种:
-
点击事件(onClick):当用户点击卡片时触发,可以用于执行特定的操作或跳转到其他页面。
-
长按事件(onLongPress):当用户长按卡片时触发,通常用于显示上下文菜单或执行其他长按操作。
-
滑动事件(onSwipe):当用户在卡片上滑动时触发,可以用于实现滑动删除或切换卡片内容等功能。
-
拖拽事件(onDrag):当用户拖拽卡片时触发,通常用于重新排列卡片或移动卡片位置。
-
焦点事件(onFocus/onBlur):当卡片获得或失去焦点时触发,可以用于处理焦点变化时的逻辑。
-
生命周期事件(onAppear/onDisappear):当卡片出现在屏幕上或从屏幕上消失时触发,可以用于处理卡片的生命周期管理。
-
数据更新事件(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
等装饰器来管理卡片状态,并通过onClick
、onLongPress
等事件回调函数处理用户交互。掌握卡片事件能力有助于提升应用的用户体验和交互性。