Electron里的electron-window-state 使用

electron-window-state是一个用于管理 Electron 应用窗口状态的 npm 包。它的主要功能是记住应用程序窗口的位置、大小和状态,并在下次启动时自动恢复。

使用场景:

当你希望 Electron 应用在每次启动时都能保持上次关闭时的窗口大小和位置,从而提供更好的用户体验时,就可以使用这个包。

主要功能:

1. ​记住窗口位置和大小

  • 自动保存窗口的 x、y 坐标(位置)

  • 记住窗口的宽度和高度

  • 下次启动时自动恢复到相同的位置和大小

2. ​记住窗口状态

  • 最大化状态(是否全屏)

  • 最小化状态

  • 多显示器支持

3. ​跨会话持久化

  • 将窗口状态保存到磁盘文件

  • 即使应用完全退出再重启也能恢复状态

代码:

首先下载: pnpm add electron-window-state

其次在主进程里引入使用

javascript 复制代码
import windowStateKeeper from 'electron-window-state'

// 创建窗口
function createWindow() {
  // 加载窗口状态
  const mainWindowState = windowStateKeeper({
    defaultWidth: 1500,
    defaultHeight: 1000
  })
  console.log('窗口状态:', mainWindowState)
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    ...mainWindowState,
    // width: 1200,
    // height: 700,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      nodeIntegration: false, // 禁用Node.js集成
      contextIsolation: true, // 启用上下文隔离
      sandbox: false
    }
  })

  // 管理窗口状态
  mainWindowState.manage(mainWindow)

配置选项:

  • defaultWidth:默认宽度(整数)

  • defaultHeight:默认高度(整数)

  • path:存储状态文件的路径(可选,默认是app.getPath('userData'))

  • file:状态文件的文件名(可选,默认是'window-state.json')

  • maximize:是否保存窗口的最大化状态(布尔值,默认false)

  • fullScreen:是否保存窗口的全屏状态(布尔值,默认false)

返回的窗口状态对象具有以下属性:

  • x:窗口的x坐标

  • y:窗口的y坐标

  • width:窗口的宽度

  • height:窗口的高度

  • isMaximized:窗口是否最大化(如果配置中启用)

  • isFullScreen:窗口是否全屏(如果配置中启用)

方法:

  • manage(window):开始监听窗口的状态变化并自动保存。当窗口移动或调整大小时,状态会被更新。在窗口关闭时也会保存状态。
相关推荐
不听话坏13 小时前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript
likeyi0713 小时前
require 和 import的区别
开发语言·前端
pany14 小时前
做 AI 友好的开源 Vue3 模板 🌈
前端·vue.js·ai编程
小二·14 小时前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
daols8815 小时前
vue 甘特图 vxe-gantt 小时视图设置日期轴每间隔 3 个小时
vue.js·甘特图·vxe-gantt
谙忆102415 小时前
前端图片直传对象存储:OSS/S3 预签名 URL、STS 临时凭证与回调校验
前端
CHNE_TAO_EMSM16 小时前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
一孤程17 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
IT_陈寒17 小时前
SpringBoot自动配置不是你以为的那样的智能
前端·人工智能·后端
yume_sibai18 小时前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript