Electron 无边框窗口最大化最小化关闭功能
目的
- 实现无边框窗口，并添加最大化最小化和关闭功能
前提
- 了解Electron 主进程和渲染进程的通讯
- 了解 BrowserWindow相关功能
操作流程
- 先在界面上放三个按钮
<!-- 窗口的右上角三个操作按钮 -->
<section style="-webkit-app-region: no-drag">
<button type="button" id="maxbt" @click="maxbt">max</button>
<button type="button" id="minbt" @click="minbt">>min</button>
<button type="button" id="closebt" @click="closebt">>close</button>
</section>
**-webkit-app-region: drag是可拖动的样式**
**-webkit-app-region: no-drag是不可拖拽样式**
2. 添加事件把要做的操作发送给主进程
``` javascript 在Vue里面
```在原生 JavaScript 里面
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'); })
- 在主进程中调相应的方法
const electron = require('electron')
const ipc = electron.ipcMain
//登录窗口最小化
ipc.on('window-min', function () {
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
ipc.on('window-close', function () {
mainWindow.close();
})
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
ipc不适合大数据通讯，最好只做命令的传递
源码
