当前位置: 首页 > news >正文

开发中遇到Electron自定义窗口的问题

开发中遇到Electron自定义窗口的问题

使用VUE3 + Electron 开发一个音乐软件,自定义导航栏的放大、缩小和关闭。

其中使用ipcRenderer进行联系Electron,进行放大、缩小和关闭操作。

遇到问题

遇到__dirname is not defined in ES module scope

//在VUE文件中使用
import  ipcRenderer from 'electron';// 会爆出__dirname is not defined in ES module scope的问题
// 原因是__dirname是commonjs规范的内置变量;esm不会注入这个变量
// 解决:删除package.json中的 type:"moudle"

遇到mainWindow is not Defined 和重置窗口没有变化

// 原因:以下代码放置的位置原因,放在了mainWindow作用域外
// 切换全屏事件
ipcMain.on('toggle-full-screen', function() {if (mainWindow.isMaximized()) {// 之前使用的是 mainWindow.restore();mainWindow.unmaximize();} else {mainWindow.maximize();}
});// 最小化窗口事件
ipcMain.on('minimum', function() {mainWindow.minimize();
});

解决方案

electron.js 设置

electron.js : package.json指定的"main": "electron.js "

const { app,ipcMain , BrowserWindow } = require('electron')
const path = require("path")const createWindow = () => {const mainWindow = new BrowserWindow({width: 1200,height: 700,minWidth: 1200,minHeight: 700,frame: false,transparent: true,resizable: false,webPreferences:{nodeIntegration: true, // 是否允许在页面中使用节点js 通信需要contextIsolation: true, // 不启用上下文隔离 通信需要enableRemoteModule: true, // 允许使用 remote 模块preload:path.join(__dirname, 'preload.js'),}})mainWindow.loadURL("http://localhost:5173/");// 下面两个事件需要在createWindow内,在外面会报mainWindow is not definedipcMain.on('toggle-full-screen', function() {  // 切换全屏事件if (mainWindow.isMaximized()) {mainWindow.unmaximize();} else {mainWindow.maximize();}});ipcMain.on('minimum', function() {  // 最小化窗口事件mainWindow.minimize();});
}app.whenReady().then(() => { // 在应用准备就绪时调用函数createWindow()
})
ipcMain.on('closeProgram', () => { // 关闭程序app.quit();
});

新建 preload.js

const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('ipcRenderer', {send: (channel, data) => {let validChannels = ['toggle-full-screen','minimum','closeProgram'] // 配置合法消息名if (validChannels.includes(channel)) {ipcRenderer.send(channel, data)}},receive: (channel, func) => {let validChannels = ['toggle-full-screen','minimum','closeProgram']// 配置合法监听事件名称if (validChannels.includes(channel)) {ipcRenderer.on(channel, (event, ...args) => func(...args))}}
})alert('1')//没弹窗就是失败了 成功后删除

VUE文件中使用

<script>
export default {methods: {minimizeWin(){ // 通知主进程我要进行窗口最小化操作window.ipcRenderer.send('minimum','');// console.log('minimizeWin');},maximizeWin(){  // 通知主进程我要进行窗口最大化操作window.ipcRenderer.send('toggle-full-screen','');// console.log('maximizeWin');},closeWin(){  // 通知主进程我要进行窗口关闭操作//返回一个所有已经打开了窗口的对象数组window.ipcRenderer.send('closeProgram','');// console.log('closeWin');}}
}
</script><template><el-row class="row-head" ><!-- 最小化 --><el-button type="button" class="btn btn-primary" id="minimizeWin" @click="minimizeWin"   style="height: 40px; width: 20%;"></el-button><!-- 最大化 --><el-button type="button" class="btn btn-primary" id="maximizeWin" @click="maximizeWin"  style="height: 40px; width: 20%;"></el-button><!-- 关闭 --><el-button type="button" class="" id="closeWin" @click="closeWin"  style="height: 40px;width: 20%;"></el-button></el-row>
</template>

参考

vite+vue3+electron踩坑记录ipcRenderer通信,vue-router打包白屏问题

相关文章:

开发中遇到Electron自定义窗口的问题

开发中遇到Electron自定义窗口的问题 使用VUE3 Electron 开发一个音乐软件&#xff0c;自定义导航栏的放大、缩小和关闭。 其中使用ipcRenderer进行联系Electron&#xff0c;进行放大、缩小和关闭操作。 遇到问题 遇到__dirname is not defined in ES module scope //在V…...

c# sqlite使用

安装包 使用 const string strconn "Data Sourcedata.db"; using (SQLiteConnection conn new SQLiteConnection(strconn)) {conn.Open();var cmd conn.CreateCommand();cmd.CommandText "select 1";var obj cmd.ExecuteScalar();MessageBox.Show(ob…...

39、Flink 的窗口剔除器(Evictors)详解

Evictors Flink 的窗口模型允许在 WindowAssigner 和 Trigger 之外指定可选的 Evictor&#xff0c;通过 evictor(...) 方法传入 Evictor。 Evictor 可以在 trigger 触发后、调用窗口函数之前或之后从窗口中删除元素&#xff0c; Evictor 接口提供了两个方法实现此功能&#x…...

Flutter 中的 DefaultTabController 小部件:全面指南

Flutter 中的 DefaultTabController 小部件&#xff1a;全面指南 在Flutter中&#xff0c;DefaultTabController是一个用于管理Tab控制器的widget&#xff0c;它允许你控制Tab视图的初始索引和动态更新。这个组件在实现具有可滚动标签页的界面时非常有用&#xff0c;例如在设置…...

C++技能进阶指南——多态语法剖析

前言&#xff1a;多态是面向对象的三大特性之一。顾名思义&#xff0c; 多态就是多种状态。 那么是什么的多种状态呢&#xff1f; 这里的可能有很多。比如我们去买火车票&#xff0c; 有普通票&#xff0c; 学生票&#xff1b; 又比如我们去旅游&#xff0c; 有儿童票&#xff…...

Linux内存管理--系列文章肆

一、引子 上篇文章介绍了目标文件&#xff0c;也就是讲到编译过程中的汇编这个阶段。本篇要讲目标文件怎么变成一个可执行文件的&#xff0c;介绍编译过程中的链接。 链接主要分为两种&#xff0c;静态链接和动态链接。它们本质上的区别&#xff0c;是在程序的编译和运行过程中…...

kali下载zsteg和stegpy

1.kali下载zsteg 从 GitHub 上克隆zsteg到kali git clone https://github.com/zed-0xff/zsteg 切换目录 cd zsteg 用于安装名为 zsteg 的 Ruby Gem 包 gem install zsteg 2.kali下载stegpy 下载网站内的stegpy-master压缩包GitCode - 开发者的代码家园 并拉到kali中 切换到s…...

前端面试题日常练-day34 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. jQuery中&#xff0c;以下哪个选项用于筛选出第一个匹配的元素&#xff1f; a) first() b) get(0) c) eq(0) d) find(":first") 2. 在jQuery中&#xff0c;以下哪个选项用于在元素上…...

网站笔记:huggingface model memory calculator

Model Memory Utility - a Hugging Face Space by hf-accelerate 这个工具可以计算在 Hugging Face Hub上托管的大型模型训练和执行推理时所需的vRAM内存量。模型所需的最低推荐vRAM内存量表示为“最大层”的大小&#xff0c;模型的训练大约是其大小的4倍&#xff08;针对Adam…...

SpringBoot2.0.x旧版集成Swagger UI报错Unable to infer base url...解决办法

一、问题描述 1.1项目背景 SpringBoot2.0.9的旧版项目维护开发&#xff0c;集成Swagger-ui2.9.2无法访问的问题。不用想啊&#xff0c;这种老项目是各种过滤器拦截器的配置&#xff0c;访问不到&#xff0c;肯定是它们在作妖。懂得都懂啊&#xff0c;这里交给大家一个排错的办…...

软件项目详细设计说明书实际项目参考(word原件下载及全套软件资料包)

系统详细设计说明书案例&#xff08;直接套用&#xff09; 1.系统总体设计 2.性能设计 3.系统功能模块详细设计 4.数据库设计 5.接口设计 6.系统出错处理设计 7.系统处理规定 软件开发全文档下载&#xff08;下面链接或者本文末个人名片直接获取)&#xff1a;软件开发全套资料-…...

电脑文件qt5core.dll如何修复?如何快速的解决qt5core.dll丢失问题

软件应用程序依赖于各种复杂的文件系统以保证其顺畅运行。这些文件中&#xff0c;动态链接库&#xff08;Dynamic Link Library&#xff0c;简称DLL&#xff09;是Windows操作系统中实现多种功能的关键组件之一。然而&#xff0c;DLL文件出现问题是Windows用户可能面临的常见挑…...

USART串口通信(stm32)

一、串口通信 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统 通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 STM32F103C8T6 USART资源&#xff1a; USART1、 USART2、 USART3 自带波特率发生器&…...

快速分析变量间关系(Boruta+SHAP+RCS)的 APP(streamlit)

快速分析变量间关系&#xff08;BorutaSHAPRCS&#xff09;的 APP&#xff08;streamlit&#xff09; 以下情况下&#xff0c;你需要这个快速分析的APP: 正式分析之前的预分析&#xff0c;有助于确定分析的方向和重点变量&#xff1b;收集变量过程中&#xff0c;监测收集的变量…...

解决docker中container运行闪退终止的问题

在运行bindmount-test时&#xff0c;点击完运行按钮后闪退结束运行。 第一步查看log日志&#xff1a; 2024-05-18 23:46:18 Error: Cannot find module /app/nodemon 2024-05-18 23:46:18 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15) …...

Redis 性能管理

一、Redis 性能管理 #查看Redis内存使用 172.168.1.11:6379> info memory 1. 内存碎片率 操作系统分配的内存值 used_memory_rss 除以 Redis 使用的内存总量值 used_memory 计算得出。内存值 used_memory_rss 表示该进程所占物理内存的大小&#xff0c;即为操作系统分配给…...

节水“云”科普丨北京昌平VR节水云展馆精彩上线

2024年5月15日上午&#xff0c;由北京昌平区水务局主办的“推进城市节水&#xff0c;建设美丽昌平——2024年全国城市节约用水宣传周暨‘坚持节水优先 树立节水标杆’昌平节水在行动主题实践活动”隆重举办&#xff0c;活动期间&#xff0c;昌平区水务局应用VR虚拟现实技术创新…...

linux的系统调用open, read函数(文件编程)使用demo

1.引言 为了学习linux系统下的app开发&#xff0c;记载了学习文件编程的笔记 2.open函数 功能 打开一个文件 头文件 #include<sys/stat.h> #include<fcntl.h> 函数形式 int open(const char* pathname, int flags, mode_t mode); 返回值 如果调用成功&#xff0c…...

C语言基础——循环(2)+关机程序

欢迎点赞支持 个人主页&#xff1a;励志不掉头发的内向程序员&#xff1b; 专栏主页&#xff1a;C语言基础&#xff1b; 文章目录 目录 前言 一、for循环的补充 二、循环的嵌套 1、嵌套的介绍 1.1 练习&#xff1a; 题目解析&#xff1a; 优化&#xff1a; 三、goto语句 1、go…...

cnVcXsrv 21.1.13.1—VcXsrv 21.1.13中文版本简单说明~~

对于VcXsrv的使用目的和用途相信大家都很了解。前不久VcXsrv做了更新&#xff0c;并且将项目托管到github上了。链接如下&#xff1a; VcXsrv: Windows X-server based on the xorg git sourceshttps://github.com/marchaesen/vcxsrv也可以简单查看如下链接&#xff1a; VcXs…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...