分享一款 electron 插件:electron-win-state

electron-win-state是一款Electron插件，专注于存储和恢复Electron窗口的大小和位置。为了使用这个插件，你的Electron版本需要在11或更新版本。

electron-win-state 插件在以下应用场景中能够发挥作用：

桌面应用程序开发： 对于使用 Electron 构建的桌面应用程序，electron-win-state 可以帮助开发者轻松地管理和记忆应用窗口的大小和位置，提供更好的用户体验。
多窗口应用： 对于需要管理多个窗口的应用程序，该插件使得恢复各个窗口的状态变得更加简便，用户可以在重新打开应用时继续上一次的工作环境。
开发调试阶段： 在开发阶段启用 dev 选项，可以实时保存窗口的大小和位置变化，方便调试和测试窗口调整的效果。
用户定制体验： 对于希望提供个性化体验的应用，electron-win-state 允许用户调整和保存窗口的位置和大小，以适应他们的工作流程和偏好。
无边框窗口应用： 当应用需要使用 Electron 的无边框窗口功能时，defaultFrame 和 storeFrameOption 选项可以用于存储和恢复边框设置。

特性

💾 持久记忆 - 始终保存你的Electron窗口大小和位置

🔌 无缝集成 - 轻松与你现有的BrowserWindow配置集成

🔨 定制化 - 定制行为和底层的electron-store实例

🖼️ 边框选项 - 你还可以选择性地保存边框选项

用户友好： 提供了更好的用户体验，用户可以自定义并记住他们喜欢的窗口状态。
开发效率： 在开发阶段，开发者可以快速测试窗口的调整效果，而不必每次都手动设置。
恢复工作环境： 对于多窗口应用，可以在应用重新打开时恢复上一次的工作环境，提高用户生产力。
适应性： 适用于不同类型的 Electron 应用，可以根据具体需求定制插件的选项。

electron-win-state 插件为 Electron 应用提供了一个方便且可定制的工具，以改善窗口状态的管理和用户体验。

安装

npm install electron-win-state

示例代码

electron-win-state 插件在项目中的使用，包括插件的初始化、窗口的创建和管理。

const { app, BrowserWindow } = require('electron');
const WinState = require('electron-win-state').default;  // 引入 electron-win-state 插件

const path = require('node:path');

// 创建一个 WinState 实例，并设置默认窗口大小
const winState = new WinState({
    defaultWidth: 800,
    defaultHeight: 600,
});

// 创建窗口函数
const createWindow = () => {
    // 创建浏览器窗口，使用 electron-win-state 提供的窗口选项
    const mainWindow = new BrowserWindow({
        ...winState.winOptions,  // 使用插件提供的窗口选项
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    // 加载本地 URL 或远程 URL
    mainWindow.loadURL("http://localhost:9300", {}); 

    // 打开开发者工具
    mainWindow.webContents.openDevTools(); // 快捷键：Option + Command + I

    return mainWindow;
}

// 当 Electron 准备好时，创建窗口并应用 electron-win-state 管理
app.whenReady().then(() => {
    const mainWindow = createWindow();
    winState.manage(mainWindow);  // 使用 electron-win-state 管理窗口状态
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

// 当所有窗口关闭时，退出应用程序（除非在 macOS 上）
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

API

以下是electron-win-state支持的所有选项：

defaultWidth（默认宽度）：当没有存储数值时使用的默认宽度，缺省值为800。
defaultHeight（默认高度）：当没有存储数值时使用的默认高度，缺省值为600。
defaultFrame（默认边框）：当没有存储数值时使用的边框选项的默认值，缺省值为true。
storeFrameOption（存储边框选项）：存储和恢复边框选项（如果提供了defaultFrame，将自动启用），缺省值为false。
dev（开发模式）：启用开发模式。调整大小或移动后立即保存更改，而不仅仅在关闭窗口后保存，缺省值为false。
addMethods（添加方法）：向提供的BrowserWindow添加.resetWindowToDefault()、.setFramed()和.getStoredWinOptions()方法，缺省值为true。
electronStoreOptions（electron-store选项）：传递给底层electron-store实例的选项，缺省值为{ name: 'window-state' }。
store（存储实例）：要使用的现有electron-store实例，n/a表示不适用。

通过这个插件，你可以轻松管理和记忆你的Electron窗口的状态，提高开发效率。详细的使用说明和示例可以在GitHub页面找到。

优化 Electron 窗口状态管理的利器 - electron-win-state

分享一款 electron 插件:electron-win-state

特性

安装

示例代码

API