首页 > 其他分享 >华为鸿蒙嵌入式 UI 扩展组件:跨越界限的舞台

华为鸿蒙嵌入式 UI 扩展组件:跨越界限的舞台

时间:2024-10-21 13:32:18浏览次数:7  
标签:鸿蒙 扩展 嵌入式 UIAbility UI 组件 进程

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。

在华为鸿蒙系统的舞台上,UIAbility 组件是主角,负责与用户进行交互,而嵌入式 UI 扩展组件则是舞台上的配角,负责扩展应用的功能,并实现跨越进程界限的界面嵌入,为用户带来更加丰富和便捷的交互体验。

一、嵌入式 UI 扩展组件:跨越界限的舞台

想象一下,你正在观看一场舞台剧,舞台上的演员正在表演,突然,舞台的另一边出现了一扇门,门打开后,另一个舞台上的演员出现在观众面前,并与观众进行互动。这就是嵌入式 UI 扩展组件所能实现的功能,它可以将另一个 UIAbility 的界面嵌入到当前 UIAbility 的页面中,实现跨越进程界限的界面嵌入,为用户带来更加丰富和便捷的交互体验。
嵌入式 UI 扩展组件的优势

  • 丰富的交互体验:嵌入式 UI 扩展组件可以提供丰富的交互功能,例如拖拽、缩放、旋转等,为用户提供良好的交互体验。
  • 灵活的界面布局:嵌入式 UI 扩展组件可以嵌入到当前 UIAbility 的页面中的任何位置,并可以根据需要进行调整,实现灵活的界面布局。
  • 安全可靠:嵌入式 UI 扩展组件运行在独立的进程中,与其他 UIAbility 的进程隔离,提高了系统的安全性和稳定性。
    嵌入式 UI 扩展组件就像是舞台上的配角,通过提供跨越进程界限的界面嵌入功能,为 UIAbility 组件提供更多的交互方式和功能支持

二、嵌入式 UI 扩展组件的开发步骤:搭建跨越界限的舞台

开发嵌入式 UI 扩展组件需要以下步骤

  1. 创建嵌入式 UI 扩展组件:在 DevEco Studio 工程中创建嵌入式 UI 扩展组件,并定义相应的生命周期回调函数,例如 onCreate、onSessionCreate 等。
  2. 配置嵌入式 UI 扩展组件:在 module.json5 配置文件中配置嵌入式 UI 扩展组件的相关信息,例如图标、描述等。
  3. 开发嵌入式 UI 扩展组件界面:使用 ArkUI 库开发嵌入式 UI 扩展组件的界面,并定义相应的交互功能,例如按钮、文本、图片等。
  4. 实现进程间通信:嵌入式 UI 扩展组件需要与当前 UIAbility 进行通信,可以采用数据共享机制或其他方式实现。
  5. 测试嵌入式 UI 扩展组件:在 DevEco Studio 中测试嵌入式 UI 扩展组件的功能和性能,确保其能够稳定运行。
    以下是一些创建嵌入式 UI 扩展组件的代码示例
import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit';
export default class ExampleEmbeddedAbility extends EmbeddedUIExtensionAbility {
  onCreate() {
    console.log('[ExampleEmbeddedAbility] onCreate');
  }
  onSessionCreate(want: Want, session: UIExtensionContentSession) {
    console.log('[ExampleEmbeddedAbility] onSessionCreate, want: %s', JSON.stringify(want));
    let param: Record<string, UIExtensionContentSession> = {
      'session': session,
    };
    let storage: LocalStorage = new LocalStorage(param);
    session.loadContent('pages/extension', storage);
  }
  onSessionDestroy(session: UIExtensionContentSession) {
    console.log('[ExampleEmbeddedAbility] onSessionDestroy');
  }
  onForeground() {
    console.log('[ExampleEmbeddedAbility] onForeground');
  }
  onBackground() {
    console.log('[ExampleEmbeddedAbility] onBackground');
  }
  onDestroy() {
    console.log('[ExampleEmbeddedAbility] onDestroy');
  }
}

开发者可以根据应用需求开发嵌入式 UI 扩展组件,并实现跨越进程界限的界面嵌入功能

三、嵌入式 UI 扩展组件的使用方法:舞台上的表演

使用嵌入式 UI 扩展组件需要以下步骤

  1. 创建嵌入式 UI 组件实例:在 UIAbility 的页面中创建嵌入式 UI 组件实例,并指定嵌入的 UIAbility 的类型和参数。
  2. 加载嵌入式 UI 组件界面:使用嵌入式 UI 组件实例加载嵌入的 UIAbility 的界面。
  3. 与嵌入式 UI 组件交互:与嵌入的 UIAbility 进行交互,例如传递数据、控制界面等。
  4. 管理嵌入式 UI 组件生命周期:根据需要管理嵌入的 UIAbility 的生命周期,例如启动、停止、销毁等。
    以下是一些使用嵌入式 UI 扩展组件的代码示例
import { Want } from '@kit.AbilityKit';
let want: Want = {
  deviceId: '', // deviceId为空表示本设备
  bundleName: 'com.example.myapplication',
  abilityName: 'ExampleEmbeddedAbility',
  moduleName: 'entry', // moduleName非必选
  parameters: {
    // 自定义信息
  },
};
let embeddedComponent = new EmbeddedComponent(this.want, EmbeddedType.EMBEDDED_UI_EXTENSION);
this.$element.appendChild(embeddedComponent);

