Harmony-UIAbility组件与UI的数据同步

news2025/1/11 14:11:53

UIAbility组件与UI的数据同步

基于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进行数据同步

img

如上图所示,下面来具体介绍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;
            // ...
        }
    
        // ...
    }
    
  2. 在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注意事项

img

  • 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内部使用的状态数据。通过这两种方案,开发者可以更加灵活地控制应用状态,提高应用的可维护性和可扩展性。详细请参见应用级变量的状态管理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1459862.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ONLYOFFICE 8.0:引领数字化办公新纪元

目录 前言 软件安装 软件启动 软件新版本特性 个人评价 总结 前言 在当今快节奏的数字化世界中,高效的办公软件已成为企业竞争力的关键因素。ONLYOFFICE,作为全球领先的办公解决方案提供商,始终致力于通过技术创新来优化用户体验。如今…

CVE-2016-3088(ActiveMQ任意文件写入漏洞)

漏洞描述 1、漏洞编号:CVE-2016-3088 2、影响版本:Apache ActiveMQ 5.x~5.13.0 在 Apache ActiveMQ 5.12.x~5.13.x 版本中,默认关闭了 fileserver 这个应用(不过,可以在conf/jetty.xml 中开启);…

【最优化】一维搜索

首先我们需要先明确一下我们的任务是什么? 我们的任务是给定一个未知函数,如何找到它的最小值。 三点二次插值法 给定三个点,拟合一条二次曲线,每次迭代更新,当时停止迭代。 GitHub - ldx-star/Numerical-Optimizati…

在前后端分离项目中如何设置统一返回格式

目录 一、步骤一 二、步骤二 在前后端分离的项目中,为了方便前后端交互,后端往往需要给前端返回固定的数据格式,但不同的实体类返回格式不同,所以在真实开发中,我们将所有API接口设置返回统一的格式。基本上包括的有…

Vue路由组件练习

Vue 路由组件练习 1. 演示效果 2. 代码分析 2.1. 安装 vue-router 命令:npm i vue-router 应用插件:Vue.use(VueRouter) 2.2. 创建路由文件 在 src 文件夹下,创建router文件夹,并在该文件夹创建index.js文件 2.3. 导入依赖…

qt - 19种精美软件样式

qt - 19种精美软件样式 一、效果演示二、核心程序三、下载链接 一、效果演示 二、核心程序 #include "mainwindow.h"#include <QtAdvancedStylesheet.h> #include <QmlStyleUrlInterceptor.h>#include "ui_mainwindow.h" #include <QDir&g…

软考32-上午题-【知识产权】-计算机软件著作权

一、计算机软件著作权的主体和客体 1-1、计算机软件著作权的主体 享有著作权的人。 依据的是&#xff1a;《中华人民共和国著作权法》、《计算机软件保护条例》 1-2、计算机软件著作权的客体 受保护的对象&#xff1a;计算机程序、及其相关文档 1、计算机程序 包括&#x…

使用 npm/yarn 等命令的时候会,为什么会发生 Error: certificate has expired

缘起 昨天&#xff0c;我写了一篇文章&#xff0c;介绍如何使用项目模板&#xff0c;构建一个 Electron 项目的脚手架&#xff0c;我发现我自己在本地无法运行成功&#xff0c;出现了错误。 ✖ Failed to install modules: ["electron-forge/plugin-vite^7.2.0",&qu…

解决pycharm中PIL安装失败

问题&#xff1a;在调用pil时显示pil标红 我在设置中下载每次失败&#xff0c;显示 ERROR: Could not find a version that satisfies the requirement PIL (from versions: none) ERROR: No matching distribution found for PIL我尝试了很久&#xff0c;查看了一些博客 &a…

2024关于支付行业的探讨

目前&#xff0c;全球的支付科技正迅猛地发展和创新。各种新兴技术不断推动支付方式的改变&#xff0c;包括移动支付、跨境支付、生物识别和嵌入式支付。基于这一背景&#xff0c;IDC提供了支付科技的十大预测&#xff0c;旨在为技术领导者和相关业务人员在制定战略规划时提供参…

