Electron 无边框窗口最大化最小化关闭功能

目的

• 实现无边框窗口，并添加最大化最小化和关闭功能

前提

• 了解Electron 主进程和渲染进程的通讯
• 了解 BrowserWindow相关功能

操作流程

1. 先在界面上放三个按钮

    <!-- 窗口的右上角三个操作按钮 -->
    <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');

})

 

1. 在主进程中调相应的方法

 

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不适合大数据通讯，最好只做命令的传递 
源码