Electron 1.基本流程

本文旨在创建一个通用的Electron项目需要的流程(main.js)，并对代码逐行解析
详细请见Electron 官网

main.js

导入（选择必要的项目）

import {
  app, //应用
  BrowserWindow, //窗口
  ipcMain, //通信
  Menu, //菜单
  nativeImage, //加载图片
  shell, //打开外部链接
  session, //会话 加载插件
  dialog, //对话框 文件选择框
  Notification, //通知
  Tray, //托盘
  globalShortcut, //快捷键
} from "electron";
import { electronApp, optimizer, is } from "@electron-toolkit/utils"; //electron工具包
import path from "node:path"; //路径处理
import icon from "../../resources/icon.png?asset"; //图标路径

流程

//初始化存储用户数据的文件/文件夹
initFile();

//应用加载完毕时
app.whenReady().then(async () => {
  //为窗口设置用户模型ID
  electronApp.setAppUserModelId("com.example.app");

  //加载vue插件 （调试状态）
  const vueDevToolsPath = path.resolve("./extensions/vue-devtools"); //必须绝对路径
  if (is.dev) await session.defaultSession.loadExtension(vueDevToolsPath);

  //使用F12打开开发者工具 （调试状态）
  app.on("browser-window-created", (_, window) => {
    optimizer.watchWindowShortcuts(window);
  });

  //添加事件监听
  addEventListener();

  //创建主窗口
  createWindow();

  //初始化托盘
  initTray();

  app.on("activate", function () {
    // 在 macOS 上，当点击 Dock 图标且没有其他窗口打开时，通常会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 当所有窗口都关闭时退出，除了 macOS。
// 在 macOS 上，应用程序及其菜单栏通常会保持活动状态，直到用户明确使用 Cmd + Q 退出。
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.
// 在这个文件中，您可以包含应用程序的主要进程代码的其余部分。
// 您也可以将它们放在单独的文件中，并在此处进行引用。

创建窗口

function createWindow(): void {
  mainWindow = new BrowserWindow({
    width: 400, //默认宽度
    height: 600, //默认高度
    minWidth: 350, //最小宽度
    minHeight: 350, //最小高度
    show: false, //创建后是否立即显示
    autoHideMenuBar: true, //是否隐藏菜单栏
    frame: false, //是否显示系统默认的窗口边框
    transport: false, //是否为透明窗口
    ...(process.platform === "linux" ? { icon } : {}),
    webPreferences: {
      preload: path.join(__dirname, "../preload/index.js"), //预加载脚本 必须绝对路径
      devTools: is.dev, //禁用开发者工具
      webSecurity: false, //关闭安全策略 如允许加载本地文件
      sandbox: false, //是否弃用沙箱模式 （默认启用）
      nodeIntegration: false, //是否允许网页使用node.js环境（不推荐）
    },
  });
  Menu.setApplicationMenu(null); //清空菜单栏 节约内存
  // if (is.dev) mainWindow.webContents.openDevTools({ mode: "detach" }); // 打开开发工具

  mainWindow.on("ready-to-show", () => {
    mainWindow!.show(); //显示窗口
    initThumbnailToolbar(); //初始化缩略图工具栏（必须在窗口show显示之后调用）
  });

  //使用外部浏览器打开新窗口网址
  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url);
    return { action: "deny" };
  });

  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  // 调试状态 加载服务器网址
  // 生产模式 加载本地文件
  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
  } else {
    mainWindow.loadFile(path.join(__dirname, "../renderer/index.html"));
  }
}