Electron 主进程和渲染进程

本节咱们来学习什么是主进程和渲染进程，主进程与渲染进程之间有什么区别，主进程和渲染进程之间的通讯。下面咱们先来看一下进程的概念。

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操做系统结构的基础。

什么是主进程

在 Electron 中，启动项目时运行的 main.js 脚本就是咱们说的主进程。在主进程运行的脚本能够以建立 web 页面的形式展现 GUI。

一个 Electron 应用有且只有一个主进程。而且建立窗口等全部系统事件都要在主进程中进行。

什么是渲染进程

因为 Electron 使用 Chromium 来展现页面，因此 Chromium 的多进程结构也被充分利用。每一个 Electron 的页面都在运行着本身的进程，这样的进程咱们称之为渲染进程。

也就是说每建立一个 web 页面都会建立一个渲染进程。每一个 web 页面都运行在它本身的渲染进程中。每一个渲染进程是独立的，它只关心它所运行的页面。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例建立网页。每一个 BrowserWindow 实例都在本身的渲染进程中运行。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理全部页面和与之对应的渲染进程。每一个渲染进程都是相互独立的，而且只关心他们本身的网页。

使用Electron的API

Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序， 在主进程和渲染进程中，能够经过require() 方法将其包含在模块中，以此获取 Electron 的 API。

引入 electron：

const electron = require('electron');

全部 Electron 的 API 都被指派给一种进程类型。许多 API 只能被用于主进程或渲染进程中，但其中一些 API 能够同时在上述两种进程中使用。 每个 API 的文档都将声明咱们能够在哪一种进程中使用该 API 。

Electron 中的窗口是使用 BrowserWindow 类型建立的一个实例， 它只能在主进程中使用，以下所示：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

主进程和渲染进程之间通讯

Electron 的主进程是在后台运行，对应 main.js 文件。而渲染进程是前端看到的，对应 index.html 文件。这个两个进程之间的通讯首选 ipc 方式，由于它会在完成时返回，而不会阻止同一进程中的其余操做。

异步通讯

异步通讯，在发送消息以后，不会阻止同一进程中程序的继续运行。下列示例渲染进程发送异步消息 ping 到主进程，而后主进程回答 pong。

示例：

渲染器进程：

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `异步消息回复: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

主进程：

const ipc = require('electron').ipcMain

ipc.on('asynchronous-message', function (event, arg) {
  event.sender.send('asynchronous-reply', 'pong')
})

同步消息

除了以异步方式在进程之间发送消息，咱们还可使用 ipc 模块在进程之间发送同步消息，可是此方法的同步特性意味着它在完成任务时会阻止其余操做。

示例：

渲染器进程：

const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `同步消息回复: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

主进程：

const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

连接：https://www.9xkd.com/