【（二）Electron 使用之常用技巧】

一叶飘零晋2026-04-30 10:07

1、打开开发者工具

cpp 复制代码

 win.webContents.openDevTools()

2、关闭警告

在index.html中加入代码

cpp 复制代码

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">

警告消失

3、electron-win-state 包的使用

核心作用：让 Electron 应用"记住"窗口状态

你的 Electron 应用在没有这个包时，每次启动都是固定的大小和位置。而 electron-win-state 能帮你实现这类应用常见的"记忆"功能：

保存位置与尺寸：当用户调整窗口大小或移动位置后关闭应用，它会自动记录新的 x、y 坐标及宽高。
恢复窗口状态：下次应用启动时，会直接恢复为用户上次使用时的窗口位置和大小。
记忆最大化/全屏：还能记录窗口是否处于最大化或全屏状态，并在下次启动时正确还原。

cpp 复制代码

npm i electron-win-state -D

如何使用

cpp 复制代码

const {app,BrowserWindow} = require('electron') 
const WinState = require('electron-win-state').default
const createWindow = ()=>{
    const winState = new WinState({
        defaultWidth:1000,
        defaultHeight:800
    })
    const win = new BrowserWindow({
        ...winState.winOptions
        
    })
    win.loadURL('http://localhost:3000/')
    win.webContents.openDevTools()
    winState.manage(win)
}

app.whenReady().then(()=>{
    createWindow()
})