5. electron缓存窗口状态

electron如何缓存窗口状态

经过这几章的学习，我们会发现一个问题，在我们每次打开窗口时，拿到的都是我们设置的宽高窗口，这其实是不符合用户习惯的， 用户在修改窗口位置宽高等信息之后，我们之后打开的应该是用户之前设置好的信息才对， 这里介绍一个插件electron-win-state，我们可以通过它实现保留窗口状态

electron-win-state

首先我们安装 electron-win-state 到我们本地

npm i electron-win-state -S

关于它的用法可以点击查看electron-win-state，我们这里使用实例注入的方式去调用它，修改main.js，引入('electron-win-sta 注意，这里由于 它并没有处理 commonJs的引入， 我们这样 引入的话需要加上.defualt ，引入之后new一个实例, 在 new BrowserWindow 时通过 ...winState.winOptions 覆盖掉默认的配置，所以需要放在末尾，最后我们调用winState.manage(win) 即可

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const WinState = require('electron-win-state').default

const winState = new WinState({})

const createWindows = () => {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preLoad.js'),
    },
    ...winState.winOptions,
  })

  win.loadFile('index.html')

  win.webContents.openDevTools()

  winState.manage(win)
}

app.whenReady().then(() => {
  createWindows()
  // 仅 macOS 支持
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindows()
    }
  })
})

console.log(app.getPath('desktop'))

app.on('window-all-closed', () => {
  // 对于 Mac 系统， 关闭窗口时并不会直接退出应用， 此时需要我们来手动处理
  if (process.platform === 'darwin') {
    console.log('close')
    app.quit()
  }
})

ipcMain.handle('send-event', (event, data) => {
  console.log(data)
  return 'hello render'
})
s,
  })

再次打开窗口，随便调整一下宽高位置，关掉窗口后再次开打即可看到效果了，之前的窗口状态就被保存下来了， 这样更符合用户的操作了。