electron 运行的流程
- package.json 中 入口文件改为 main.js
- main.js 主进程中创建渲染进程
- 设置应用页面布局和样式
- 使用 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，又称图形用户接口）
网友评论