electron窗⼝相关操作（放⼤缩⼩退出，可拖动，可resize等）如下是对窗⼝最⼤化，最⼩化等相关操作：
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) {
<('enter-full-screen', () => sendWindowStateEvent(window, 'full-screen'))
<('leave-full-screen', () => sendWindowStateEvent(window, 'normal'))
<('maximize', () => sendWindowStateEvent(window, 'maximized'))
<('minimize', () => sendWindowStateEvent(window, 'minimized'))
<('unmaximize', () => sendWindowStateEvent(window, 'normal'))
<('restore', () => sendWindowStateEvent(window, 'normal'))
<('hide', () => sendWindowStateEvent(window, 'hidden'))
<('show', () => sendWindowStateEvent(window, 'normal'))
}
/**
* 注册 window 状态变化动作，使⽤ ipc.send 对应的消息触发*
* @param {window对象} window
*/
export function registerWindowStateChangeActions(window) {
// 窗⼝最⼩化
<(windowAction.minimize, () => {
window.minimize()
})
// 窗⼝最⼤化
<(windowAction.maximize, () => {
window.maximize()
})
// 窗⼝取消最⼤化
<(windowAction.unmaximize, () => {
window.unmaximize()
})
// 窗⼝关闭
<(windowAction.close, () => {
window.close()
})
}
/**
* ⽣成带有promise的操作窗⼝的函数，可以进⼀步处理事件结束后的逻辑
* @param {窗⼝可执⾏的操作} windowAction
*/
function generatePromisedWindowStateFunc(action) {
return () => {
return new Promise((resolve) => {
ipcRenderer.send(action)
<(windowStateChangeChannel, (event, args) => {
resolve(args)
})
})
}
}
/**
* ⽣成不带有promise的操作窗⼝函数，只负责触发事件
resize函数c++* @param {窗⼝可执⾏的操作} windowAction
*/
function generateWindowStateFunc(action) {
return () => {
ipcRenderer.send(action)
}
}
/**
* 最⼤化窗⼝的⽅法，因为windows和macOS之间的差异，单独写成⼀个函数 */
function handleMaximizeWindow() {
if (is.windows()) {
solve(WINDOW_STATE.MAXIMIZED)
}
return new Promise((resolve) => {
ipcRenderer.send(windowAction.maximize)
<(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) {
<(windowStateChangeChannel, handle)
return () => {
}
下⾯是electron配置：
import { BrowserWindow, screen } from 'electron'
function createWebRTCInternalWindow() {
const displayWorkAreaSize = AllDisplays()[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 = AllDisplays()[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').CurrentWindow()
currentWindow.setResizable(false)
currentWindow.setMovable(false)
// 禁⽌Windows下双击最⼤化和调⽤maximize⾏为不⼀致导致的窗⼝尺⼨变化
currentWindow.setMaximizable(false)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论