electron+vue3全家桶+vite项目搭建【28】封装窗口工具类【2】窗口组,维护窗口关系

文章目录

    • 引入
    • 实现效果
    • 思路
    • 主进程模块
    • 渲染进程模块
    • 测试效果

引入

demo项目地址

窗口工具类系列文章:
封装窗口工具类【1】雏形

我们思考一下窗口间的关系,窗口创建和销毁的一些动作,例如父子窗口,窗口组合等等,还有一些窗口只能有一个,而某些窗口可以有很多个,按我们当前的窗口创建逻辑,是无法维护一个很复杂的窗口系统的,这就需要我们引入一个窗口组,里面维护各个窗口之间的关系和状态。

实现效果

  • 没有传入key时,默认用窗口id作为窗口组中元素的key
  • 窗口销毁时,元素正常从窗口组中移除
  • 传入相同的key时,旧窗口被聚焦
    electron窗口工具类【2】窗口组,维护窗口关系

思路

从如下场景出发:

  • 我们希望一个唯一窗口被创建后,当再次执行窗口创建时,只是聚焦旧窗口,而不是重新创建窗口。
  • 如何快速的获取某个已建窗口的 windowId或webContentsId,直接用于窗口间的通信

解决方案:

  • 维护一个窗口组,即一个map集合,key作为窗口的唯一标识,每次创建时必须传入key,新建窗口通过判断key是否已存在来聚焦旧窗口
  • map集合的值存储一个对象,对象内存储窗口的windowId和webContentsId,我们在创建窗口时就已知key,便可以很方便的用其获取webContentsId用于在渲染进程直接与另一个窗口的渲染进程进行通信。

主进程模块

1.补充窗口组元素的声明:

  • electron\electron-env.d.ts
...
/** 一些仅在electron中使用的声明 */
declare global {// 窗口组interface WindowGroup {webContentsId: number; // 窗口的渲染层idwindowId: number; // 窗口id}
}

2.在窗口工具类中补充窗口组属性,并在构造方法中初始化

export class WindowUtils {group: Map<string, WindowGroup>; // 窗口组 key就是传入的key值,如果没传,则取窗口的id作为key值/*** 构造方法,初始化属性*/constructor() {this.group = new Map();}
}

3.在窗口新建的方法中补充逻辑:

  • 创建窗口前补充通过key判断已有窗口则聚焦旧窗口逻辑
  • 窗口创建后,补充逻辑将窗口信息和key添加到窗口组中
  • 并在最后补充窗口的通用事件绑定方法,里面补充窗口关闭时清理掉在窗口组中对应的元素
