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) {
  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)