electron无边框窗口实现最大最小化与关闭

2018年12月22日Web前端、桌面应用0

自己玩electron有一会了，慢慢开始整理些看上去有些用的小知识点吧。electron的无边框应该是经常用到的，那么在无边框下最大化最小化与关闭就应该是比较常用的了。 该功能electron已经为我们提供了，只需要增加方式去调用就行了。

一、render进程

该功能主要是通过ipcRenderer模块来实现的，render进程中：

const ipc = require('electron').ipcRenderer;
// 关闭app
closeApp() {
    ipc.send('close-app');
}
// 最小化app
minApp() {
    ipc.send('min-app');
}
// 最大化app
maxApp() {
    ipc.send('max-app');
}

三个函数分别绑定右上角的三个按钮，最小化的，最大化和窗口关闭的按钮。

二、主进程

主进程中，则添加好监听就行了，

const electron = require('electron');
const ipc = electron.ipcMain;

ipc.on('close-app', () => {
    // 通知关闭
    mainWindow.close();
});
ipc.on('max-app', () => {
    if (mainWindow.isMaximized()) {
        // 若已经是最大化了，则还原
        mainWindow.unmaximize()
    } else {
        // 最大化窗口
        mainWindow.maximize()
    }
});
ipc.on('min-app', () => {
    // 最小化
    mainWindow.minimize();
});

通过事件与事件监听的方式实现了该功能。

Electron

目录