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不適合大數據通訊，最好只做命令的傳遞 
源碼