【Electron学习笔记（三）】Electron的主进程和渲染进程
Electron的主进程和渲染进程
- Electron的主进程和渲染进程
- 前言
- 正文
- 1、主进程
- 2、渲染进程
- 3、Preload 脚本
- 3.1 在项目目录下创建 preload.js 文件
- 3.2 在 main.js 文件下创建路径变量并将 preload.js 定义为桥梁
- 3.3 在 preload.js 文件下使用 electron 提供的contextBridge 模块
- 3.4 在 render.js 文件下调用 contextBridge
Electron的主进程和渲染进程
前言
在Electron应用开发中，主进程与渲染进程的协作至关重要。Electron基于Chromium和Node.js，让开发者用Web技术构建跨平台桌面应用。为确保安全与性能，Electron采用主进程和渲染进程分离架构。主进程管理应用生命周期、窗口及原生功能，渲染进程则负责显示用户界面。两者通过IPC机制通信，实现数据共享与功能调用。Preload脚本在渲染进程加载前注入代码，安全暴露必要API，避免直接暴露Node.js环境。本文将深入解析这一机制，探讨两者工作原理与安全通信方法。
笔记源于：禹神：一小时快速上手Electron，前端Electron开发教程
正文
1、主进程
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点，主进程在 Node.js 环境中运行，它具有 require 模块和使用所有 Node.js API 的能力，主进程的核心就是：使用 BrowerWindow 来创建和管理窗口
2、渲染进程
每个 BrowerWindow 实例都对应一个单独的渲染器进程，运行在渲染器进程中的代码，必须遵循网页标准，这也就意味着：渲染器进程无权直接访问 require 或使用任何 Node.js 的API
3、Preload 脚本
预加载（Preload）脚本是运行在渲染进程中的，但它是在网页内容加载之前执行的，这意味着它具有比普通渲染器代码更高的权限，可以访问 Node.JS 的 API，同时又可以与网页内容进行安全的交互。
简单地说：它是 Node.JS 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.JS 功能暴露给网页，从而减少安全风险。
3.1 在项目目录下创建 preload.js 文件
在 main.js 的同级目录下创建
3.2 在 main.js 文件下创建路径变量并将 preload.js 定义为桥梁
- 获取所在路径：
const path = require('path') - 设置 webPreferences 属性将 preload.js 定义为桥梁：
webPreferences{preload:path.resolve(__dirname,"./preload.js")}
3.3 在 preload.js 文件下使用 electron 提供的contextBridge 模块
console.log("preload",process.version)
const {contextBridge} = require("electron")
contextBridge.exposeInMainWorld('myAPI',{
version:process.version
})
3.4 在 render.js 文件下调用 contextBridge
const btn1=document.getElementById("btn1")
console.log("render")
// 绑定点击事件
btn1.onclick=()=>{
// alert("已弹出")
alert(myAPI.version)
}
至此，我们可以通过渲染进程访问 require 或使用 Node.js 的API：