HarmonyOS4.0系统性深入开发11通过message事件刷新卡片内容

业界资讯 2024-01-09 04:14:23 阅读次数: 0

通过message事件刷新卡片内容

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

  • 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用

    postCardAction

    接口触发message事件拉起FormExtensionAbility。

    let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
      
      
  @LocalStorageProp('title') title: string = 'init';
  @LocalStorageProp('detail') detail: string = 'init';

  build() {
      
      
    Column() {
      
      
      Button('刷新')
        .onClick(() => {
      
      
          postCardAction(this, {
      
      
            'action': 'message',
            'params': {
      
      
              'msgTest': 'messageEvent'
            }
          });
        })
      Text(`${
        
        this.title}`)
      Text(`${
        
        this.detail}`)
    }
    .width('100%')
    .height('100%')
  }
}

  • 在FormExtensionAbility的onFormEvent生命周期中调用updateForm接口刷新卡片。

    import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';

export default class EntryFormAbility extends FormExtensionAbility {
      
      
  onFormEvent(formId, message) {
      
      
    // Called when a specified message event defined by the form provider is triggered.
    console.info(`FormAbility onEvent, formId = ${
        
        formId}, message: ${
        
        JSON.stringify(message)}`);
    let formData = {
      
      
      'title': 'Title Update Success.', // 和卡片布局中对应
      'detail': 'Detail Update Success.', // 和卡片布局中对应
    };
    let formInfo = formBindingData.createFormBindingData(formData)
    formProvider.updateForm(formId, formInfo).then((data) => {
      
      
      console.info('FormAbility updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      
      
      console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    })
  }

  ...
}

    运行效果如下图所示。

    点击放大

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

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

通过router事件刷新卡片内容

  • 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用

    postCardAction

    接口触发router事件拉起UIAbility。

    let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
      
      
  @LocalStorageProp('detail') detail: string = 'init';

  build() {
      
      
    Column() {
      
      
      Button('跳转')
        .margin('20%')
        .onClick(() => {
      
      
          console.info('postCardAction to EntryAbility');
          postCardAction(this, {
      
      
            'action': 'router',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
      
      
              'detail': 'RouterFromCard'
            }
          });
        })
      Text(`${
        
        this.detail}`).margin('20%')
    }
    .width('100%')
    .height('100%')
  }
}

  • 在UIAbility的onCreate()或者onNewWant()生命周期中可以通过入参want获取卡片的formID和传递过来的参数信息，然后调用updateForm接口刷新卡片。

    import UIAbility from '@ohos.app.ability.UIAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo';

export default class EntryAbility extends UIAbility {
      
      
  // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
      
      
    console.info('Want:' + JSON.stringify(want));
    if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      
      
      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      let message = JSON.parse(want.parameters.params).detail;
      console.info(`UpdateForm formId: ${
        
        curFormId}, message: ${
        
        message}`);
      let formData = {
      
      
        "detail": message + ': onCreate UIAbility.', // 和卡片布局中对应
      };
      let formMsg = formBindingData.createFormBindingData(formData)
      formProvider.updateForm(curFormId, formMsg).then((data) => {
      
      
        console.info('updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
      
      
        console.error('updateForm failed:' + JSON.stringify(error));
      })
    }
  }
  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want, launchParam) {
      
      
    console.info('onNewWant Want:' + JSON.stringify(want));
    if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      
      
      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      let message = JSON.parse(want.parameters.params).detail;
      console.info(`UpdateForm formId: ${
        
        curFormId}, message: ${
        
        message}`);
      let formData = {
      
      
        "detail": message + ': onNewWant UIAbility.', // 和卡片布局中对应
      };
      let formMsg = formBindingData.createFormBindingData(formData)
      formProvider.updateForm(curFormId, formMsg).then((data) => {
      
      
        console.info('updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
      
      
        console.error('updateForm failed:' + JSON.stringify(error));
      })
    }
  }

  ...
}

通过call事件刷新卡片内容

  • 在使用

    postCardAction

    接口的call事件时，需要在FormExtensionAbility中的onAddForm生命周期回调中更新formId。

    import formBindingData from '@ohos.app.form.formBindingData'; 
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';

export default class EntryFormAbility extends FormExtensionAbility {
      
      
  onAddForm(want) {
      
      
   let formId = want.parameters["ohos.extra.param.key.form_identity"];
   let dataObj1 = {
      
      
     "formId": formId
   };
   let obj1 = formBindingData.createFormBindingData(dataObj1);
   return obj1;
 }
    
 ...
};

  • 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用

    postCardAction

    接口触发call事件拉起UIAbility。

    let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
      
      
  @LocalStorageProp('detail') detail: string = 'init';
  @LocalStorageProp('formId') formId: string = '0';

  build() {
      
      
    Column() {
      
      
      Button('拉至后台')
        .margin('20%')
        .onClick(() => {
      
      
          console.info('postCardAction to EntryAbility');
          postCardAction(this, {
      
      
            'action': 'call',
            'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            'params': {
      
      
              'method': 'funA',
              'formId': this.formId,
              'detail': 'CallFromCard'
            }
          });
        })
      Text(`${
        
        this.detail}`).margin('20%')
    }
    .width('100%')
    .height('100%')
  }
}

  • 在UIAbility的onCreate生命周期中监听call事件所需的方法，然后调用updateForm接口刷新卡片。

    import UIAbility from '@ohos.app.ability.UIAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo';
const MSG_SEND_METHOD: string = 'funA'
 
// 在收到call事件后会触发callee监听的方法
function FunACall(data) {
      
      
  // 获取call事件中传递的所有参数
  let params = JSON.parse(data.readString())
  if (params.formId !== undefined) {
      
      
    let curFormId = params.formId;
    let message = params.detail;
    console.info(`UpdateForm formId: ${
        
        curFormId}, message: ${
        
        message}`);
    let formData = {
      
      
      "detail": message
    };
    let formMsg = formBindingData.createFormBindingData(formData)
    formProvider.updateForm(curFormId, formMsg).then((data) => {
      
      
      console.info('updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      
      
      console.error('updateForm failed:' + JSON.stringify(error));
    })
  }
  return null;
}
export default class EntryAbility extends UIAbility {
      
      
  // 如果UIAbility第一次启动，call事件后会触发onCreate生命周期回调
  onCreate(want, launchParam) {
      
      
    console.info('Want:' + JSON.stringify(want));
    try {
      
      
       // 监听call事件所需的方法
      this.callee.on(MSG_SEND_METHOD, FunACall);
    } catch (error) {
      
      
      console.log(`${
        
        MSG_SEND_METHOD} register failed with error ${
        
        JSON.stringify(error)}`)
    }
  }
  ...
}

猜你喜欢

转载自blog.csdn.net/qq_46189388/article/details/135323808
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022