Electron笔记之主进程和渲染进程(一)

本文介绍了Electron的基础知识，强调了主进程和渲染进程的角色与区别。在 Electron 中，主进程负责创建 BrowserWindow 实例，而渲染进程在每个窗口中运行web页面。由于渲染进程不能直接访问Node.js API，故需要通过特定方式进行通信，如IPC。文章通过解决React与Electron线程间通信的问题，展示了如何创建和修改文件，并提供了在React组件中使用Electron通信的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron简介

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

这幅图解释的很清楚了，单对于初学者的我来说还需要深入理解。

主进程和渲染进程

刚刚接触 Electron 的时候项目需要写一个客户端程序，需要保存一些配置数据在本地，当应用程序开启时读取配置文件。问题来了？如何用基于reactjs写的工程对pc机文件进行读写？解题思路是用antd+dva写的界面程序（渲染进程）然后将打包后的结果放入了Electron工程中（主进程）。

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程：使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

渲染进程：主进程管理所有的web页面和它们对应的渲染进程。每个渲染进程都是独立的，它只关心它所运行的 web 页面

在 Electron 中, 我们有几种方法可以在主进程和渲染进程之间进行通信。例如使用ipcRenderer和ipcMain模块发送消息，或使用remote模块进行 RPC 方式的通信。

通信配置

Create-react-app与Electron中线程间的通信

之前，将create-react-app与electron集成在了一个项目中。但是在React中无法使用electron。

当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误。因为React中无法使用Node.js的模块.

解决方案如下

创建`renderer.js`文件

在项目public/目录下新建renderer.js文件,该文件是预加载的js文件，并且在该文件内可以使用所有的Node.js的API。在renderer.js中添加

global.electron = require('electron')

修改`main.js`文件

修改创建浏览器的入口代码,添加preload配置项。将renderer.js作为预加载文件

win = new BrowserWindow({
    width: 800, 
    height: 600,
    autoHideMenuBar: true,
    fullscreenable: false,
    webPreferences: {
        javascript: true,
        plugins: true,
        nodeIntegration: false, // 不集成 Nodejs
        webSecurity: false,
        preload: path.join(__dirname, './public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API
    }
  })

修改`piblic/index.html`文件

在<div id="root"></div>前引入renderer.js文件

<script>require('./renderer.js')</script>
<div id="root"></div>

在React组件中如下使用`electron`

const electron = window.electron;

主进程和渲染进程通信

首先渲染进程中添加一个点击事件触发ipcRenderer

 
  gotoCardUtilAcitvity = () 
  => {
 
  const 
  ipcRenderer = 
  window.
  electron.
  ipcRenderer;
 
  ipcRenderer.
  on(
  'born', (
  event, 
  person) 
  => {
 
  console.
  log(
  person, 
  'born') 
  // 输出 "harttle born"
 
   });
 
  ipcRenderer.
  send(
  'create', 
  'snowtest')
 
  console.
  log(
  "snow",
  "11111");
 
   }

其次主进程中添加main.js

  const { 
  ipcMain } = 
  require(
  'electron')
 
  ipcMain.
  on(
  'create', (
  event, 
  person) 
  => {
 
   console.log('creating', person) // 输出："creating snowtest"
 
   });