乐趣区

关于前端:OpenHarmonyUIAbility组件与UI的数据同步

jiezi

基于 HarmonyOS 的利用模型，能够通过以下两种形式来实现 UIAbility 组件与 UI 之间的数据同步。

  • 应用 EventHub 进行数据通信：基于公布订阅模式来实现，事件须要先订阅后公布，订阅者收到音讯后进行解决。
  • 应用 globalThis 进行数据同步：ArkTS 引擎实例外部的一个全局对象，在 ArkTS 引擎实例外部都能拜访。
  • 应用 AppStorage/LocalStorage 进行数据同步：ArkUI 提供了 AppStorage 和 LocalStorage 两种利用级别的状态治理计划，可用于实现利用级别和 UIAbility 级别的数据同步。

应用 EventHub 进行数据通信

EventHub 提供了 UIAbility 组件 /ExtensionAbility 组件级别的事件机制，以 UIAbility 组件 /ExtensionAbility 组件为核心提供了订阅、勾销订阅和触发事件的数据通信能力。接口阐明请参见 EventHub。

在应用 EventHub 之前，首先须要获取 EventHub 对象。基类 Context 提供了 EventHub 对象，本章节以应用 EventHub 实现 UIAbility 与 UI 之间的数据通信为例进行阐明。

1. 在 UIAbility 中调用 eventHub.on()办法注册一个自定义事件“event1”，eventHub.on()有如下两种调用形式，应用其中一种即可。

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));
        });
    }
}

2. 在 UI 界面中通过 eventHub.emit()办法触发该事件，在触发事件的同时，依据须要传入参数信息。

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() {// ...}
}

3. 在 UIAbility 的注册事件回调中能够失去对应的触发事件后果，运行日志后果如下所示。

[]
[1]
[2,'test']

4. 在自定义事件“event1”应用实现后，能够依据须要调用 eventHub.off()办法勾销该事件的订阅。

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

应用 globalThis 进行数据同步

globalThis 是 ArkTS 引擎实例外部的一个全局对象，引擎外部的 UIAbility/ExtensionAbility/Page 都能够应用，因而能够应用 globalThis 全局对象进行数据同步。

图 1 应用 globalThis 进行数据同步

如上图所示，上面来具体介绍 globalThis 的应用：

  • UIAbility 和 Page 之间应用 globalThis
  • UIAbility 和 UIAbility 之间应用 globalThis
  • globalThis 应用的注意事项

UIAbility 和 Page 之间应用 globalThis

globalThis 为 ArkTS 引擎实例下的全局对象，能够通过 globalThis 绑定属性 / 办法来进行 UIAbility 组件与 UI 的数据同步。例如在 UIAbility 组件中绑定 want 参数，即可在 UIAbility 对应的 UI 界面上应用 want 参数信息。

1. 调用 startAbility()办法启动一个 UIAbility 实例时，被启动的 UIAbility 创立实现后会进入 onCreate()生命周期回调，且在 onCreate()生命周期回调中可能承受到传递过去的 want 参数，能够将 want 参数绑定到 globalThis 上。

import UIAbility from '@ohos.app.ability.UIAbility'
export default class EntryAbility extends UIAbility {onCreate(want, launch) {
        globalThis.entryAbilityWant = want;
        // ...
    }
    // ...
}

在 UI 界面中即可通过 globalThis 获取到 want 参数信息。

let entryAbilityWant;
@Entry
@Component
struct Index {aboutToAppear() {entryAbilityWant = globalThis.entryAbilityWant;}
  // 页面展现
  build() {// ...}
}

UIAbility 和 UIAbility 之间应用 globalThis

同一个利用中 UIAbility 和 UIAbility 之间的数据传递，能够通过将数据绑定到全局变量 globalThis 上进行同步，如在 AbilityA 中将数据保留在 globalThis，而后跳转到 AbilityB 中获得该数据：

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

import UIAbility from '@ohos.app.ability.UIAbility'
export default class AbilityA extends UIAbility {onCreate(want, launch) {
        globalThis.entryAbilityStr = 'AbilityA'; // AbilityA 寄存字符串“AbilityA”到 globalThis
        // ...
    }
}

2.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);
        // ...
    }
}

globalThis 应用的注意事项

图 2 globalThis 注意事项

  • Stage 模型下过程内的 UIAbility 组件共享 ArkTS 引擎实例，应用 globalThis 时须要防止寄存雷同名称的对象。例如 AbilityA 和 AbilityB 能够应用 globalThis 共享数据，在寄存雷同名称的对象时，先寄存的对象会被后寄存的对象笼罩。
  • FA 模型因为每个 UIAbility 组件之间引擎隔离，不会存在该问题。
  • 对于绑定在 globalThis 上的对象，其生命周期与 ArkTS 虚拟机实例雷同，倡议在应用实现之后将其赋值为 null，以缩小对利用内存的占用。

Stage 模型上同名对象笼罩导致问题的场景举例说明。

1. 在 AbilityA 文件中应用 globalThis 寄存了 UIAbilityContext。

