Electron 主进程与渲染进程、预加载preload.js

在 Electron 中,主要控制两类进程: 主进程渲染进程

Electron 应⽤的结构如下图:

如果需要更深入的了解electron进程,可以访问官网 流程模型 文档。

主进程

  • 每个 Electron 应用都有一个单一的主进程,作为应用程序的入口点(主进程具有唯一性)。任何 Electron 应用程序的入口都是 main 文件,负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。
  • 主进程在 Node.js 环境中运行,它具有 require 模块和使⽤所有 Node.js API 的能力。
  • 主进程的核心:使用 BrowserWindow 来创建和管理应用程序窗口。

main.js 中,打印:

typescript 复制代码
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

typescript 复制代码
console.log(window)

报错:window is not defined...

渲染进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名,渲染器负责 渲染 网页内容。

  • 每个 BrowserWindow 实例都对应⼀个单独的渲染进程。
  • 一个 Electron 窗口可以包含一个或多个渲染进程,每个渲染进程负责渲染网页内容并执行网页中的 JavaScript 代码。(关系类似于 浏览器、浏览器中的标签页)
  • 运行在渲染器进程中的代码,必须遵守网页标准。这意味着 渲染进程无权直接访问 require 或 使用 任何 Node.js API。
  • 渲染进程主要负责呈现用户界面、响应用户交互、执行网页中的业务逻辑等。

pages/index.html 中:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-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 中:

typescript 复制代码
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)脚本 在渲染器进程加载之前加载,并有权访问两个 渲染器全局 (例如 windowdocument) 和 Node.js 环境。

预加载(preload)脚本是运行在渲染器进程中的,但它是在网页内容加载之前执行的。 这意味着它具有比普通渲染器更高的权限,可以访问 Node.js API ,同时也可以与网页内容进行更安全的交互。

创建一个名为 preload.js 的新脚本如下:

typescript 复制代码
// contextBridge:在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
const {contextBridge} = require('electron')

// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('aaaAPI', {
  version: process.version,
  versions: process.versions,
  num: 666
})

在主线程中引⼊ preload.js

typescript 复制代码
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 页面展示版本信息:

typescript 复制代码
let nodeDom = document.getElementById('node-version')
let chromeDom = document.getElementById('chrome-version')
let electronDom = document.getElementById('electron-version')

const { node, chrome, electron } = aaaAPI.versions

nodeDom.innerHTML = node
chromeDom.innerHTML = chrome
electronDom.innerHTML = electron

查看应用窗口渲染结果:

现在,项目的目录结构如下图所示:

注意: 预加载(preload)脚本只能访问部分 Node.js API,但是主进程可以访问全部API。此时,需要使用进程通信。

相关推荐
Json_181790144808 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网31 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020433 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing35 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月38 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript