第3章：Electron的核心概念(1)

作者：天景科技苑 | 2024-08-02 02:39:27

踩

3.1 主进程与渲染进程

Electron 应用由两个主要部分组成：主进程和渲染进程。这两个进程各自有不同的职责和功能，但它们通过 IPC（进程间通信）机制进行交互。

3.1.1 主进程

主进程（Main Process）是 Electron 应用的入口。它负责管理应用的生命周期、创建和管理窗口，以及处理与操作系统的交互。每个 Electron 应用只有一个主进程。

创建窗口：主进程负责创建和管理所有应用窗口。
处理系统事件：主进程处理应用启动、关闭等系统事件。
与操作系统交互：主进程可以调用操作系统的原生功能，例如文件系统操作、通知等。

示例代码

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

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')  // 指定预加载脚本
    }
  });

  mainWindow.loadFile('index.html');
};

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  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

3.1.2 渲染进程

渲染进程（Renderer Process）负责显示和渲染应用的用户界面。每个 Electron 窗口都有一个独立的渲染进程，运行在 Chromium 的沙盒环境中。

渲染 HTML 和 CSS：渲染进程负责将 HTML 和 CSS 转换为用户界面。
处理用户交互：渲染进程处理用户的输入和交互，例如鼠标点击和键盘输入。
与主进程通信：渲染进程通过 IPC 机制与主进程通信。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
    <script>
      window.electronAPI.sendMessage('Hello from renderer');
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

3.2 主进程的角色和功能

主进程在 Electron 应用中扮演着核心角色，负责管理应用的整个生命周期，并与操作系统进行交互。

3.2.1 应用生命周期管理

主进程管理应用的启动、退出等生命周期事件。

ready：当 Electron 完成初始化并准备创建窗口时触发。
window-all-closed：当所有窗口关闭时触发，通常在此事件中退出应用（除非在 macOS 上）。
before-quit：在应用开始退出时触发，可以在此事件中执行一些清理工作。

示例代码

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('before-quit', () => {
  // 清理工作
});
1
2
3
4
5
6
7
8
9
10
11

3.2.2 窗口管理

主进程负责创建和管理应用的所有窗口，可以根据需要创建多个窗口。

BrowserWindow：创建和管理窗口的类。

示例代码

const createWindow = () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')  // 指定预加载脚本
    }
  });

  win.loadFile('index.html');
};

app.on('ready', createWindow);
1
2
3
4
5
6
7
8
9
10
11
12
13

3.2.3 系统交互

主进程可以访问 Node.js API 和操作系统的原生功能，例如文件系统、通知、剪贴板等。

示例代码

const { Notification } = require('electron');

const showNotification = () => {
  new Notification({
    title: 'Hello',
    body: 'This is a notification'
  }).show();
};

app.on('ready', showNotification);
1
2
3
4
5
6
7
8
9
10

3.3 渲染进程的角色和功能

渲染进程主要负责渲染用户界面和处理用户交互。它运行在 Chromium 环境中，具有完整的浏览器功能。

3.3.1 渲染 HTML 和 CSS

渲染进程将 HTML 和 CSS 转换为用户界面，显示在应用窗口中。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Electron</title>
    <style>
      body { font-family: Arial, sans-serif; }
      h1 { color: #333; }
    </style>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.3.2 处理用户交互

渲染进程处理用户的输入和交互，如鼠标点击、键盘输入等。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>Counter</title>
  </head>
  <body>
    <button id="counterBtn">Click me</button>
    <p id="count">0</p>
    <script>
      let count = 0;
      document.getElementById('counterBtn').addEventListener('click', () => {
        count++;
        document.getElementById('count').innerText = count;
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.3.3 与主进程通信

渲染进程通过 IPC（进程间通信）机制与主进程通信，发送和接收消息。

示例代码

主进程：

const { ipcMain } = require('electron');

ipcMain.on('message', (event, arg) => {
  console.log(arg); // 输出 'Hello from renderer'
  event.reply('reply', 'Hello from main');
});
1
2
3
4
5
6

渲染进程：

<!DOCTYPE html>
<html>
  <head>
    <title>IPC Example</title>
  </head>
  <body>
    <h1>Check the console</h1>
    <script>
    //这里通过预加载脚本里暴露出的全局属性进行通信
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/916917