如下是對窗口最大化,最小化等相關操作:
import { ipcMain, ipcRenderer, remote } from 'electron'
import is from 'electron-is'
// ipc 通信發送的窗口狀態改變事件的channel名稱
export const windowStateChangeChannel = 'window-state-changed'
// window的當前狀態
export const WINDOW_STATE = {
FULLSCREEN: 'full-screen',
MAXIMIZED: 'maximized',
MINIMIZED: 'minimized',
HIDDEN: 'hidden',
NORMAL: 'normal',
}
// window可執行的操作,通過發送消息觸發
const windowAction = {
maximize: 'window-maximize',
unmaximize: 'window-unmaximize',
minimize: 'window-minimize',
close: 'window-close',
}
/**
* 獲取window的狀態
* @param {window對象} window
*/
export function getWindowState(window) {
if (window.isFullScreen()) {
return WINDOW_STATE.FULLSCREEN
} if (window.isMaximized()) {
return WINDOW_STATE.MAXIMIZED
} if (window.isMinimized()) {
return WINDOW_STATE.MINIMIZED
} if (!window.isVisible()) {
return WINDOW_STATE.HIDDEN
}
return WINDOW_STATE.NORMAL
}
/**
* 發送一個 window-state-changed 消息到 renderer 進程
* @param {\*} window
* @param {\*} state
*/
function sendWindowStateEvent(window, state) {
window.webContents.send(windowStateChangeChannel, state)
}
/**
* 注冊 window 狀態變化后事件,它會發送一個消息到 renderer 進程
* @param {window對象} window
*/
export function registerWindowStateChangedEvents(window) {
window.on('enter-full-screen', () => sendWindowStateEvent(window, 'full-screen'))
window.on('leave-full-screen', () => sendWindowStateEvent(window, 'normal'))
window.on('maximize', () => sendWindowStateEvent(window, 'maximized'))
window.on('minimize', () => sendWindowStateEvent(window, 'minimized'))
window.on('unmaximize', () => sendWindowStateEvent(window, 'normal'))
window.on('restore', () => sendWindowStateEvent(window, 'normal'))
window.on('hide', () => sendWindowStateEvent(window, 'hidden'))
window.on('show', () => sendWindowStateEvent(window, 'normal'))
}
/**
* 注冊 window 狀態變化動作,使用 ipc.send 對應的消息觸發*
* @param {window對象} window
*/
export function registerWindowStateChangeActions(window) {
// 窗口最小化
ipcMain.on(windowAction.minimize, () => {
window.minimize()
})
// 窗口最大化
ipcMain.on(windowAction.maximize, () => {
window.maximize()
})
// 窗口取消最大化
ipcMain.on(windowAction.unmaximize, () => {
window.unmaximize()
})
// 窗口關閉
ipcMain.on(windowAction.close, () => {
window.close()
})
}
/**
* 生成帶有promise的操作窗口的函數,可以進一步處理事件結束后的邏輯
* @param {窗口可執行的操作} windowAction
*/
function generatePromisedWindowStateFunc(action) {
return () => {
return new Promise((resolve) => {
ipcRenderer.send(action)
ipcRenderer.once(windowStateChangeChannel, (event, args) => {
resolve(args)
})
})
}
}
/**
* 生成不帶有promise的操作窗口函數,只負責觸發事件
* @param {窗口可執行的操作} windowAction
*/
function generateWindowStateFunc(action) {
return () => {
ipcRenderer.send(action)
}
}
/**
* 最大化窗口的方法,因為windows和macOS之間的差異,單獨寫成一個函數
*/
function handleMaximizeWindow() {
if (is.windows()) {
remote.getCurrentWindow().maximize()
return Promise.resolve(WINDOW_STATE.MAXIMIZED)
}
return new Promise((resolve) => {
ipcRenderer.send(windowAction.maximize)
ipcRenderer.once(windowStateChangeChannel, (event, args) => {
resolve(args)
})
})
}
/**
* 窗口操作方法,包括最大化,最小化,關閉
* 每個方法返回一個promise,方便處理后續邏輯
*/
export const windowStateActionResponse = {
maximize: handleMaximizeWindow,
unmaximize: generatePromisedWindowStateFunc(windowAction.unmaximize),
minimize: generatePromisedWindowStateFunc(windowAction.minimize),
close: generatePromisedWindowStateFunc(windowAction.close),
}
/**
* 窗口操作方法,包括最大化,最小化,關閉
* 只發送消息,不處理成功之后的回調
*/
export const WindowStateAction = {
maximize: generateWindowStateFunc(windowAction.maximize),
unmaximize: generateWindowStateFunc(windowAction.unmaximize),
minimize: generateWindowStateFunc(windowAction.minimize),
close: generateWindowStateFunc(windowAction.close),
}
/**
* 給窗口改變事件增加監聽
* @param {事件觸發后的回調} handle
*/
export function listenToWindowStateChange(handle) {
ipcRenderer.on(windowStateChangeChannel, handle)
return () => {
ipcRenderer.removeListener(windowStateChangeChannel, handle)
}
}
下面是electron配置:
import { BrowserWindow, screen } from 'electron'
function createWebRTCInternalWindow() {
const displayWorkAreaSize = screen.getAllDisplays()[0].workArea
const options = {
x: displayWorkAreaSize.x,
y: displayWorkAreaSize.y,
width: displayWorkAreaSize.width,
height: displayWorkAreaSize.height,
resizable: true,
movable: true,
fullscreenable: false,
enableLargerThanScreen: false,
frame: true,
transparent: false,
alwaysOnTop: false,
hasShadow: false,
minWidth: 1000,
minHeight: 648,
webPreferences: {
devTools: true,
webSecurity: false,
plugins: true,
experimentalFeatures: true,
experimentalCanvasFeatures: true,
minimumFontSize: 10,
},
}
const mainWindow = new BrowserWindow(options)
return mainWindow
}
export default createWebRTCInternalWindow
import { BrowserWindow, screen } from 'electron'
function createBrowserWindow() {
const displayWorkAreaSize = screen.getAllDisplays()[0].workArea
const options = {
width: parseInt(displayWorkAreaSize.width * 0.85, 10),
height: parseInt(displayWorkAreaSize.height * 0.85, 10),
center: true,
resizable: true,
movable: true,
fullscreenable: false,
enableLargerThanScreen: false,
frame: false,
transparent: true,
alwaysOnTop: false,
clickThrough: 'pointer-events',
acceptFirstMouse: true,
hasShadow: false,
minWidth: 1000,
minHeight: 648,
webPreferences: {
devTools: true,
webSecurity: false,
plugins: true,
experimentalFeatures: true,
experimentalCanvasFeatures: true,
minimumFontSize: 10,
},
}
const mainWindow = new BrowserWindow(options)
return mainWindow
}
export default createBrowserWindow
如上配置中可設置一系列初始值,其中包括 是否可resize,是否可拖動等。如果想在其它地方修改初始值,可按照如下實現:
const currentWindow = require('electron').remote.getCurrentWindow()
currentWindow.setResizable(false)
currentWindow.setMovable(false)
// 禁止Windows下雙擊最大化和調用maximize行為不一致導致的窗口尺寸變化
currentWindow.setMaximizable(false)

