本文主要讲解上一章节提到的主进程与渲染进程的概念，以及它们是如何被使用的
如果对文章的内容有任何疑问或吐槽，请直接在下方评论，大家共同学习和改进
阅读时间：约4min
Основной процесс и процесс рендеринга
Давайте рассмотрим базовую структуру каталогов, приведенную в главе «Структура каталогов программ».
app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程
├─components---------------通用组件模块
├─store--------------------数据共享模块
├─statics------------------静态资源模块
└─src----------------------窗口业务模块
├─窗口A----------------窗口
└─窗口B----------------窗口
В приведенной выше структуре каталоговmain.js就是我们所说的主进程。 и черезbrowserWindowsПроцесс, созданный файлом окна в каталоге, называется процессом рендеринга. Процесс рендеринга должен быть создан основным процессом и управляться основным процессом. Здесь у вас могут возникнуть вопросы, что такое процесс? Зачем разделять основной процесс и процесс рендеринга?
концепция процесса
Много знаний, связанных с компьютерными процессами, можно найти в поисковых системах, и мы не будем здесь слишком много объяснять. Читатель может понять процесс как базовую единицу операционной системы для управления прикладной программой, и ресурсы между каждым процессом не могут быть разделены напрямую. Откройте диспетчер задач операционной системы, мы увидим, что текущая операционная система имеет эти процессы, как показано ниже.
основной процесс
Оглядываясь назад на прошлые веб-разработки, наш код, будь то HTML, CSS или Javascript, работает в песочнице браузера, мы не можем получить доступ к ресурсам самой системы за рамками полномочий браузера и возможностей кода. ограничено в браузере. Браузеры делают это из соображений безопасности. Представьте, что когда мы используем браузер, мы будем открывать множество веб-сайтов из разных источников.Если код JavaScript имеет возможность доступа и манипулирования ресурсами локальной операционной системы, как это будет ужасно. Однажды вы случайно открываете вредоносный веб-сайт, и ваши файлы на жестком диске могут быть украдены (нет необходимости чинить компьютер).
Но то, что мы хотим разработать, это настольное приложение, если вы не можете получить доступ к локальным ресурсам, оно точно не будет работать. Electron умело интегрирует nodejs, делая nodejs управляющим всей программы. Очиститель имеет высокие разрешения, может получать доступ к локальным ресурсам и управлять ими, а также использовать высокоуровневые API, которые изначально не предусмотрены в браузере. В то же время экономка также управляет созданием и уничтожением окна процесса рендеринга. Итак, мы называем этого стюарда主进程.在使用Electron开发的程序中，会使用main.js作为程序的主入口，该文件内代码执行的内容，就是主进程中执行的内容。
Давайте посмотрим, что обычно делает основной процесс.
//main.js
var electron = require('electron');
var app = require('electron').app;
//初始化
app.on('ready', function(){
try{
//app ready
}catch(err){
log.error(err);
}
});
Выше приведен самый простой пример main.js. В примере мы сначала вводимelectronа такжеelectron.appмодуль.electron.appОбъект управляет жизненным циклом всей программы, здесь мы только прописываем жизненный циклreadyСобытие, когда срабатывает событие готовности, это означает, что вся программа была инициализирована, и бизнес-логика, такая как создание окна, может быть запущена.
В реальных приложениях код основного процесса намного сложнее, чем в приведенном выше примере. Реализация многих необходимых функций выполняется в основном процессе, и ниже приводится пример для пояснения.
Программа взаимного исключения
В некоторых сценариях требуется, чтобы в системе одновременно было открыто только одно приложение. Поэтому, когда что-то уже должно быть запущено в системе, если вы снова дважды щелкните значок приложения, программа должна выйти сама или закрыть ранее открытую программу.
(function(){
app.makeSingleInstance(singleInstanceCallBack);
function singleInstanceCallBack(commandLine, workingDirectory){
console.log('command line: ', commandLine);
console.log('working directory: ', workingDirectory);
app.exit(0);
}
})();
используется здесьapp.makeSingleInstanceAPI реализует эту функцию.singleInstanceCallBackФункция — это обратный вызов, который первый экземпляр выполняет при запуске второго экземпляра, поэтомуsingleInstanceCallBackиспользуется вappФактически, он указывает на экземпляр, который открывается первым (на самом деле это немного связано с API), в приведенном выше кодеsingleInstanceCallBackПри выполнении вызватьapp.exitметод закрывает программу, которая была открыта первой. Итак, как мы судим, что текущий экземпляр является вторым? фактически,makeSingleInstanceВозвращаемое значение является значением логического типа, если оно равно true, это означает, что в настоящее время это второй экземпляр. Если требуется, чтобы второй экземпляр вышел, вызовите его непосредственно в текущей области.app.exitВот и все.
процесс рендеринга
Electron интегрирует Chromium для отображения интерфейса окна, а содержимое, отображаемое в окне, отображается с использованием HTML. Сам Chromium представляет собой многопроцессорную архитектуру для рендеринга страниц (по умолчанию стратегия Chromium по умолчанию заключается в открытии нового процесса для каждой вкладки, чтобы гарантировать, что каждая страница независима и не влияет друг на друга. Избегайте сбоя одной страницы и вызывайте все страницы нельзя использовать), поэтому Electron также будет использовать многопроцессорную архитектуру Chromium при отображении окна. Эта многопроцессная архитектура рендеринга называется процессом рендеринга в Electron.
В Electron каждый раз, когда создается новое окно, это независимый процесс.
//main.js
const {BrowserWindow} = require('electron');
const window1 = new BrowserWindow({width: 200, height: 200})
const window2 = new BrowserWindow({width: 200, height: 200})
window1.loadURL('https://baidu.com');
window2.loadURL(`file://${__dirname}/index.html`)
В приведенном выше коде мы создали 2 окна,window1а такжеwindow2. Эти два окна являются отдельными процессами друг от друга.window1Содержимое окна указывает на домашнюю страницу Baidu.window2Содержимое окна указывает на html-страницу, которую мы разработали сами. В index.html мы можем разрабатывать содержимое окна так же, как обычные веб-страницы. Вот пример index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0">
<title>main page</title>
</head>
<body>
<div id="app">Hello World</div>
<script type="text/javascript" src="mainPage.js"></script>
</body>
</html>
Во введении к основному процессу мы сказали, что только главный процесс имеет право на получение локальных ресурсов. В реальных сценариях иногда необходимо вывести в окно локальные данные, полученные в основном процессе, как этого добиться?
В следующей главе мы сосредоточимся на том, как основной процесс взаимодействует с процессом визуализации.