electron+vue3全家桶+vite项目搭建【27】封装窗口工具类【1】雏形
文章目录
- 引入
- 思路
- 抽出公共声明文件
- 抽出全局通用数据类型和方法
- 主进程模块
- 1.抽离基础常量
- 2.封装窗口工具类
- 渲染进程模块
- 测试结果
引入
demo项目地址
可以看到我们之前在主进程中的逻辑全部都塞到index.ts文件中,包括窗口的一些事件处理,handle监听,协议注册等等,后期维护起来会比较麻烦,我们不妨将其中的功能细分,封装到工具类中。
思路
以新建窗口举例,流程为
- 主进程ipcMain.handle监听,根据传来的参数构建新窗口
/*** 新建一个窗口* route=>路由地址 paramJsonStr => 序列化后的参数对象*/
ipcMain.handle("open-win", (_, route: string, paramJsonStr: string) => {...})
- 渲染进程调用 ipcRenderer.invoke方法通知主进程创建窗口
/*** 新建一个窗口* @param path 路由地址* @param param 传递的参数*/
export function openWindow(path: string, param?: Object) {...ipcRenderer.invoke("open-win", path, paramJsonStr);
}
可以预见的是,后续窗口的创建逻辑会随着业务逻辑而扩展,例如创建窗口时 指定窗口宽高,标题,背景色等属性,设置窗口透明,事件击穿等等内容,并且多个窗口间的一些交互需要我们去维护一个窗口组信息,记录窗口的id和逻辑上的关联关系等。
所以我们不妨创建一个窗口工具类,专门集成封装窗口相关的方法,属性等
抽出公共声明文件
我们在渲染进程项目模块中的electronUtils和主进程中的窗口工具类中的【handle/on】方法是一一对应的【invoke/send】,传入的参数也是通用的,所以我们不妨抽出一个公共的全局声明文件,用于声明通用的一些参数对象。
1.在全局声明文件中添加通用事件对象的声明
- types\global.d.ts
/** 一些全局的对象补充声明 */
export {};
declare global {...// 窗口创建参数规范interface IWindowConfig {key?: string; // 窗口唯一key,不传则取窗口的id,假如已存在该key则聚焦该窗口route?: string; // 窗口路由width?: number; // 窗口宽度height?: number; // 窗口高度param?: string; // 传递参数,新窗口打开时能直接从路由中获取,拼接url传递,推荐只传小数据}
}
2.主进程引入全局声明文件
- electron\electron-env.d.ts
/// <reference types="vite-plugin-electron/electron-env" />import "../types/global.d.ts";
抽出全局通用数据类型和方法
主进程和渲染进程都会调用相同的事件名称,所以我们不妨定义一个全局的事件枚举类,方便两个进程的代码书写和规范【事件名称应当唯一,否则会重复绑定】。
1.在根目录下创建globel目录,然后分别创建channelEvent.ts和channelEvent.d.ts两个文件 【事件管道枚举和对应的声明文件】

