通過router或call事件刷新卡片內(nèi)容

2024-01-25 12:21 更新

在卡片頁面中可以通過postCardAction接口觸發(fā)router或call事件拉起UIAbility,然后由UIAbility刷新卡片內(nèi)容,下面是這種刷新方式的簡單示例。

通過router事件刷新卡片內(nèi)容

  • 在卡片頁面通過注冊Button的onClick點擊事件回調(diào),并在回調(diào)中調(diào)用postCardAction接口觸發(fā)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('跳轉(zhuǎn)')
    9. .margin('20%')
    10. .onClick(() => {
    11. console.info('postCardAction to EntryAbility');
    12. postCardAction(this, {
    13. 'action': 'router',
    14. 'abilityName': 'EntryAbility', // 只能跳轉(zhuǎn)到當前應用下的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()生命周期中可以通過入?yún)ant獲取卡片的formID和傳遞過來的參數(shù)信息,然后調(diào)用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事件后會觸發(fā)onCreate生命周期回調(diào)
    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事件后會觸發(fā)onNewWant生命周期回調(diào)
    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事件刷新卡片內(nèi)容

  • 在使用postCardAction接口的call事件時,需要在FormExtensionAbility中的onAddForm生命周期回調(diào)中更新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點擊事件回調(diào),并在回調(diào)中調(diào)用postCardAction接口觸發(fā)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', // 只能跳轉(zhuǎn)到當前應用下的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生命周期中監(jiān)聽call事件所需的方法,然后調(diào)用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事件后會觸發(fā)callee監(jiān)聽的方法
    7. function FunACall(data) {
    8. // 獲取call事件中傳遞的所有參數(shù)
    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事件后會觸發(fā)onCreate生命周期回調(diào)
    28. onCreate(want, launchParam) {
    29. console.info('Want:' + JSON.stringify(want));
    30. try {
    31. // 監(jiān)聽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. }
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號