/*** 创建窗口* @param windowConfig 窗口创建参数*/createWindows(windowConfig: IWindowConfig): BrowserWindow {// 先通过key判断是否已窗口,有则聚焦let windowKey = windowConfig.key;if (windowKey && windowKey.length > 0) {/// 先从窗口组中取出记录const wg: WindowGroup = this.group.get(windowKey);if (wg) {/// 根据记录中的窗口id获取窗口,假如存在该窗口,则聚焦该窗口const oldWin = BrowserWindow.fromId(wg.windowId);if (oldWin) {oldWin.focus();return oldWin;}}}// 创建窗口对象...// 将窗口的关键信息与key关联,存入窗口组中windowKey = windowKey || win.id.toString();this.group.set(windowKey, {windowId: win.id,webContentsId: win.webContents.id,});// 根据当前环境加载页面,并传递参数...// 绑定通用窗口事件this.bindWindowEvent(win, windowConfig);console.log(this.group);return win;}/*** 绑定窗口事件* @param win 窗口对象* @param windowConfig 窗口创建参数*/bindWindowEvent(win: BrowserWindow, windowConfig: IWindowConfig) {// 窗口关闭监听,此事件触发时,窗口即将关闭,可以拒绝关闭,此时窗口对象还未销毁win.on("close", () => {/// 设置窗口透明win.setOpacity(0);/// 在窗口组中删除const key = windowConfig.key || win.id.toString();this.group.delete(key);});// 此事件触发时,窗口已关闭,窗口对象已销毁win.on("closed", () => {// 在窗口对象被关闭时,取消订阅所有与该窗口相关的事件win.removeAllListeners();// 引用置空win = null;});}

3.应用启动后的第一个窗口我们把它当做主窗口,也补充个唯一key =>main,方便区分其他窗口

  • electron\main\index.ts
  win = windowUtils.createWindows({route:"/",key:'main'});

渲染进程模块

我们渲染进程创建窗口时传入key

  • src\components\demo\Index.vue
<template>    <input v-model="windowKey" placeholder="输入新建窗口的key"/>
</template>
<script setup lang="ts">... const windowKey = ref("");...electronUtils.createWindow({route: windowPath.value,key:windowKey.value,param: JSON.stringify({message: "向你问个好~~",}),});
</script>

测试效果

  • 没有传入key时,默认用窗口id作为窗口组中元素的key
  • 窗口销毁时,元素正常从窗口组中移除
  • 传入相同的key时,旧窗口被聚焦
    electron窗口工具类【2】窗口组,维护窗口关系

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无字母数字rce总结(自增、取反、异或、或、临时文件上传)

目录 自增 取反 异或 或 临时文件上传 自增 自 PHP 8.3.0 起&#xff0c;此功能已软弃用 在 PHP 中&#xff0c;可以递增非数字字符串。该字符串必须是字母数字 ASCII 字符串。当到达字母 Z 且递增到下个字母时&#xff0c;将进位到左侧值。例如&#xff0c;$a Z; $a;将…

Day07:基础入门-抓包技术全局协议封包监听网卡模式APP小程序PC应用

目录 非HTTP/HTTPS协议抓包工具 WireShark 科来网络分析系统 WPE封包 思维导图 章节知识点&#xff1a; 应用架构&#xff1a;Web/APP/云应用/三方服务/负载均衡等 安全产品&#xff1a;CDN/WAF/IDS/IPS/蜜罐/防火墙/杀毒等 渗透命令&#xff1a;文件上传下载/端口服务/Sh…

强大而灵活的python装饰器

装饰器&#xff08;Decorators&#xff09; 一、概述 在Python中&#xff0c;装饰器是一种特殊类型的函数&#xff0c;它允许我们修改或增强其他函数的功能&#xff0c;而无需修改其源代码。装饰器在函数定义之后立即调用&#xff0c;并以函数对象作为参数。装饰器返回一个新…

【前端素材】推荐优质在线高端家具电商网页Classi平台模板(附源码)

一、需求分析 1、系统定义 在线高端家具商城是一个专门销售高端家具产品的电子商务平台&#xff0c;旨在为消费者提供购买高品质家具的便捷渠道。 2、功能需求 在线高端家具商城是一个专门销售高端家具产品的电子商务平台&#xff0c;旨在为消费者提供购买高品质家具的便捷…

p18 线性代数,行阶梯型矩阵

行阶梯型矩阵 行最简型矩阵

Golang Redis:构建高效和可扩展的应用程序

利用Redis的闪电般的数据存储和Golang的无缝集成解锁协同效应 在当前的应用程序开发中&#xff0c;高效的数据存储和检索的必要性已经变得至关重要。Redis&#xff0c;作为一个闪电般快速的开源内存数据结构存储方案&#xff0c;为各种应用场景提供了可靠的解决方案。在这份完…

安防视频监控EasyCVR平台使用GB28181协议接入时,如何正确配置端口?

国标GB28181协议EasyCVR安防视频监控平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流…

Docker 第十九章 : 阿里云个人镜像仓使用

Docker 第十九章 : 阿里云个人镜像仓使用 本章知识点: 如何创建镜像库,如何设置密码,如何登录与退出个人镜像仓,如何本地打镜像,如何将本地镜像推送到个人镜像库。 背景 在项目YapiDocker部署中,因读取mongo:latest 版本不一致,导致后续执行步骤的异常。遇到此场景…

深度学习 精选笔记(8)梯度消失和梯度爆炸

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

TP6上传图片到OSS(记录贴)

1&#xff0c;先安装&#xff0c;我使用composer安装 在项目的根目录运行composer require aliyuncs/oss-sdk-php 2,安装成功以后vendor目录下可以看到如图&#xff1a; 3&#xff0c;上传图片代码如下&#xff1a; <?php namespace app\controller;use app\BaseControll…

文件拖放到窗体事件

网上的实现1 实现结果 具体实现代码&#xff1a;注意需要使能允许拖拽 public partial class Form1 : Form {public Form1(){InitializeComponent();this.AllowDrop true; //允许拖拽}private void Form1_DragEnter(object sender, DragEventArgs e){this.Text DateTime.No…

Vue中<style scoped lang=“scss“>的含义

这段代码中的<style scoped lang"scss">是HTML和Vue框架结合使用时常见的一个模式&#xff0c;具体含义如下&#xff1a; scoped&#xff1a;这是一个Vue.js特有的属性&#xff0c;用来指定样式只应用于当前组件的元素。没有这个属性时&#xff0c;样式会全局应…

[unity] c# 扩展知识点其一 【个人复习笔记/有不足之处欢迎斧正/侵删】

.NET 微软的.Net既不是编程语言也不是框架,是类似于互联网时代、次时代、21世纪、信息时代之类的宣传口号,是一整套技术体系的统称&#xff0c;或者说是微软提供的技术平台的代号. 1.跨语言 只要是面向.NET平台的编程语言(C#、VB、 C、 F#等等)&#xff0c;用其中一种语言编写…

电脑休眠之后唤不醒

现象&#xff1a;午休时间电脑休眠了&#xff0c;醒来之后发现在密码输入界面&#xff0c;但鼠标键盘没反应。按重启键或电源机重新开机&#xff0c;结果开不了机。 原因&#xff1a;1、内存条脏了&#xff0c;导致内存条读取失败 2、休眠的时候硬盘休眠了&#xff0c;导致按…

基于java+springboot动物检疫信息管理系统设计和实现

基于java SSM springboot动物检疫信息管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文…

fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现

项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff1b; &#x1f451;&#x1f40b;&#x1f389;如果感觉项目还不错的话&#xff0c;还请点下 star &#x1f31f;&#x1f31f;&#x1f31f;。 Gitee&#xff1a;https://gitee.com/fei_fei27/fly-barrage&a…

【QT+QGIS跨平台编译】之五十一:【QGIS_CORE跨平台编译】—【qgsexpressionparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…

【MySQL | 第一篇】undo log、redo log、bin log三者之间的区分?

undo log、redo log、bin log三者之间的区分&#xff1f; 从 产生的时间点、日志内容、用途 三方面展开论述即可 1.undo log——撤销日志 时间点&#xff1a;事务开始之前产生&#xff0c;根据当前版本的数据生成一个undo log&#xff0c;也保存在事务开始之前 作用&#xf…

动态规划课堂3-----简单多状态问题(买卖股票最佳时机)

目录 引入&#xff1a; 例题1&#xff1a;按摩师&#xff08;打家劫舍I&#xff09; 例题2&#xff1a;打家劫舍II 例题3&#xff1a;删除并获得点数 例题4&#xff1a;粉刷房子 例题5&#xff1a;买卖股票的最佳时机含冷冻 结语&#xff1a; 引入&#xff1a; 相信看到…

Dockerfile(5) - CMD 指令详解

CMD 指定容器默认执行的命令 # exec 形式&#xff0c;推荐 CMD ["executable","param1","param2"] CMD ["可执行命令", "参数1", "参数2"...]# 作为ENTRYPOINT的默认参数 CMD ["param1","param…