6-electron运行流程-主进程，渲染进程

electron 运行的流程

1. package.json 中入口文件改为 main.js
1. main.js 主进程中创建渲染进程
1. 设置应用页面布局和样式
1. 使用 IPC 在主进程执行任务并获取信息

主进程和渲染进程

主进程和渲染器进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。
在主进程中运行的脚本 通过创建 web 页面来展示用户界面。

由于 electron 使用了 Chromium(谷歌浏览器)来展示 web 页面，
所以 Chromium 的多进程架构也被使用到。
每个 Electron 中的 web 页面运行在它自己的渲染进程中。

进程和线程

进程: 进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，
是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
线程：在一个个程序里的一个执行路线就叫做线程（thread）。
更准确的定义是线程是”一个进程内部的控制序列。
线程和进程：一个程序至少有一个进程，一个进程至少有一个线程。

electron 渲染进程中通过 Nodejs 读取本地文件

    在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。
    然而Electron的用户在Nodejs的API支持下可以在页面中和操作系统进行一些底层交互。
    nodejs在主进程和渲染进程都可以使用。
    渲染进程因为安全限制，不能直接操作原生GUI①。
    虽然如此，因为集成了Nodejs，
    渲染进程也有了操作系统底层API的能力。
    nodejs常用的path、fs、crypto等模块在electron可以直接使用，
    方便我们处理链接、路径和文件MD5等，同时npm还有成千上万的模块供我们选择。

<body>
    <h1>hello world</h1>
    <div id="content"></div>
    <button id="button">click</button>
</body>

const fs = require('fs');

const content = document.getElementById('content');
const button = document.getElementById('button');

button.addEventListener('click', function(e) {
    fs.readFile('package.json', 'utf-8', function(err, data) {
        content.textContent = data;
        console.log(data);
    });
});

开启渲染进程使用 nodejs，否则报错 require is not define

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        // 渲染进程是否使用node
        nodeIntegration: true
    }
});

点击 click 效果

20ba3817c258300c409e68a160f5c6b8.png

Election 开启调试模式

mainWindow.webContents.openDevTools();

① 图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）

最后编辑于：2020.08.10 22:43:27