Linux命令-cal命令(显示当前日历或指定日期的日历)

说明 cal命令 用于显示当前日历&#xff0c;或者指定日期的日历&#xff0c;如果没有指定参数&#xff0c;则显示当前月份。 一个单一的参数指定要显示的年份 (1 - 9999) ; 注意年份必须被完全地指定: cal 89 不会 显示1989年的日历. 两个参数表示月份 (1 - 12) 和年份. 如果没…

HarmonyOS 鸿蒙应用开发(十二、paho-mqtt的mqtt客户端库移植)

PAHO MQTT 是 Eclipse Foundation 的一个开源项目&#xff0c;提供了用于 MQTT 协议的客户端库。这个库为使用 MQTT 协议的应用程序提供了丰富的功能和灵活性。轻量级mqtt服务器mosquitto也是其中有名的一个开源项目。 目录 PAHO MQTT介绍 移植过程 index.d.ts文件修改 写…

Web3区块链游戏:创造虚拟世界的全新体验

随着区块链技术的不断发展&#xff0c;Web3区块链游戏正逐渐崭露头角&#xff0c;为玩家带来了全新的虚拟世界体验。传统游戏中的中心化结构和封闭经济体系已经被打破&#xff0c;取而代之的是去中心化的游戏环境和真实所有权的数字资产。本文将深入探讨Web3区块链游戏的特点、…

并发编程-线程协作工具类

工具类概览 下面我们一个个直接通过案例代码来看我们这些工具类可以用来做什么事情 CountDownLatch final CountDownLatch countDownLatch new CountDownLatch(10);final CountDownLatch countDownLatchNoStop new CountDownLatch(10);long startTime System.currentTimeMi…

jenkins的nmp install命令无法下载包

问题&#xff1a;在jenkin的流水线脚本中执行到&#xff1a;npm install命令后无法下载前端依赖包 1、进到jenkins的工作目录&#xff0c;一般在底层为/var/lib/jenkins/workspace/任务名称 cd /var/lib/jenkins/workspace/xkc处理方式&#xff1a; # 查看镜像源 npm config …

《Solidity 简易速速上手小册》第1章:Solidity 和智能合约简介(2024 最新版)

文章目录 1.1 Solidity 的起源和重要性1.1.1 基础知识解析1.1.2 重点案例&#xff1a;去中心化金融 (DeFi) 平台案例 Demo&#xff1a;简易借贷平台 1.1.3 拓展案例 1&#xff1a;NFT 市场案例 Demo&#xff1a;简易 NFT 市场 1.1.4 拓展案例 2&#xff1a;智能合约管理的投票系…

C语言:数组指针 函数指针

C语言&#xff1a;数组指针 & 函数指针 数组指针数组名 数组访问二维数组 函数指针函数指针使用回调函数 typedef关键字 数组指针 数组本质上也是一个变量&#xff0c;那么数组也有自己的地址&#xff0c;指向整个数组的指针&#xff0c;就叫做数组指针。 我先为大家展示…

stm32——hal库学习笔记(GPIO)

一、GPIO的八种模式分析&#xff08;熟悉&#xff09; GPIO_Mode_IN_FLOATING 浮空输入 GPIO_Mode_IPU 上拉输入 GPIO_Mode_IPD 下拉输入 GPIO_Mode_AIN 模拟输入 GPIO_Mode_Out_OD 开漏输出 GPIO_Mode_Out_PP 推挽输出 GPIO_Mode_AF_OD 复用开漏输出 GPIO_Mode_AF_PP 复用推挽…

springboot+vue的宠物咖啡馆平台(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【Linux】自主WEB服务器实现

自主web服务器实现 1️⃣构建TcpServer2️⃣构建HttpServer3️⃣构建HttpRequest和HttpResponseHttp请求报文格式Http相应报文读取、处理请求&构建响应读取请求中的一行读取请求中需要注意的点 4️⃣CGI模式判断是否需要用CGI处理请求构建任务&线程池管理 5️⃣实验结果…