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

2024-01-25 12:21 更新

在卡片页面中可以通过postCardAction接口触发router或call事件拉起UIAbility,然后由UIAbility刷新卡片内容,下面是这种刷新方式的简单示例。

通过router事件刷新卡片内容

  • 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发router事件拉起UIAbility。
    1. let storage = new LocalStorage();
    2. @Entry(storage)
    3. @Component
    4. struct WidgetCard {
    5. @LocalStorageProp('detail') detail: string = 'init';
    6. build() {
    7. Column() {
    8. Button('跳转')
    9. .margin('20%')
    10. .onClick(() => {
    11. console.info('postCardAction to EntryAbility');
    12. postCardAction(this, {
    13. 'action': 'router',
    14. 'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
    15. 'params': {
    16. 'detail': 'RouterFromCard'
    17. }
    18. });
    19. })
    20. Text(`${this.detail}`).margin('20%')
    21. }
    22. .width('100%')
    23. .height('100%')
    24. }
    25. }
  • 在UIAbility的onCreate()或者onNewWant()生命周期中可以通过入参want获取卡片的formID和传递过来的参数信息,然后调用updateForm接口刷新卡片。
    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. export default class EntryAbility extends UIAbility {
    6. // 如果UIAbility第一次启动,在收到Router事件后会触发onCreate生命周期回调
    7. onCreate(want, launchParam) {
    8. console.info('Want:' + JSON.stringify(want));
    9. if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
    10. let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    11. let message = JSON.parse(want.parameters.params).detail;
    12. console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
    13. let formData = {
    14. "detail": message + ': onCreate UIAbility.', // 和卡片布局中对应
    15. };
    16. let formMsg = formBindingData.createFormBindingData(formData)
    17. formProvider.updateForm(curFormId, formMsg).then((data) => {
    18. console.info('updateForm success.' + JSON.stringify(data));
    19. }).catch((error) => {
    20. console.error('updateForm failed:' + JSON.stringify(error));
    21. })
    22. }
    23. }
    24. // 如果UIAbility已在后台运行,在收到Router事件后会触发onNewWant生命周期回调
    25. onNewWant(want, launchParam) {
    26. console.info('onNewWant Want:' + JSON.stringify(want));
    27. if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
    28. let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    29. let message = JSON.parse(want.parameters.params).detail;
    30. console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
    31. let formData = {
    32. "detail": message + ': onNewWant UIAbility.', // 和卡片布局中对应
    33. };
    34. let formMsg = formBindingData.createFormBindingData(formData)
    35. formProvider.updateForm(curFormId, formMsg).then((data) => {
    36. console.info('updateForm success.' + JSON.stringify(data));
    37. }).catch((error) => {
    38. console.error('updateForm failed:' + JSON.stringify(error));
    39. })
    40. }
    41. }
    42. ...
    43. }

通过call事件刷新卡片内容

  • 在使用postCardAction接口的call事件时,需要在FormExtensionAbility中的onAddForm生命周期回调中更新formId。
    1. import formBindingData from '@ohos.app.form.formBindingData';
    2. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    3. export default class EntryFormAbility extends FormExtensionAbility {
    4. onAddForm(want) {
    5. let formId = want.parameters["ohos.extra.param.key.form_identity"];
    6. let dataObj1 = {
    7. "formId": formId
    8. };
    9. let obj1 = formBindingData.createFormBindingData(dataObj1);
    10. return obj1;
    11. }
    12. ...
    13. };
  • 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发call事件拉起UIAbility。
    1. let storage = new LocalStorage();
    2. @Entry(storage)
    3. @Component
    4. struct WidgetCard {
    5. @LocalStorageProp('detail') detail: string = 'init';
    6. @LocalStorageProp('formId') formId: string = '0';
    7. build() {
    8. Column() {
    9. Button('拉至后台')
    10. .margin('20%')
    11. .onClick(() => {
    12. console.info('postCardAction to EntryAbility');
    13. postCardAction(this, {
    14. 'action': 'call',
    15. 'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
    16. 'params': {
    17. 'method': 'funA',
    18. 'formId': this.formId,
    19. 'detail': 'CallFromCard'
    20. }
    21. });
    22. })
    23. Text(`${this.detail}`).margin('20%')
    24. }
    25. .width('100%')
    26. .height('100%')
    27. }
    28. }
  • 在UIAbility的onCreate生命周期中监听call事件所需的方法,然后调用updateForm接口刷新卡片。
    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. // 在收到call事件后会触发callee监听的方法
    7. function FunACall(data) {
    8. // 获取call事件中传递的所有参数
    9. let params = JSON.parse(data.readString())
    10. if (params.formId !== undefined) {
    11. let curFormId = params.formId;
    12. let message = params.detail;
    13. console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
    14. let formData = {
    15. "detail": message
    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. return null;
    25. }
    26. export default class EntryAbility extends UIAbility {
    27. // 如果UIAbility第一次启动,call事件后会触发onCreate生命周期回调
    28. onCreate(want, launchParam) {
    29. console.info('Want:' + JSON.stringify(want));
    30. try {
    31. // 监听call事件所需的方法
    32. this.callee.on(MSG_SEND_METHOD, FunACall);
    33. } catch (error) {
    34. console.log(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`)
    35. }
    36. }
    37. ...
    38. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号