天津站建站时间中国景观设计网
在 Electron 中，主要控制两类进程： 主进程 、 渲染进程 。
Electron 应⽤的结构如下图：
如果需要更深入的了解electron进程，可以访问官网 流程模型 文档。
主进程
- 每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点（主进程具有唯一性）。任何 Electron 应用程序的入口都是
main文件，负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。 - 主进程在 Node.js 环境中运行，它具有
require模块和使⽤所有 Node.js API 的能力。 - 主进程的核心：使用
BrowserWindow来创建和管理应用程序窗口。
在 main.js 中，打印:
console.log(__dirname)
console.log('node版本：', process.versions.node)
console.log('chrome版本：', process.versions.chrome)
console.log('electron版本：', process.versions.electron)
在终端中输入结果如下：
注意：在主进程中执行的console.log()语句，都在vs code 的终端中输出，不会在electron 应用中打印。
在 main.js 中，打印 window：
console.log(window)
报错：window is not defined…
渲染进程
每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名，渲染器负责 渲染 网页内容。
- 每个
BrowserWindow实例都对应⼀个单独的渲染进程。 - 一个 Electron 窗口可以包含一个或多个渲染进程，每个渲染进程负责渲染网页内容并执行网页中的 JavaScript 代码。（关系类似于 浏览器、浏览器中的标签页）
- 运行在渲染器进程中的代码，必须遵守网页标准。这意味着 渲染进程无权直接访问
require或 使用 任何 Node.js API。 - 渲染进程主要负责呈现用户界面、响应用户交互、执行网页中的业务逻辑等。
在 pages/index.html 中：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1>We are using Node.js <span id="node-version"></span>, Chromium<span id="chrome-version"></span>, and Electron<span id="electron-version"></span>.</body><script src="./render.js"></script>
</html>在 pages/render.js 中：
console.log(window)
console.log(process)
在应用窗口中查看打印结果：
window能成功打印，console.log(process)报错：process is not defined…
在 pages/render.js 中，不能访问 Node.js API。那么，该如何实现在index.html中展示chrome、node、electron的版本呢？
处于渲染器进程的用户界面，该怎样才与 Node.js 和 Electron 的原生桌面功能进行交互？
通过预加载脚本从渲染器访问Node.js
预加载（preload）脚本在 Electron 应用中起着重要的桥梁作用，它允许渲染进程安全地与主进程进行交互，同时增强了应用的安全性和性能。
预加载（preload）脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
预加载（preload）脚本是运行在渲染器进程中的，但它是在网页内容加载之前执行的。 这意味着它具有比普通渲染器更高的权限，可以访问 Node.js API ，同时也可以与网页内容进行更安全的交互。
创建一个名为 preload.js 的新脚本如下：
// contextBridge：在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
const {contextBridge} = require('electron')// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('aaaAPI', {version: process.version,versions: process.versions,num: 666
})
在主线程中引⼊ preload.js：
const { app, BrowserWindow } = require('electron')
// 导入 Node.js 的 path 模块
const path = require('node:path')// 修改已有的 createWindow() 方法
function createWindow() {const win = new BrowserWindow({width: 500, // 窗口宽度height: 300, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, 'preload.js')}});// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');
}
执行npm start，启动应用，打开应用的控制台。
可以看到pages/render.js打印的window：
完善pages/render.js，在渲染进程中使用versions，实现在 pages/index.html 页面展示版本信息：
let nodeDom = document.getElementById('node-version')
let chromeDom = document.getElementById('chrome-version')
let electronDom = document.getElementById('electron-version')const { node, chrome, electron } = aaaAPI.versionsnodeDom.innerHTML = node
chromeDom.innerHTML = chrome
electronDom.innerHTML = electron
查看应用窗口渲染结果：
现在，项目的目录结构如下图所示：
注意： 预加载（preload）脚本只能访问部分 Node.js API，但是主进程可以访问全部API。此时，需要使用进程通信。