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();
}
});
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>
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', () => {
// 清理工作
});
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);
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);
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>
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>
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');
});
渲染进程:
<!DOCTYPE html>
<html>
<head>
<title>IPC Example</title>
</head>
<body>
<h1>Check the console</h1>
<script>
//这里通过预加载脚本里暴露出的全局属性进行通信
</script>
</body>
</html>