Electron入门笔记 | 温木的博客

讲解 electron 的一些入门知识。

进程和线程

进程和线程就像车间和车间中各个车间的关系。线程是进程的一部分。

它们的区别

内存
计算机会给每个进程分配单独的内存空间，通常情况下进程之间不共享内存；线程在进程内部共享进程的内存。
通信机制
通常情况下进程之间是不可互通的，通过一些手段也可实现，比如 IPC，但是线程之间通信就很方便快捷
量级的区别
线程更轻量级，创建更快，使用资源更少

Electron、Chromium 和进程之间的关系

Chromium 是由一个主进程和多个渲染进程组成，和浏览器一样，浏览器窗口就是主进程(即使打开多个窗口也是一个主进程)，每个 tab 就是一个渲染进程，主进程就是一个指挥官，负责对每个渲染进程进行控制和分配。
Electron 也一样，也是一个主进程和多个子进程的关系。

Chromium 主进程的特点

可以使用和系统对接的 Electron API - 比如创建菜单、上传文件等等。
负责创建渲染进程 - Render Process
全面支持 Node.js 语法
只有一个，作为整个程序的入口点

渲染进程 - Render Process 的特点

可以有多个，每个对应一个窗口
每个都是一个单独的进程
全面支持 Node.js 和 DOM API
可以使用一部分 Electron 提供的 API

主进程和渲染进程可访问 Electron API 的范围

主进程和渲染进程可访问Electron API的范围

BrowserWindow

创建一个窗口，也即使一个 tab，一个渲染进程- Render Process.

使用 nodemon 帮助开发

1	“start”:"nodemon --watch main.js --exec \"electron .\""

进程之间的通讯方式

Electron 使用 IPC (interprocess communication) 在进程之间进行通讯

进程之间为什么要通讯？
因为主进程和渲染进程可访问的资源不同，比如渲染进程需要通过主进程访问一些系统资源等等。

devtron 插件

使用这个插件可以方便我们调试 electron 程序。

// 引入
require("devtron").install();

.....

win.loadFile("index.html");
// 自动打开devtron工具
win.webContents.openDevTools();

进程之间进行通讯

在主进程中注册监听事件

const { app, BrowserWindow, ipcMain } = require("electron");

/**
 * message 自定义的事件名称
 * event 事件对象
 * arg 事件参数
 */
ipcMain.on("message", (event, arg) => {
  console.log(arg);
  // 主进程回复渲染进程信息,事件名reply可自定义
  event.reply("reply", "this is a message from main process.");
});

渲染进程中注册和监听事件

const { ipcRenderer } = require("electron");

// 发送信息
ipcRenderer.send("message", "this is a message from render process.");

监听主进程回复的信息;
ipcRenderer.on("reply", (event, arg) => {
  document.getElementById("main_msg").innerHTML = arg;
});

remote 进程之间简单的通讯方式

在渲染进程的 js 中

const { BrowserWindow } = require("electron").remote;

let win = new BrowserWindow({ height: 400, width: 400 });
win.loadURL("https://www.baidu.com");

npx

避免全局安装
可以使用已安装模块

electrong 需要注意的地方

package.json 中配置 main 字段 2.在根目录创建 main.js，这里写主进程的代码