- globel\channelEvent.ts
/*** 自定义事件枚举*/
export enum CustomChannel {window_create = "custom_window_create", // 窗口新建事件window_move_on = "custom_window_move_on", // 开启窗口移动事件window_position_change = "custom_window_position_change", // 修改窗口的位置
}
- globel\channelEvent.d.ts
// customEvents.d.ts/*** 自定义事件枚举的类型声明*/
export declare enum CustomChannel {window_create = "custom_window_create", // 窗口新建事件window_move_on = "custom_window_move_on", // 开启窗口移动事件window_position_change = "custom_window_position_change", // 修改窗口的位置
}
2.在根目录下的tsconfig.node.json文件中添加引入
- tsconfig.node.json
"include": [...,"globel"]
3.配置别名快速访问
- vite.config.ts
...
resolve: {alias: {..."@globel": path.resolve(__dirname, "./globel"),},},
- tsconfig.json
{"compilerOptions": {..."paths": {..."@globel/*": ["globel/*"],},"types": ["vite-plugin-svg-icons/client"]},}
主进程模块
1.抽离基础常量
我们将主进程中常用的常量抽离到单独的文件中:
- electron\main\common\variables.ts
import { join } from 'node:path';/***公共变量配置*/
process.env.DIST_ELECTRON = join(__dirname, '..');
process.env.DIST = join(process.env.DIST_ELECTRON, '../dist');
process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL? join(process.env.DIST_ELECTRON, '../public'): process.env.DIST;// 公共变量中存一份SRC的路径,方便取值
process.env.SRC_PATH = join(__dirname, '../../src').split('\\').join('/');// 预加载文件路径
export const preloadPath = join(__dirname, '../preload/index.js');
// dev环境请求地址
export const url = process.env.VITE_DEV_SERVER_URL;
// 部署环境的html文件路径
export const indexHtmlPath = join(process.env.DIST, 'index.html');
// icon图标地址
export const iconPath = join(process.env.PUBLIC, 'icons/icon.ico');
// app的title,会被index.html中配置的<title>%VITE_APP_TITLE%</title> 覆盖
export const appTitle = "新窗口";
// app在windows上注册表的协议
export const PROTOCOL = 'bcxlelectrondemo';
2.封装窗口工具类
注意:
1.定义默认窗口参数时使用了ts中的联合类型,这样定义的defaultWindowConfig就必须拥有指定的两个类型中的所有属性
2.创建了一个窗口类,并将窗口相关的逻辑封装为窗口类中的成员方法
3.窗口类中定义个一个listen方法,里面放置所有需要与渲染进程交互的handle监听
- electron\main\windowUtils.ts
import {BrowserWindow,BrowserWindowConstructorOptions,ipcMain,
} from "electron";
import {url,appTitle,preloadPath,iconPath,indexHtmlPath,
} from "./common/variables";
import { CustomChannel } from "../../globel/channelEvent";/* ======================= 定义一些窗口工具类中会使用到的常量,以及窗口顶级父类 ========================= */// 默认窗口参数
export const defaultWindowConfig: BrowserWindowConstructorOptions &IWindowConfig = {title: appTitle,icon: iconPath,width: 800,height: 600,webPreferences: {webviewTag: true,preload: preloadPath,nodeIntegration: true,contextIsolation: false,},
};/*** 窗口工具类*/
export class WindowUtils {// 事件监听处理listen() {// 窗口创建监听ipcMain.handle(CustomChannel.window_create, (_, opt: IWindowConfig) => {this.createWindows(opt);});}/*** 创建窗口* @param windowConfig 窗口创建参数*/createWindows(windowConfig: IWindowConfig): BrowserWindow {// 创建窗口对象const win = new BrowserWindow(Object.assign({}, defaultWindowConfig, windowConfig));// 根据当前环境加载页面,并传递参数const param = windowConfig.param? "?urlParamData=" + windowConfig.param: "";if (process.env.VITE_DEV_SERVER_URL) {// 如果是开发环境,则直接访问本地跑起的服务,拼接对应的路由win.loadURL(`${url}#${windowConfig.route}${param}`);} else {// 如果是线上环境,则加载html文件的路径,然后拼接路由win.loadFile(indexHtmlPath, { hash: windowConfig.route + param });}// 绑定通用窗口事件return win;}
}
接着我们调整index.ts中的创建主窗口的代码:
import {WindowUtils} from './windowUtils'// 创建窗口工具类
const windowUtils = new WindowUtils();
windowUtils.listen();...
async function createWindow() {...win = windowUtils.createWindows({route:"/"});
}
对比之前代码,简练了不少

渲染进程模块
1.我们调整通用交互工具类,补充新的窗口创建方法
- src\utils\electronUtils.ts
import { ipcRenderer } from "electron";
import { CustomChannel } from "@globel/channelEvent";
/*** 新建一个窗口* @param windowConfig*/
export function createWindow(windowConfig: IWindowConfig) {ipcRenderer.invoke(CustomChannel.window_create, windowConfig);
}
2.调整demo代码
- src\components\demo\Index.vue
electronUtils.createWindow({route: windowPath.value,param: JSON.stringify({message: "向你问个好~~",}),});

测试结果
能够正常的创建窗口

