最近剛開始上手electron西饵，就遇到了各種問題。在此作者記錄一下鳞芙，有需要的朋友也可以來看一看眷柔，
看是否能解決你自己的問題期虾。
這是electron的官網(wǎng)，小伙伴們想學(xué)習(xí)的可以去看一看
https://www.electronjs.org
從官網(wǎng)上蕩下來的項目是有邊框的驯嘱，就跟瀏覽器一樣彻消，我們可以檢查。
但是如何去掉邊框呢宙拉。我上網(wǎng)查了查
// frame:false(加這一句就行)
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame:false宾尚，
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
接下來就是解決自定義最大化等問題了
這是我從網(wǎng)上找到的比較靠譜的博主的文章了，給大家分享一下
https://www.cnblogs.com/mica/p/10794751.html
總結(jié)起來就是要新添加（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();
}
})
//關(guān)閉窗口
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不識別）
上網(wǎng)找了很多方法谢澈，都說要加一個nodeIntegration: true,就可以解決問題
可是我的問題沒有得到解決煌贴，可能我用的是最新版的緣故把
這是我千辛萬苦找到的一個能解決問題的博主的文章
https://blog.csdn.net/adley_app/article/details/118143784
試了試會報一個mainWindow找不到的錯誤，
仔細看了下原因锥忿，是因為是const
于是 我改變了他的數(shù)據(jù)類型用 var
后面又遇到了一個問題 就是 同時打開了 兩個頁面
（我先開始還納悶為什么放大最小化都能生效牛郑，為什么關(guān)閉不生效呢）
后面我把下面的東西給注了，成功了
// 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()
// })
// })
關(guān)于可拖拽敬鬓，我也是查了查淹朋。最簡單的就是給你所想要拖拽的最外層盒子加一個這樣的屬性
-webkit-app-region: drag;
我起初加在了行內(nèi)樣式，也就是這樣钉答，發(fā)現(xiàn)不起作用础芍。
<body style = "-webkit-app-region: drag">
</body>
于是我就找問題
發(fā)現(xiàn)只能加在css中，
于是我就改成了這樣
body{
-webkit-app-region: drag;
}
發(fā)現(xiàn)可用数尿，并且需要將其中需要點擊的東西標記為不可拖拽仑性，否則用戶將無法點擊他們
下面給大家發(fā)一個完整的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 */
最后 給大家發(fā)一個完整版的（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();
}
})
//關(guān)閉窗口
ipcMain.on('window-close', function () {
mainWindow.close();
})
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
以上就是設(shè)置Electron無邊框窗口（自定義最小化、最大化右蹦、關(guān)閉诊杆、可拖拽）的方法了
如果這篇文章對你有幫助，或者在進行中遇到其他問題何陆，歡迎評論區(qū)留言出來晨汹。
我們一起探討~
