Electron教程(二)启动过程:主进程,渲染进程是什么

​Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建​​​​Electron教程(二)启动过程:主进程,渲染进程是什么​​​​Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程​​​​Electron教程(四)使用 Vue Browser 版,创建小工具应用​​​​Electron教程(五)读取本地文件内容, icpMain icpRenderer 之间的交互​​​​Electron教程(六)应用菜单设置例子​​​​Electron教程(七)结语​

一、什么是 ​​主进程​​​ 和 ​​渲染进程​

要想知道 ​​electron​​​ 的启动过程,就需要知道 主进程、渲染进程分别是什么,因为 ​​electron​​ 就包含这两种进程

​electron​​​ 项目跟所有的 ​​npm​​​ 项目一样,入口都是 ​​package.json​​​ 中的 ​​main​​​ 字段指定的 js,比如你指定的是 ​​app.js​​。

"main": "app.js",

Electron教程(二)启动过程:主进程,渲染进程是什么_html

​electron​​ 有两个类别的进程,一个是主进程,另一个是渲染进程

主进程

  • 启动后一直存在的,相当于一个树的主干
  • 并不会展示出来,是看不到的
  • 所有跟系统资源交互的操作都在这里进行
  • 操控渲染进程,新建或销毁一个渲染进程

渲染进程

  • 渲染进程是一个个的浏览器窗口,就是用于展示
  • 渲染进程就是能看到的界面
  • 如果需要跟系统交互,就需要用​​icpRenderer​​ 跟主进程进行数据交互。

二、​​electron​​ 程序启动的过程

  1. ​electron​​ 启动
  2. 调用​​app.js​​​ 文件,​​app.js​​​ 里面的内容就是​​主进程​​ 的内容,里面会有启动程序的代码
  3. 创建一个浏览器窗口
  1. 在​​app.js​​ 里面新建一个渲染进程
  2. 把需要展示的首页​​index.html​​ 指定给这个窗口
  1. 在​​app.js​​ 的程序启动代码块中添加上面创建的浏览器窗口即可

三、 主进程和渲染进程的 console.log()

主进程的 ​​console.log()​

是输出到系统终端中的,也就是说指 ​​app.js​​​ 中的 ​​console.log()​

比如下图这里,我在主进程中读取一个文件的内容并输出到了 console 中

Electron教程(二)启动过程:主进程,渲染进程是什么_程序启动_02

渲染进程的 ​​console.log()​

是输出到调试窗口的 ​​console​​​ 中的,就是平时浏览器用到的 ​​console​​​ 标签窗口。
Electron教程(二)启动过程:主进程,渲染进程是什么_程序启动_03