可以根据应用需求使用嵌入式 UI 扩展组件,并实现跨越进程界限的界面嵌入功能

四、嵌入式 UI 扩展组件的进程模型:舞台背后的舞台

嵌入式 UI 扩展组件运行在独立的进程中,与其他 UIAbility 的进程隔离,提高了系统的安全性和稳定性。
嵌入式 UI 扩展组件的进程模型

  • 独立的进程:嵌入式 UI 扩展组件运行在独立的进程中,与其他 UIAbility 的进程隔离。
  • 进程间通信:嵌入式 UI 扩展组件可以通过数据共享机制或其他方式与其他组件进行通信。
    自此,咱们可以根据应用需求选择合适的进程模型,实现嵌入式 UI 扩展组件的跨进程界面嵌入功能
    本篇博客介绍了华为鸿蒙嵌入式 UI 扩展组件的概念、功能、开发步骤、使用方法和进程模型。后续文章将深入讲解嵌入式 UI 扩展组件的具体使用方法和开发技巧
    请注意,由于鸿蒙系统版本更新较快,部分功能可能存在变动,请以最新版本官方文档为准

标签:鸿蒙,扩展,嵌入式,UIAbility,UI,组件,进程
From: https://www.cnblogs.com/samex/p/18489314

相关文章

  • 华为鸿蒙 AbilityStage 组件容器:Stage模型的舞台中心
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。华为鸿蒙系统的阶段模型为开发者提供了......
  • Raspberry Pi和Arduino哪个更适合DIY项目
    RaspberryPi和Arduino都是流行的DIY项目工具,但它们各有特点和适用范围。RaspberryPi是一种微型计算机,适合需要计算能力的项目,如媒体中心、游戏机或小型服务器。Arduino是一个微控制器板,适合控制简单的硬件项目,如自动化系统和传感器网络。选择哪个取决于项目需求:需要更多计算能......
  • 推荐一款专为Nginx设计的图形化管理工具: Nginx UI!
    NginxUI是一款专为Nginx设计的图形化管理工具,旨在简化Nginx的配置与管理过程,提高开发者和系统管理员的工作效率。项目地址:https://github.com/0xJacky/nginx-ui一、NginxUI的主要特点简化配置:通过图形化的界面,NginxUI简化了Nginx的配置过程,使得用户无需直接编辑复杂的配置......
  • 嵌入式※~CH395Q-UDP
    我自己的原文哦~ https://blog.51cto.com/whaosoft/11683296网络芯片CH395Q-模块使用Socket0作为UDP组播(多播)通信这里演示一下模块使用Socket0作为UDP组播(多播)通信提醒:无论是SPI,USART,并口,程序操作步骤都是一样的!只是不同的接口发指令发给模块,然后用不同的接收......
  • Comfyui如何快速选出图像的高光和阴影 _ layerstyle节点
    ✨背景comfyui中,除了AI图像生成本身以外,还会有很多图像处理的工作要做,比如说调整色阶、饱和度,或者还原商品细节。在最近探索的一个场景中,需要将图像中的高光部分提取出来做光源模拟,发现layerstyle这个节点组中包含了这个功能,所以简单分享一下。✨layerMask:ShadowHighlight......
  • 内置免费图标!SymbolGlyphs|鸿蒙动效开发笔记 04|Extras
    这篇笔记将介绍HarmonyOSNEXT应用开发里非常好用的官方内置图标库和原生图标组件。妙用这套组合拳可以解决几乎一切UI设计资源上的问题,并且将开发的App与原生鸿蒙风格完美契合!补充资料:官方图标库网站:HarmonyOSSymbol主题图标库(不全)https://developer.huawei.co......
  • ComfyUI 基础教程(六) —— 图像的局部重绘
    前言如果你看过别人的工作流,很有可能会发现每个人用的都不一样,如果不搞清楚其中的根本思想,总会有种不踏实的感觉,好像会用了,又好像不会。本文就来介绍一下ComfyUI中的局部重绘的三种基础方法。局部重绘的三种思想首先介绍一下局部重绘的三种方法:分别是VAE内补编码器、设置......
  • QT 用UI设计界面编写电脑同款计算机标准模式
    成果如下:应学校老师要求,已经实现基础的计算,显示历史记录,语言播放数字的功能。mainwindow.h文件#ifndefMAINWINDOW_H#defineMAINWINDOW_H#include<QVector>#include<QMainWindow>#include<QString>#include<QFile>#include"fileshow.h"#include"ui_f......
  • 前端UI框架
    组件UI类1.Element-Plus2.uView3.Vant4.TDesign5.uni-app6.Tuniao-vue37.可视化图标类1.可视化图标VUEDataUI2.Echart图标库ICON1.yesicon2.Flaticon3.GoogleFonts4.fontawesome5.阿里巴巴其他1.CSS布局2.web前端样式布局3.中国色-颜色合集托管平台......
  • 鸿蒙开发 四十九 数组
    1、数组的创建方式数组:接口范型的形式提供,接口的源码是:interfaceArray<T>,实际开发中数组用得非常多,创建数组的方式有:1、语法格式:let数组名:Array<数组类型>=[],实例:letarr1:Array<IObject>=[],这里申明IObject的数组,2,new关键字创建数组,语法格式:let数组名字:Arra......