Electron 1.基本流程
...大约 3 分钟
本文旨在创建一个通用的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"));
}
}
Powered by Waline v3.3.0