refactor: 重构background.js

xieerduos · xieerduos · commit f8c0455025df · 2023-11-05T00:34:10.000+08:00
- 抽离创建窗口代码到windows/mainWindow.js中
- tray系统托盘引入的主窗口代码从mainWindow.js中引入
- 更新README.md文档
diff --git a/README.md b/README.md
@@ -1,14 +1,6 @@
 # Electron Template
 
-Electron Template 是一个基于 Electron 框架的开源项目模板，它可以帮助开发者更快地创建 Electron 应用程序。该模板提供了一组常用的功能和结构，如主进程、渲染进程、菜单栏、快捷键、错误处理和日志记录等，以及一些常用的第三方库和工具。使用 Electron Template，开发者可以专注于自己的业务逻辑，而不必从头开始搭建 Electron 应用程序的框架。
-
-主要特点包括：
-
-- 简单易用：使用 Electron Template，开发者可以快速创建一个可运行的 Electron 应用程序，只需几行命令即可完成。
-- 可定制性强：Electron Template 的结构清晰，代码易于理解和修改。开发者可以根据自己的需求，自由地添加、删除、修改功能。
-- 社区支持良好：Electron Template 是一个活跃的开源项目，拥有一个庞大的开发者社区。开发者可以在社区中获取支持和帮助，也可以贡献自己的代码和想法。
-
-总之，如果你需要一个快速创建 Electron 应用程序的模板，Electron Template 是一个不错的选择。
+Electron Template 是一个基于 [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder) 框架的开源项目模板。
 
 ## 基于该模版开发的项目案例
 
@@ -28,8 +20,6 @@ npm install
 npm install --ignore-engines --legacy-peer-deps
 ```
 
-还有问题？ [docs/FrequentlyAskedQuestions.md](docs/FrequentlyAskedQuestions.md)
-
 ### 启动项目
 
 ```
diff --git a/src/main/background.js b/src/main/background.js
@@ -7,63 +7,15 @@ import path from 'path';
 import {handleSetTitle} from '@/main/utils/setTitle.js';
 import {handleFileOpen} from '@/main/utils/openDialog.js';
 
+const {createWindow, setQuitting, getMainWindow} = require('@/main/windows/mainWindow.js');
+
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: {secure: true, standard: true}}]);
 
-const windowManager = {
-  mainWindow: null
-};
-
-let isQuitting = false;
-
-// let mainWindow;
-async function createWindow() {
-  // Create the browser window.
-  windowManager.mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    autoHideMenuBar: true, // 自动隐藏菜单
-    // eslint-disable-next-line no-undef
-    icon: path.join(__static, `icons/${process.platform === 'win32' ? 'win/icon.ico' : 'png/icon.png'}`),
-    webPreferences: {
-      // eslint-disable-next-line no-undef
-      preload: path.join(__dirname, 'mainWindow.js'),
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-    }
-  });
-
-  windowManager.mainWindow.on('show', () => {
-    // windowManager.mainWindow.setSkipTaskbar(false);
-  });
-
-  windowManager.mainWindow.on('close', (event) => {
-    if (!isQuitting) {
-      // 关闭窗口 不退出应用
-      event.preventDefault();
-      windowManager.mainWindow.hide();
-      // mainWindow.setSkipTaskbar(true);
-    }
-    // 如果 isQuitting 为 true，则允许窗口关闭，从而使应用退出
-  });
-
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
-    await windowManager.mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
-    if (!process.env.IS_TEST) windowManager.mainWindow.webContents.openDevTools();
-  } else {
-    createProtocol('app');
-    // Load the index.html when not in development
-    windowManager.mainWindow.loadURL('app://./index.html');
-  }
-}
-
 app.on('before-quit', () => {
-  isQuitting = true;
+  setQuitting(true);
 });
 
 // Quit when all windows are closed.
