乐趣区

关于electron:Electron-主进程和渲染进程

jiezi

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

过程（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/

退出移动版