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

目录

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

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

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

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

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

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

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

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

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

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

相关推荐
拉不动的猪1 小时前
前端小白之 CSS弹性布局基础使用规范案例讲解
前端·javascript·css
伍哥的传说1 小时前
React强大且灵活hooks库——ahooks入门实践之开发调试类hook(dev)详解
前端·javascript·react.js·ecmascript·hooks·react-hooks·ahooks
界面开发小八哥2 小时前
界面控件Kendo UI for Angular 2025 Q2新版亮点 - 增强跨设备的无缝体验
前端·ui·界面控件·kendo ui·angular.js
枷锁—sha3 小时前
从零掌握XML与DTD实体:原理、XXE漏洞攻防
xml·前端·网络·chrome·web安全·网络安全
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第二章,初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs
代码的余温3 小时前
如何区别HTML和HTML5?
前端·html·html5
天下无贼!3 小时前
【样式效果】纯CSS从零到一实现动态彩色背景效果
前端·css
DoraBigHead3 小时前
手写 `new`、`call`、`apply`、`bind` + V8 函数调用机制解密
前端·javascript·面试
_pengliang3 小时前
css 音频波浪动画-小程序\PC可用
前端·css·小程序
ai小鬼头3 小时前
AIStarter教你快速打包GPT-SoVITS-v2,解锁AI应用市场新玩法
前端·后端·github