HarmonyOS应用开发学习笔记 UIAbility组件与UI的数据同步 EventHub、globalThis

1、 HarmoryOS Ability页面的生命周期

2、@Component自定义组件

3、HarmonyOS 应用开发学习笔记 ets组件生命周期

4、HarmonyOS 应用开发学习笔记 ets组件样式定义 @Styles装饰器:定义组件重用样式 @Extend装饰器:定义扩展组件样式

5、HarmonyOS 应用开发学习笔记 state状态管理概述

6、HarmonyOS应用开发学习笔记 包名、icon图标,应用名修改 UIAbility组件介绍、UIAbility启动模式、UIAbility组件基本用法

基于HarmonyOS的应用模型,可以通过以下两种方式来实现UIAbility组件与UI之间的数据同步。

项目 描述
EventHub 基于发布订阅模式来实现,事件需要先订阅后发布,订阅者收到消息后进行处理。
globalThis ArkTS引擎实例内部的一个全局对象,在ArkTS引擎实例内部都能访问。

一、使用EventHub进行数据通信

EventHub和android EventBus很类似,三部曲:

1、EventHub 声明订阅

EventHub.on()
参数名 类型 必填 说明
event string 事件名称。
callback Function 事件回调,事件触发后运行。
        this.context.eventHub.on('123', this.func1);
        this.context.eventHub.on('123', () => {
            console.log('call anonymous func 1');
        });

2、EventHub 发送消息,订阅回调

EventHub.emit()
参数名 类型 必填 说明
event string 事件名称。
...args Object[] 可变参数,事件触发时,传递给回调函数的参数。
  this.context.eventHub.emit('123');
  this.context.eventHub.emit('123', 1);
  this.context.eventHub.emit('123', 1, 2);  

3、EventHub 取消订阅

EventHub.off()
参数名 类型 必填 说明
event string 事件名称。
callback Function 事件回调。如果不传callback,则取消订阅该事件下所有callback。
        this.context.eventHub.on('123', this.func2);//取消指定方法的订阅
        this.context.eventHub.off('123');  //取消订阅"123"

4、示例

  • 订阅

    import UIAbility from '@ohos.app.ability.UIAbility';

    const TAG: string = '[Example].[Entry].[EntryAbility]';

    export default class EntryAbility extends UIAbility {
    func1(...data) {
    // 触发事件,完成相应的业务操作
    console.info(TAG, '1. ' + JSON.stringify(data));
    }

      onCreate(want, launch) {
          // 获取eventHub
          let eventhub = this.context.eventHub;
          // 执行订阅操作
          eventhub.on('event1', this.func1);
          eventhub.on('event1', (...data) => {
              // 触发事件,完成相应的业务操作
              console.info(TAG, '2. ' + JSON.stringify(data));
          });
      }
    

    }

  • 发送消息

    import common from '@ohos.app.ability.common';

    @Entry
    @Component
    struct Index {
    private context = getContext(this) as common.UIAbilityContext;

    eventHubFunc() {
      // 不带参数触发自定义"event1"事件
      this.context.eventHub.emit('event1');
      // 带1个参数触发自定义"event1"事件
      this.context.eventHub.emit('event1', 1);
      // 带2个参数触发自定义"event1"事件
      this.context.eventHub.emit('event1', 2, 'test');
      // 开发者可以根据实际的业务场景设计事件传递的参数
    }
    
    // 页面展示
    build() {
      // ...
    }
    

    }

  • 取消订阅

    // context为UIAbility实例的AbilityContext
    this.context.eventHub.off('event1');

二、使用globalThis进行数据同步

globalThis是ArkTS引擎实例内部的一个全局对象,引擎内部的UIAbility/ExtensionAbility/Page都可以使用,因此可以使用globalThis全局对象进行数据同步。

使用globalThis进行数据同步

1、使用

//数据存入globalThis中
 globalThis.xxx= aa;
//需要使用的地方调用
let a=globalThis.xxx

AbilityA中保存数据一个字符串数据并挂载到globalThis上。

import UIAbility from '@ohos.app.ability.UIAbility'

export default class AbilityA extends UIAbility {
    onCreate(want, launch) {
        globalThis.entryAbilityStr = 'AbilityA'; // AbilityA存放字符串"AbilityA"到globalThis
        // ...
    }
}

AbilityB中获取对应的数据

import UIAbility from '@ohos.app.ability.UIAbility'

export default class AbilityB extends UIAbility {
    onCreate(want, launch) {
        // AbilityB从globalThis读取name并输出
        console.info('name from entryAbilityStr: ' + globalThis.entryAbilityStr);
        // ...
    }
}

组件之间也是如此

2、globalThis使用的注意事项

1) 存放名称不要相同

  • Stage模型下进程内的UIAbility组件共享ArkTS引擎实例,使用globalThis时需要避免存放相同名称的对象。例如AbilityA和AbilityB可以使用globalThis共享数据,在存放相同名称的对象时,先存放的对象会被后存放的对象覆盖。

2)用完将其赋值为null,以减少对应用内存的占用。

  • 对于绑定在globalThis上的对象,其生命周期与ArkTS虚拟机实例相同,建议在使用完成之后将其赋值为null,以减少对应用内存的占用。
相关推荐
Bearnaise7 分钟前
PointMamba: A Simple State Space Model for Point Cloud Analysis——点云论文阅读(10)
论文阅读·笔记·python·深度学习·机器学习·计算机视觉·3d
互联网时光机38 分钟前
HarmonyOS第一课 07 从网络获取数据-习题
华为·harmonyos
怀旧6661 小时前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
infiniteWei2 小时前
【Lucene】原理学习路线
学习·搜索引擎·全文检索·lucene
follycat2 小时前
[极客大挑战 2019]PHP 1
开发语言·学习·网络安全·php
似水流年QC2 小时前
初探鸿蒙:从概念到实践
华为·harmonyos
HMS Core3 小时前
融合虚拟与现实,AR Engine为用户提供沉浸式交互体验
华为·ar·harmonyos
weixin_518285053 小时前
深度学习笔记11-神经网络
笔记·深度学习·神经网络
并不会6 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
龙鸣丿6 小时前
Linux基础学习笔记
linux·笔记·学习