5分钟 electron 入门

番茄钟应用

在一个番茄钟应用中，主进程和渲染进程要做什么？

从上方的进程工作内容可以发现，有些进程工作内容不仅仅是番茄应用会用到，其实所有应用都会用到。这些是一个应用基本通用的。
比如主进程 app 模块管理应用、BrowserWindow 模块创建窗口，进程间通信。

起步

安装

npm install electron --save-dev

初始化

npm init -y

package.json 的 main 字段指定的是 Electron 应用的入口文件，就像 vite 构建 SPA 的入口文件是 html 一样。因此这个入口文件很重要，它就是主进程。
author、license 和 description可为任意值，但对于应用打包是必填项。

启动 electron 项目

electron .

这个命令会找到入口文件并执行。

通常我们会设为一个 script 脚本来使用：

{
   
  "scripts": {
   
    "dev": "electron .",
  }
}

nodemon 启动项目

开发的时候，频繁手动启停应用很麻烦。我们可以借助 nodemon 自动监听文件更改，执行electron . 命令。

• https://github.com/remy/nodemon#nodemon

nodemon 可以监听文件变动，并执行命令。
它有几个主要配置：

• –watch：监听的文件，默认为*.*，也就是当前目录的所有文件
• –ext：监听的文件后缀，默认为 js，mjs，html
• –ignore：忽略监听，默认已经忽略常见的应该忽略的文件，如 node_module
• –exec：执行命令，默认可以执行 js 脚本。
• –delay：延迟启动。默认情况下当它检测到文件更改时就会立即重启你的应用程序。然而，如果你想要控制 nodemon 的重启频率，以避免在保存文件时过于频繁地重启（例如，当你正在进行大量编辑时），你可以使用 --delay（简写为 -d）选项来设置重启延迟。-d 1.5 ：延迟1.5秒启动

nodemon 最终会监听的文件规则：
nodemon 会先读取 watch 里面需要监听的文件或文件路径，再从文件中选择监控 ext 中指定的后缀名，最后去掉从 ignore 中指定的忽略文件或文件路径。

electron 项目中，nodemon 已经监听了 js，但没有 html。我们希望改了 html，也能重新启动，所以要加上后缀为 html 的文件监听。

{
   
  "scripts": {
   
    "dev": "nodemon --ext js,html,json --delay 1.5 --exec electron ."
  }
}

当然如果配置项太多，也可以单独添加一个配置文件：

{
   
  "ext": "js,html,json",
  "delay": "1.5"
}

主进程 app 和窗口管理 BrowserWindow

app 、BrowserWindow

// 主进程
const {
    app, BrowserWindow } = require("electron");

我们使用 CommonJS 语法导入了两个 Electron 的核心模块：

• app，它就是主进程，控制您应用程序的事件生命周期。
• BrowserWindow，它负责创建和管理应用窗口。

您可能注意到了 app 和 BrowserWindow 两个模块名的大小写差异。 Electron 遵循 JavaScript 传统约定，以帕斯卡命名法 (PascalCase) 命名可实例化的类 (如 BrowserWindow, Tray 和 Notification)，以驼峰命名法 (camelCase) 命名不可实例化的函数、变量等 (如 app, ipcRenderer, webContents) 。

// 为了更好做类型检查，如使用ts。则从 electron/main 中引入
const {
    app, BrowserWindow } = require('electron/main')

Electron 的许多核心模块都是 Node.js 的事件触发器，遵循 Node.js 的异步事件驱动架构。 app 模块就是其中一个。
node 事件与异步 IO 模型
Events | Node.js v21.6.2 Documentation

// node.js 自定义事件
const EventEmitter = require('events');

const myEmitter = new EventEmitter();

myEmitter.on('test', () => {
   
  console.log('test event occurred');
});

myEmitter.emit('test');

ready 事件

在 app 模块的事件中，ready 事件最为重要。它被触发了，说明主线程启动完毕了，这时候才可以创建 BrowserWindows 实例，也就是建立窗口界面。

通常我们使用触发器的 .on 函数来监听 Node.js 事件。但是 ready 事件特殊一点，Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。

app.on('ready', () => {
   })
  
app.whenReady().then(() => {
   })

在 Electron 中，只有在 app 模块的 ready 事件触发后才能创建 BrowserWindows 实例。 您可以通过使用 app.whenReady() API 来监听此事件，并在其成功后调用 createWindow() 方法。

const {
    app, BrowserWindow } = require('electron/main')

const createWindow = () => {
   
  // 新建窗口
  const win = new BrowserWindow({
   
    // 窗口大小
    width: 800,
    height: 600,
    // 窗口出现位置，默认是居中出现
    x: 1500,
    y: 200,
    // 窗口置顶，方便开发时查看
    alwaysOnTop: true
  })

  // 装载 UI 界面
  win.loadFile