Electron之单例+多窗口

Electron之单例+多窗口

Electron 24 + React 18

单例可以通过app.requestSingleInstanceLock实现，多窗口可以简单通过路由来实现

单例

const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    const args = commandLine;
    const route = args.length > 2 ? args[2] : '';
    const preWnd = BrowserWindow.getAllWindows().find((e) => e.title === route);
    if (!preWnd) {
      createWindow(route);
    } else {
      const wnd = BrowserWindow.fromId(preWnd.id);
      if (wnd) {
        if (wnd.isMinimized()) {
          wnd.restore();
        };
        wnd.focus();
      }
    }
  });
  app.whenReady().then(() => {
    electronApp.setAppUserModelId('electron');

    app.on('browser-window-created', (_, window) => {
      optimizer.watchWindowShortcuts(window);
    });

    const args = process.argv.splice(app.isPackaged ? 1 : 2);
    let route = args.length > 0 ? args[0] : 'home';

    createWindow(route);

    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
  });
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• whenReady时创建初始化窗口
• second-instance时处理重复打开操作

多窗口

const createWindow = (route: string = 'home') => {
  const windowConfig = getWindowConfig(route);
  const window = new BrowserWindow({
    title: windowConfig.title,
    width: windowConfig.width,
    height: windowConfig.height,
    show: false,
    frame: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      devTools: !app.isPackaged,
      nodeIntegration: true,
      contextIsolation: false,
      partition: `persist:${new Date().getTime()}`
    }
  });

  window.on('ready-to-show', () => {
    window.show();
  });

  window.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url);
    return { action: 'deny' };
  });

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    window.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/index.html#/${route}`);
  } else {
    window.loadFile(join(__dirname, `../renderer/index.html`), { hash: `/${route}` });
  }

  return window;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    
      
      } />
        } />
        } />
      
    
1
2
3
4
5
6
7

• 通过唯一title区分窗口，动态创建新窗口或恢复旧窗口
• 这里前端部分使用react 18 + react-router-dom 6，注意要使用HashRouter