3.4 预加载脚本
预加载脚本在渲染进程加载前执行，允许在渲染器上下文中暴露自定义 API，并提供与主进程安全通信的桥梁。使用预加载脚本可以提高应用的安全性，尤其是在启用了 contextIsolation 的情况下。
3.4.1 创建预加载脚本
预加载脚本在 webPreferences 中指定。以下是一个简单的预加载脚本示例：
示例代码
preload.js：
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {sendMessage: (message) => ipcRenderer.send('message', message),onMessage: (callback) => ipcRenderer.on('reply', (event, args) => callback(args))
});
主进程：
const { app, BrowserWindow } = require('electron');
const path = require('path');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();}
});
渲染进程：
<!DOCTYPE html>
<html><head><title>IPC Example with Preload</title></head><body><h1>Check the console</h1><script>window.electronAPI.sendMessage('Hello from renderer');window.electronAPI.onMessage((message) => {console.log(message); // 输出 'Hello from main'});</script></body>
</html>
通过使用预加载脚本，你可以确保在
渲染进程中暴露的 API 是受控且安全的。这种方法特别适用于在启用了 contextIsolation 时，确保主进程与渲染进程之间的通信安全。
3.5 进程间通信（IPC）
IPC 是主进程和渲染进程之间进行通信的重要机制。Electron 提供了 ipcMain 和 ipcRenderer 模块来实现进程间通信。
3.5.1 ipcMain 模块
ipcMain 模块在主进程中使用，用于接收渲染进程发送的消息并进行处理。
示例代码
const { ipcMain } = require('electron');ipcMain.on('message', (event, arg) => {console.log(arg); // 输出 'Hello from renderer'event.reply('reply', 'Hello from main');
});
3.5.2 ipcRenderer 模块
ipcRenderer 模块在渲染进程中使用，用于发送消息到主进程和接收主进程的回复。
示例代码
<!DOCTYPE html>
<html><head><title>IPC Example</title></head><body><h1>Check the console</h1><script>const { ipcRenderer } = require('electron');ipcRenderer.send('message', 'Hello from renderer');ipcRenderer.on('reply', (event, arg) => {console.log(arg); // 输出 'Hello from main'});</script></body>
</html>
3.6 使用 contextBridge 提高安全性
在启用了 contextIsolation 的情况下，可以使用 contextBridge 模块来暴露安全的 API 给渲染进程。这可以防止渲染进程直接访问 Node.js 的功能，从而提高安全性。
3.6.1 contextBridge 示例
使用 contextBridge 将安全的 API 暴露给渲染进程。
示例代码
preload.js：
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {sendMessage: (message) => ipcRenderer.send('message', message),onMessage: (callback) => ipcRenderer.on('reply', (event, args) => callback(args))
});
主进程：
const { app, BrowserWindow } = require('electron');
const path = require('path');let mainWindow;const createWindow = () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),contextIsolation: true // 启用上下文隔离}});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();}
});
渲染进程：
<!DOCTYPE html>
<html><head><title>Context Bridge Example</title></head><body><script>window.electronAPI.sendMessage('Hello from renderer');window.electronAPI.onMessage((message) => {console.log(message); // 输出 'Hello from main'});</script></body>
</html>
通过本章内容，你已经了解了 Electron 的核心概念，包括主进程和渲染进程的角色与功能、预加载脚本的使用、以及如何通过 IPC 进行进程间通信，并且在启用 contextIsolation 时，使用 contextBridge 提高应用的安全性。在接下来的章节中，我们将深入探讨如何实现更多高级功能和最佳实践，帮助你进一步掌握 Electron 开发。
