【Electron学习笔记（三）】Electron的主进程和渲染进程

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：