Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）

Posted 2023-03-09

参考技术A 最近刚开始上手electron，就遇到了各种问题。在此作者记录一下，有需要的朋友也可以来看一看，
看是否能解决你自己的问题。

这是electron的官网，小伙伴们想学习的可以去看一看
https://www.electronjs.org

从官网上荡下来的项目是有边框的，就跟浏览器一样，我们可以检查。
但是如何去掉边框呢。我上网查了查

接下来就是解决自定义最大化等问题了
这是我从网上找到的比较靠谱的博主的文章了，给大家分享一下
https://www.cnblogs.com/mica/p/10794751.html

总结起来就是要新添加（main.js）

新添加（renderer.js）

新添加（index.html）

但是遇到了 一个问题 （require不识别）
上网找了很多方法，都说要加一个nodeIntegration: true,就可以解决问题
可是我的问题没有得到解决，可能我用的是最新版的缘故把
这是我千辛万苦找到的一个能解决问题的博主的文章
https://blog.csdn.net/adley_app/article/details/118143784

试了试会报一个mainWindow找不到的错误，
仔细看了下原因，是因为是const
于是 我改变了他的数据类型用 var

后面又遇到了一个问题 就是 同时打开了 两个页面
（我先开始还纳闷为什么放大最小化都能生效，为什么关闭不生效呢）
后面我把下面的东西给注了，成功了

关于可拖拽，我也是查了查。最简单的就是给你所想要拖拽的最外层盒子加一个这样的属性

我起初加在了行内样式，也就是这样，发现不起作用。

于是我就找问题
发现只能加在css中，
于是我就改成了这样

发现可用，并且需要将其中需要点击的东西标记为不可拖拽，否则用户将无法点击他们
下面给大家发一个完整的css(style.css),我里面也就button能点击

最后 给大家发一个完整版的（main,js）

以上就是设置Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~