相关文章:
electron+vue3全家桶+vite项目搭建【27】封装窗口工具类【1】雏形
文章目录 引入思路抽出公共声明文件抽出全局通用数据类型和方法主进程模块1.抽离基础常量2.封装窗口工具类 渲染进程模块测试结果 引入 demo项目地址 可以看到我们之前在主进程中的逻辑全部都塞到index.ts文件中,包括窗口的一些事件处理,handle监听&am…...
从模型到复合AI系统的转变
2023年,大型语言模型(LLM)吸引了所有人的注意力,它可以通过提示来执行通用任务,例如翻译或编码。这自然导致人们将模型作为AI应用开发的主要成分而密切关注,所有人都在想新的LLM将带来什么能力。然而,随着越来越多的开发者开始使用LLM构建,我们认为这种关注正在迅速改变:最先进…...
将仓库A中的部分提交迁移到仓库B中
结论: 使用git format-patchgit am即可实现 使用场景: 例如仓库A这里有5个提交记录,commitid1, commitid2, commitid3, commitid4,commitid5 仓库B想用仓库A中提交的代码,手动改比较慢,当改动较多的时候…...
信息安全技术基础
本博客地址:https://security.blog.csdn.net/article/details/136331705 一、信息安全基础 1、信息安全的基本要素有机密性、完整性、可用性、可控性与可审查性。信息安全的范围包括设备安全、数据安全、内容安全和行为安全。其中数据安全即采取措施确保数据免受未…...
flask知识--01
flask介绍 # python 界的web框架: Django:大而全,使用率较高 :https://github.com/django/django -FastAPI:新项目选择使用它:https://github.com/tiangolo/fastapi -flask:公司一些…...
软考52-上午题-【数据库】-关系模式2
一、关系模式的回顾 见:软考38-上午题-【数据库】-关系模式 二、关系模式 2-1、关系模式的定义 示例: 念法:A——>B A决定B,或者,B依赖于A。 2-2、函数依赖 1、非平凡的函数依赖 如果X——>Y,&a…...
devc++跑酷小游戏3.5.0
本来想搞存档的,失败了,要再学学文件操作的函数。还有一个打印地图的函数,更失败,彻底放弃。最近开学了,游戏不会经常更新,要写作业。昨天写到10点T_T #include<bits/stdc.h> #include<windows.h…...
Redisson限流算法
引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.12.3</version> </dependency>建议版本使用3.15.5以上 使用 这边写了一个demo示例,定…...
GPT与MBR:硬盘分区表格式的革新与区别
概述 在计算机存储领域,硬盘分区是管理数据和操作系统部署的基础。两种广泛使用的分区表格式——MBR(Master Boot Record)和GPT(GUID Partition Table),各自代表了不同的技术阶段和发展需求。本文将详细介…...
机器学习-1
文章目录 前言机器学习基本定义 练习题 前言 在本片开始将为大家介绍机器学习相关的知识点。 机器学习基本定义 夏天,我们通常会去水果店里买西瓜,我们看到一个根蒂蜷缩、敲起来声音浑浊的青绿色的西瓜,我们提着西瓜就去结账了,…...
Stream流详解
当我们对一个集合中的元素进行多次过滤应该怎样做? 下面看一个案例 按照下面的要求完成集合的创建和遍历 创建一个集合,存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集合 把"张"开头的集合中的长度为3的元素存储到一个新…...
javaweb学习(day05-TomCat)
一、介绍 1 官方文档 地址: https://tomcat.apache.org/tomcat-8.0-doc/ 2 WEB 开发介绍 2.1 WEB 在英语中 web 表示网/网络资源(页面,图片,css,js)意思,它用于表示 WEB 服务器(主机)供浏览器访问的资源 2.2 Web 资源 WEB 服务器 ( 主机 ) 上供外界访问的 …...
【Unity】构建简单实用的年份选择器(简单原理示范)
在许多应用程序和游戏中,年份选择是一个常见的需求。无论是在日历应用程序中查看事件,还是在历史类游戏中选择时间段,年份选择器都是用户体验的重要组成部分,下面实现一个简易的年份选择器。 一、效果预览: 目录 一、…...
LeetCode 2120.执行所有后缀指令
现有一个 n x n 大小的网格,左上角单元格坐标 (0, 0) ,右下角单元格坐标 (n - 1, n - 1) 。给你整数 n 和一个整数数组 startPos ,其中 startPos [startrow, startcol] 表示机器人最开始在坐标为 (startrow, startcol) 的单元格上。 另给你…...
租赁小程序|租赁系统|租赁软件开发带来高效运营
随着社会的不断发展和科技的不断进步,越来越多的企业开始关注设备租赁业务。设备租赁作为一种短期使用设备的方式,为企业提供了灵活和成本节约的优势。针对设备租赁业务的管理和提升企业竞争力的需求,很多企业选择定制开发设备租赁系统。本文…...
大数据集群管理软件 CDH、Ambari、DataSophon 对比
文章目录 引言工具介绍CDHAmbariDataSophon 对比分析 引言 大数据集群管理方式分为手工方式和工具方式,手工方式一般指的是手动维护平台各个组件,工具方式是靠大数据集群管理软件对集群进行管理维护。本文针对于常见的方法和工具进行比较,帮助…...
插值、逼近、拟合、光顺
插值 插值(Interpolation)是数学和计算科学中的一个重要概念,它指的是通过已知的一系列数据点,构造一个函数或曲线,并据此估计未知数据点的值。这个过程通常发生在已知数据点之间,用于预测或估算在这些已知…...
Java单元测试 - mock静态方法
文章目录 1. mock 静态方法2. 升级 maven 依赖3. 示例 1. mock 静态方法 mockito 在 3.4.0 版本之后,开始支持 mock static method。 2. 升级 maven 依赖 <dependency><groupId>org.mockito</groupId><artifactId>mockito-core</artif…...
Unity使用PlayableAPI 动态播放动画
1.初始化animator,创建Playable图,创建动画Playable private void InitAnimator(GameObject headGo) {if (headGo){_headAnimator headGo.GetComponent<Animator>();if (_headAnimator){_headAnimator.cullingMode AnimatorCullingMode.AlwaysA…...
unity使用Registry类将指定内容写入注册表
遇到一个新需求,在exe执行初期把指定内容写入注册表,Playerprefs固然可以写入,但是小白不知道怎么利用Playerprefs写入DWORD类型的数据,因此使用了Registry类 一. 对注册表中键的访问 注册表中共可分为五类 一般在操作时&#…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
