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

目录

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

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

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

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

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

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

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

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

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

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

相关推荐
LFly_ice4 小时前
学习React-11-useDeferredValue
前端·学习·react.js
ホロHoro4 小时前
学习笔记:JavaScript(4)——DOM节点
javascript·笔记·学习
小圣贤君5 小时前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
亮子AI5 小时前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
信看5 小时前
实用 html 小工具
前端·css·html
Yvonne爱编码5 小时前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
王源骏5 小时前
Laya使用VideoNode动态加载视频,可以自定义播放视频此处以及位置
前端
一只小风华~5 小时前
Vue: ref、reactive、shallowRef、shallowReactive
前端·javascript·vue.js
阿杆5 小时前
文心快码 3.5S 发布!实测插件开发,Architect 模式令人惊艳
前端·后端·文心快码
文心快码BaiduComate5 小时前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序