未验证 提交 8dc7439b 编写于 作者: O openharmony_ci 提交者: Gitee

!18213 卡片事件文档问题修复(release)

Merge pull request !18213 from wangkailong/OpenHarmony-3.2-Release
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
- [卡片使用自定义绘制能力](arkts-ui-widget-page-custom-drawing.md) - [卡片使用自定义绘制能力](arkts-ui-widget-page-custom-drawing.md)
- 开发卡片事件 - 开发卡片事件
- [卡片事件能力说明](arkts-ui-widget-event-overview.md) - [卡片事件能力说明](arkts-ui-widget-event-overview.md)
- [通过FormExtensionAbility刷新卡片内容](arkts-ui-widget-event-formextensionability.md) - [使用router事件跳转到指定UIAbility](arkts-ui-widget-event-router.md)
- [使用router事件跳转到指定页面](arkts-ui-widget-event-router.md)
- [使用call事件拉起指定UIAbility到后台](arkts-ui-widget-event-call.md) - [使用call事件拉起指定UIAbility到后台](arkts-ui-widget-event-call.md)
- [通过UIAbility刷新卡片内容](arkts-ui-widget-event-uiability.md) - [通过message事件刷新卡片内容](arkts-ui-widget-event-formextensionability.md)
- [通过router或call事件刷新卡片内容](arkts-ui-widget-event-uiability.md)
- 卡片数据交互 - 卡片数据交互
- [卡片数据交互说明](arkts-ui-widget-interaction-overview.md) - [卡片数据交互说明](arkts-ui-widget-interaction-overview.md)
- [定时刷新和定点刷新](arkts-ui-widget-update-by-time.md) - [定时刷新和定点刷新](arkts-ui-widget-update-by-time.md)
......
# 使用call事件拉起指定UIAbility到后台 # 使用call事件拉起指定UIAbility到后台
许多应用希望借助卡片的能力,实现和应用在前台时相同的功能。例如音乐卡片,卡片上提供播放、暂停等按钮,点击不同按钮将触发音乐应用的不同功能,进而提高用户的体验。在卡片中使用**postCardAction**接口的call能力,能够将卡片提供方应用拉到后台。同时,call能力提供了调用应用指定方法、传递数据的功能,使应用在后台运行时可以通过卡片上的按钮执行不同的功能。 许多应用希望借助卡片的能力,实现和应用在前台时相同的功能。例如音乐卡片,卡片上提供播放、暂停等按钮,点击不同按钮将触发音乐应用的不同功能,进而提高用户的体验。在卡片中使用**postCardAction**接口的call能力,能够将卡片提供方应用的指定的UIAbility拉到后台。同时,call能力提供了调用应用指定方法、传递数据的功能,使应用在后台运行时可以通过卡片上的按钮执行不同的功能。
通常使用按钮控件来触发call事件,示例代码如下: 通常使用按钮控件来触发call事件,示例代码如下:
...@@ -52,38 +52,38 @@ ...@@ -52,38 +52,38 @@
```ts ```ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
function FunACall(data) { function FunACall(data) {
// 获取call事件中传递的所有参数 // 获取call事件中传递的所有参数
console.info('FunACall param:' + JSON.stringify(data.readString())); console.log('FunACall param:' + JSON.stringify(data.readString()));
return null; return null;
} }
function FunBCall(data) { function FunBCall(data) {
console.info('FunACall param:' + JSON.stringify(data.readString())); console.log('FunACall param:' + JSON.stringify(data.readString()));
return null; return null;
} }
export default class CameraAbility extends UIAbility { export default class CameraAbility extends UIAbility {
// 如果UIAbility第一次启动,在收到call事件后会触发onCreate生命周期回调 // 如果UIAbility第一次启动,在收到call事件后会触发onCreate生命周期回调
onCreate(want, launchParam) { onCreate(want, launchParam) {
try { try {
// 监听call事件所需的方法 // 监听call事件所需的方法
this.callee.on('funA', FunACall); this.callee.on('funA', FunACall);
this.callee.on('funB', FunBCall); this.callee.on('funB', FunBCall);
} catch (error) { } catch (error) {
console.error(`Failed to register callee on. Cause: ${JSON.stringify(err)}`); console.log('register failed with error. Cause: ' + JSON.stringify(error));
} }
} }
// 进程退出时,解除监听 // 进程退出时,解除监听
onDestroy() { onDestroy() {
try { try {
this.callee.off('funA'); this.callee.off('funA');
this.callee.off('funB'); this.callee.off('funB');
} catch (err) { } catch (error) {
console.error(`Failed to register callee off. Cause: ${JSON.stringify(err)}`); console.log('register failed with error. Cause: ' + JSON.stringify(error));
} }
} }
}; };
``` ```
# 通过FormExtensionAbility刷新卡片内容 # 通过message事件刷新卡片内容
在卡片页面中可以通过**postCardAction**接口触发message事件FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容,下面是这种刷新方式的简单示例。 在卡片页面中可以通过**postCardAction**接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容,下面是这种刷新方式的简单示例。
- 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用**postCardAction**接口触发事件至FormExtensionAbility。 - 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用**postCardAction**接口触发事件至FormExtensionAbility。
......
...@@ -21,7 +21,7 @@ action参数说明: ...@@ -21,7 +21,7 @@ action参数说明:
| **Key** | **Value** | **样例描述** | | **Key** | **Value** | **样例描述** |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| "action" | string | action的类型,支持三种预定义的类型:<br/>-&nbsp;"router":应用跳转,触发后会跳转到对应UIAbility,仅允许跳转到当前应用的UIAbility。<br/>-&nbsp;"message":自定义消息,触发后会调用提供方FormExtensionAbility的[onFormEvent()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onformevent)生命周期回调。<br/>-&nbsp;"call":应用非前台启动,触发后会启动当前应用的UIAbility,但不会调度到前台,call的目标应用需要具备后台运行权限([ohos.permission.KEEP_BACKGROUND_RUNNING](../security/permission-list.md#ohospermissionkeep_background_running))。 | | "action" | string | action的类型,支持三种预定义的类型:<br/>-&nbsp;"router":跳转到提供方应用的指定UIAbility。<br/>-&nbsp;"message":自定义消息,触发后会调用提供方FormExtensionAbility的[onFormEvent()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onformevent)生命周期回调。<br/>-&nbsp;"call":后台启动提供方应用。触发后会拉起提供方应用的指定UIAbility,但不会调度到前台。提供方应用需要具备后台运行权限([ohos.permission.KEEP_BACKGROUND_RUNNING](../security/permission-list.md#ohospermissionkeep_background_running))。 |
| "bundleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的包名,可选。 | | "bundleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的包名,可选。 |
| "moduleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的模块名,可选。 | | "moduleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的模块名,可选。 |
| "abilityName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的UIAbility名,必填。 | | "abilityName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的UIAbility名,必填。 |
...@@ -61,13 +61,4 @@ Button('拉至后台') ...@@ -61,13 +61,4 @@ Button('拉至后台')
}) })
``` ```
以下是卡片开发过程中可以通过卡片事件实现的典型开发场景: 以下介绍通过卡片事件实现的典型开发场景。
\ No newline at end of file
- [通过FormExtensionAbility刷新卡片内容](arkts-ui-widget-event-formextensionability.md)
- [通过UIAbility刷新卡片内容](arkts-ui-widget-event-uiability.md)
- [使用router事件跳转到指定页面](arkts-ui-widget-event-router.md)
- [使用call事件拉起指定UIAbility到后台](arkts-ui-widget-event-call.md)
# 使用router事件跳转到指定页面 # 使用router事件跳转到指定UIAbility
在卡片中使用**postCardAction**接口的router能力,能够快速拉起卡片提供方应用,因此页面较多的应用往往会通过卡片提供不同的跳转按钮,实现一键直达的效果。例如相机卡片,卡片上提供拍照、录像等按钮,点击不同按钮将拉起相机应用的不同页面,从而提高用户的体验。
在卡片中使用**postCardAction**接口的router能力,能够快速拉起卡片提供方应用的指定UIAbility,因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮,实现一键直达的效果。例如相机卡片,卡片上提供拍照、录像等按钮,点击不同按钮将拉起相机应用的不同UIAbility,从而提高用户的体验。
![WidgerCameraCard](figures/WidgerCameraCard.png) ![WidgerCameraCard](figures/WidgerCameraCard.png)
......
# 通过UIAbility刷新卡片内容 # 通过router或call事件刷新卡片内容
在卡片页面中可以通过**postCardAction**接口触发router事件或者call事件拉起UIAbility,然后由UIAbility刷新卡片内容,下面是这种刷新方式的简单示例。 在卡片页面中可以通过**postCardAction**接口触发router事件或者call事件拉起UIAbility,然后由UIAbility刷新卡片内容,下面是这种刷新方式的简单示例。
## 通过postCardAction接口触发router事件 ## 通过router事件刷新卡片内容
- 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用**postCardAction**接口触发router事件至FormExtensionAbility。 - 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用**postCardAction**接口触发router事件至FormExtensionAbility。
...@@ -86,10 +86,10 @@ ...@@ -86,10 +86,10 @@
} }
``` ```
## 通过postCardAction接口触发call事件 ## 通过call事件刷新卡片内容
- 在使用**postCardAction**接口的call事件时,需要在FormExtensionAbility中的onAddForm生命周期回调中更新formId。 - 在使用**postCardAction**接口的call事件时,需要在FormExtensionAbility中的onAddForm生命周期回调中更新formId。
```ts ```ts
import formBindingData from '@ohos.app.form.formBindingData'; import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
struct WidgetCard { struct WidgetCard {
@LocalStorageProp('detail') detail: string = 'init'; @LocalStorageProp('detail') detail: string = 'init';
@LocalStorageProp('formId') formId: string = '0'; @LocalStorageProp('formId') formId: string = '0';
build() { build() {
Column() { Column() {
Button('拉至后台') Button('拉至后台')
...@@ -150,8 +150,8 @@ ...@@ -150,8 +150,8 @@
import formProvider from '@ohos.app.form.formProvider'; import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo'; import formInfo from '@ohos.app.form.formInfo';
const MSG_SEND_METHOD: string = 'funA'; const MSG_SEND_METHOD: string = 'funA'
// 在收到call事件后会触发callee监听的方法 // 在收到call事件后会触发callee监听的方法
function FunACall(data) { function FunACall(data) {
// 获取call事件中传递的所有参数 // 获取call事件中传递的所有参数
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
// 监听call事件所需的方法 // 监听call事件所需的方法
this.callee.on(MSG_SEND_METHOD, FunACall); this.callee.on(MSG_SEND_METHOD, FunACall);
} catch (error) { } catch (error) {
console.info(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`) console.log(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`)
} }
} }
... ...
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册