import UIAbility from '@ohos.app.ability.UIAbility'
export default class AbilityA extends UIAbility {onCreate(want, launch) {
        globalThis.context = this.context; // AbilityA 寄存 context 到 globalThis
        // ...
    }
}

2. 在 AbilityA 的页面中获取该 UIAbilityContext 并进行应用。应用实现后将 AbilityA 实例切换至后盾。

@Entry
@Component
struct Index {onPageShow() {
    let ctx = globalThis.context; // 页面中从 globalThis 中取出 context 并应用
    let permissions = ['com.example.permission']
    ctx.requestPermissionsFromUser(permissions,(result) => {// ...});
  }
  // 页面展现
  build() {// ...}
}

3. 在 AbilityB 文件中应用 globalThis 寄存了 UIAbilityContext，并且命名为雷同的名称。

import UIAbility from '@ohos.app.ability.UIAbility'
export default class AbilityB extends UIAbility {onCreate(want, launch) {
        // AbilityB 笼罩了 AbilityA 在 globalThis 中寄存的 context
        globalThis.context = this.context;
        // ...
    }
}

4. 在 AbilityB 的页面中获取该 UIAbilityContext 并进行应用。此时获取到的 globalThis.context 曾经示意为 AbilityB 中赋值的 UIAbilityContext 内容。

@Entry
@Component
struct Index {onPageShow() {
    let ctx = globalThis.context; // Page 中从 globalThis 中取出 context 并应用
    let permissions = ['com.example.permission']
    ctx.requestPermissionsFromUser(permissions,(result) => {console.info('requestPermissionsFromUser result:' + JSON.stringify(result));
    });
  }
  // 页面展现
  build() {// ...}
}

5. 在 AbilityB 实例切换至后盾，将 AbilityA 实例从后盾切换回到前台。此时 AbilityA 的 onCreate 生命周期不会再次进入。

import UIAbility from '@ohos.app.ability.UIAbility'
export default class AbilityA extends UIAbility {onCreate(want, launch) { // AbilityA 从后盾进入前台，不会再走这个生命周期
        globalThis.context = this.context;
        // ...
    }
}

6. 在 AbilityA 的页面再次回到前台时，其获取到的 globalThis.context 示意的为 AbilityB 的 UIAbilityContext，而不是 AbilityA 的 UIAbilityContext，在 AbilityA 的页面中应用则会出错。

@Entry
@Component
struct Index {onPageShow() {
    let ctx = globalThis.context; // 这时候 globalThis 中的 context 是 AbilityB 的 context
    let permissions=['com.example.permission'];
    ctx.requestPermissionsFromUser(permissions,(result) => { // 应用这个对象就会导致过程解体
       console.info('requestPermissionsFromUser result:' + JSON.stringify(result));
    });
  }
  // 页面展现
  build() {// ...}
}

应用 AppStorage/LocalStorage 进行数据同步

ArkUI 提供了 AppStorage 和 LocalStorage 两种利用级别的状态治理计划，可用于实现利用级别和 UIAbility 级别的数据同步。应用这些计划能够不便地治理利用状态，进步利用性能和用户体验。其中，AppStorage 是一个全局的状态管理器，实用于多个 UIAbility 共享同一状态数据的状况；而 LocalStorage 则是一个部分的状态管理器，实用于单个 UIAbility 外部应用的状态数据。通过这两种计划，开发者能够更加灵便地管制利用状态，进步利用的可维护性和可扩展性。具体请参见利用级变量的状态治理。

作为一名合格一线开发程序员，大家心里必定会有很多疑难！鸿蒙零碎这么弱小~~

为了可能让大家跟上互联网时代的技术迭代，在这里跟大家分享一下我本人近期学习心得以及参考网上材料整顿出的一份最新版的鸿蒙学习晋升材料 ，有须要的小伙伴自行支付， 限时开源，先到先得~~~~

支付以下高清学习路线原图请点击→《鸿蒙开发学习之利用模型》纯血鸿蒙 HarmonyOS 根底技能学习路线图

支付以上残缺高清学习路线图，请点击→《鸿蒙开发学习之 UI》小编本人整顿的局部学习材料（蕴含有高清视频、开发文档、电子书籍等）

以上分享的学习路线都适宜哪些人跟着学习？
- 应届生 / 计算机专业
通过学习鸿蒙新兴技术，入行互联网，将来高起点待业。
- 0 根底转行提前布局新方向，抓住风口，自我晋升，取得更多就业机会。
- 技术晋升 / 进阶跳槽倒退瓶颈期，晋升职场竞争力，疾速把握鸿蒙技术，享受蓝海红利。

写在最初

如果你感觉这篇内容对你还蛮有帮忙，我想邀请你帮我三个小忙：点赞，转发，有你们的『点赞和评论』，才是我发明的能源。关注小编，同时能够期待后续文章 ing，不定期分享原创常识。想要获取更多残缺鸿蒙最新 VIP 学习材料，请点击→《鸿蒙全套学习指南》

退出移动版