【electron】electron实现窗口的最大化、最小化、还原、关闭

目录

在以Electron+react为开发语言,一个桌面端系统实现窗口的最大化、最小化、还原、关闭时,要在主进程和渲染进程中去进行设置;
主进程文件:就是我们的main.js文件【如果你的项目中进行了main文件拆分,按照你当前项目的文件去进行定义】
预加载文件:preload文件,需要在窗口创建时加载进去
渲染进程文件:就是我们当前要去进行使用的地方;
实现这个功能之前呢,首先要了解清楚主进程和渲染进程之间的通讯,就会上手非常的快;

1、第一步,在界面上定义好按钮;

这边是我在项目中定义好的最大化、最小化、还原、关闭按钮【详细自己设置样式】,效果如下图所示:

2、第二步,在主进程中进行设置调用相应的方法

这边我定义了个function函数,直接在我们的主进程createWindow中去进行调用、注册窗口控制的IPC处理函数 registerWindowControls()就可以了

3、第三步,要和预加载文件结合起来使用

预加载preload文件和主进程main文件是有关联性的,详细看图片对比图。

这里定义的windowControls接下来要在渲染文件中去使用;

4、第四步,使用ipc通信,实现窗口功能

以上就是实现完整的功能代码了,感兴趣的可以按照步骤操作试一下

相关推荐
东方小月23 分钟前
从零开发一个 Coding Agent(七):实现纯文本 Agent Loop
前端·人工智能
大家的林语冰24 分钟前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js
浮生望27 分钟前
React useRef 深度解析:从DOM操作到Web Worker多线程协作
前端
浮生望33 分钟前
React Router v7 实战全景:路由配置、嵌套路由、鉴权守卫与懒加载完整指南
前端
用户9385156350734 分钟前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战(二)
前端·javascript·typescript
雪隐1 小时前
个人电脑玩AI-16让5060 Ti给你打工——MiniMax H3 提速实录:从"泡杯茶等视频"到"视频等你",一张 5060 Ti 的自我修养
前端·人工智能·后端
FungLeo1 小时前
Flutter Web 中文字体困境与渲染器选择:CanvasKit vs HTML renderer 实战
前端·flutter·html
BD_Marathon1 小时前
部署Spark
大数据·javascript·spark
敲代码的玉米C2 小时前
我修的那个 bug,制造了另一个 bug
前端·人工智能·架构
gis开发之家2 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码