最近刚开始上手electron，就遇到了各种问题。在此作者记录一下，有需要的朋友也可以来看一看，
看是否能解决你自己的问题。
这是electron的官网，小伙伴们想学习的可以去看一看
https://www.electronjs.org
从官网上荡下来的项目是有边框的，就跟浏览器一样，我们可以检查。
但是如何去掉边框呢。我上网查了查
// frame:false(加这一句就行)
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame:false，
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
接下来就是解决自定义最大化等问题了
这是我从网上找到的比较靠谱的博主的文章了，给大家分享一下
https://www.cnblogs.com/mica/p/10794751.html
总结起来就是要新添加（main.js）
const {
app,
BrowserWindow,
ipcRenderer,
ipcMain
} = require('electron')
//登录窗口最小化
ipcMain.on('window-min', function () {
mainWindow.minimize();
})
//登录窗口最大化
ipcMain.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
//关闭窗口
ipcMain.on('window-close', function () {
mainWindow.close();
})
新添加（renderer.js）
var ipc = require('electron').ipcRenderer;
document.getElementById('maxbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-max');
})
document.getElementById('minbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-min');
})
document.getElementById('closebt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-close');
})
新添加（index.html）
<!-- 三个操作按钮 -->
<section>
<button type="button" id="maxbt">max</button>
<button type="button" id="minbt">>min</button>
<button type="button" id="closebt">>close</button>
</section>
但是遇到了 一个问题 （require不识别）
上网找了很多方法，都说要加一个nodeIntegration: true,就可以解决问题
可是我的问题没有得到解决，可能我用的是最新版的缘故把
这是我千辛万苦找到的一个能解决问题的博主的文章
https://blog.csdn.net/adley_app/article/details/118143784
试了试会报一个mainWindow找不到的错误，
仔细看了下原因，是因为是const
于是 我改变了他的数据类型用 var
后面又遇到了一个问题 就是 同时打开了 两个页面
（我先开始还纳闷为什么放大最小化都能生效，为什么关闭不生效呢）
后面我把下面的东西给注了，成功了
// app.whenReady().then(() => {
// createWindow()
// app.on('activate', function () {
// // On macOS it's common to re-create a window in the app when the
// // dock icon is clicked and there are no other windows open.
// if (BrowserWindow.getAllWindows().length === 0) createWindow()
// })
// })
关于可拖拽，我也是查了查。最简单的就是给你所想要拖拽的最外层盒子加一个这样的属性
-webkit-app-region: drag;
我起初加在了行内样式，也就是这样，发现不起作用。
<body style = "-webkit-app-region: drag">
</body>
于是我就找问题
发现只能加在css中，
于是我就改成了这样
body{
-webkit-app-region: drag;
}
发现可用，并且需要将其中需要点击的东西标记为不可拖拽，否则用户将无法点击他们
下面给大家发一个完整的css(style.css),我里面也就button能点击
/* styles.css */
html,body{
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-app-region: drag;
-webkit-user-select: none;
}
button{
-webkit-app-region: no-drag;
}
/* Add styles here to customize the appearance of your app */
最后 给大家发一个完整版的（main,js）
// Modules to control application life and create native browser window
const {
app,
BrowserWindow,
ipcRenderer,
ipcMain
} = require('electron')
const path = require('path')
var mainWindow
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame:false,
webPreferences: {
// preload: path.join(__dirname, 'preload.js')
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// app.whenReady().then(() => {
// createWindow()
// app.on('activate', function () {
// // On macOS it's common to re-create a window in the app when the
// // dock icon is clicked and there are no other windows open.
// if (BrowserWindow.getAllWindows().length === 0) createWindow()
// })
// })
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
//登录窗口最小化
ipcMain.on('window-min', function () {
mainWindow.minimize();
})
//登录窗口最大化
ipcMain.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
//关闭窗口
ipcMain.on('window-close', function () {
mainWindow.close();
})
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
以上就是设置Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