@@ -76,21 +28,19 @@ app.on('window-all-closed', () => {
 });
 
 app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  } else {
-    if (windowManager.mainWindow && !windowManager.mainWindow.isDestroyed()) {
-      windowManager.mainWindow.show();
-    }
+  const mainWindow = getMainWindow({createIfNotFound: true});
+  if (mainWindow.isMinimized()) {
+    mainWindow.restore();
   }
+  mainWindow.show();
 });
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
+  createProtocol('app');
+
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
     try {
@@ -113,7 +63,7 @@ app.on('ready', async () => {
   // if (process.platform === 'win32') {
   //   sdk.initialize();
   // }
-  tray.initialize(windowManager);
+  tray.initialize();
   settings.initialize();
 
   if (process.platform === 'darwin') {
diff --git a/src/main/tray/index.js b/src/main/tray/index.js
@@ -1,28 +1,24 @@
 const {app, Menu, Tray, ipcMain, nativeImage, screen} = require('electron');
 const path = require('path');
+const {getMainWindow} = require('@/main/windows/mainWindow.js');
 let tray = null;
 
-exports.initialize = function initialize(windowManager) {
-  tray = useTray(windowManager);
+exports.initialize = function initialize() {
+  tray = useTray();
 };
 
-function useTray(windowManager) {
+function useTray() {
   const iconPath = process.platform === 'win32' ? 'win/icon.ico' : 'png/icon.png';
 
   const tray = new Tray(path.join(__static, `icons/${iconPath}`));
 
-  // const tray = new Tray(
-  //   path.join(__static, `icons/${process.platform === 'win32' ? 'win/icon.ico' : 'png/32x32.png'}`)
-  // );
-
   const template = [
     // {label: '退出', role: 'quit'}
     {
       label: '显示主页面',
       click: () => {
-        if (windowManager.mainWindow && !windowManager.mainWindow.isDestroyed()) {
-          windowManager.mainWindow.show();
-        }
+        const mainWindow = getMainWindow({createIfNotFound: true});
+        mainWindow.show();
       }
     },
     {
@@ -34,9 +30,10 @@ function useTray(windowManager) {
     {
       label: '退出',
       click: () => {
-        if (windowManager.mainWindow && !windowManager.mainWindow.isDestroyed()) {
+        const mainWindow = getMainWindow({createIfNotFound: false});
+        if (mainWindow && mainWindow.isDestroyed()) {
           // 1. 销毁主窗口
-          windowManager.mainWindow.destroy();
+          mainWindow.destroy();
         }
         // 2. 退出应用
         app.quit();
@@ -52,9 +49,8 @@ function useTray(windowManager) {
     if (process.platform === 'darwin') {
       tray.popUpContextMenu();
     } else {
-      if (windowManager.mainWindow && !windowManager.mainWindow.isDestroyed()) {
-        windowManager.mainWindow.show();
-      }
+      const mainWindow = getMainWindow({createIfNotFound: true});
+      mainWindow.show();
     }
   };
 
diff --git a/src/main/windows/mainWindow.js b/src/main/windows/mainWindow.js
@@ -0,0 +1,85 @@
+const {BrowserWindow} = require('electron');
+const path = require('path');
+const log = require('@/main/log/index.js');
+
+let isQuitting = false;
+let mainWindow;
+async function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    autoHideMenuBar: true, // 自动隐藏菜单
+    show: false,
+    // eslint-disable-next-line no-undef
+    icon: path.join(__static, `icons/${process.platform === 'win32' ? 'win/icon.ico' : 'png/icon.png'}`),
+    webPreferences: {
+      // eslint-disable-next-line no-undef
+      preload: path.join(__dirname, 'mainWindow.js'),
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
+    }
+  });
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  mainWindow.on('close', (event) => {
+    if (!isQuitting) {
+      // 关闭窗口 不退出应用
+      event.preventDefault();
+      mainWindow.hide();
+      // mainWindow.setSkipTaskbar(true);
+    }
+    // 如果 isQuitting 为 true，则允许窗口关闭，从而使应用退出
+  });
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+
+  mainWindow.webContents.on('render-process-gone', (event, details) => {
+    // 将窗口渲染进程崩溃事件的详细信息记录到日志文件
+    log.error('Window render process crashed', {
+      reason: details.reason,
+      exitCode: details.exitCode
+    });
+  });
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
+    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools();
+  } else {
+    // Load the index.html when not in development
+    mainWindow.loadURL('app://./index.html');
+  }
+
+  return mainWindow;
+}
+
+function setQuitting(value) {
+  isQuitting = value;
+}
+function getQuitting() {
+  return isQuitting;
+}
+
+function getMainWindow({createIfNotFound} = {createIfNotFound: true}) {
+  // 不存在则会创建窗口
+  if (createIfNotFound && (!mainWindow || (mainWindow && mainWindow.isDestroyed()))) {
+    return createWindow();
+  }
+
+  return mainWindow;
+}
+
+module.exports = {
+  createWindow,
+  getMainWindow,
+  setQuitting,
+  getQuitting
+};
