Electron——创建第一个应用程序#

electron 的安装#

首先跟着文档一步一步的开始，网上的学习视频虽然很丰富，但是根本不适合自己去理解，跟着文档学习是一步非常重要的能力。 第一步当然是创建一个项目文件

1
mkdir my-electron-app && cd my-electron-app
2
pnpm init

在项目文件创建完毕之后，进去看一下package.json文件

原本的应该是这样

1
{
2
  "name": "my-electron-app",
3
  "version": "1.0.0",
4
  "description": "Hello World!",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "author": "Jane Doe",
10
  "license": "MIT",
11
  "devDependencies": {
12
    "electron": "23.1.3"
13
  }
14
}

改一下

1
{
2
  "name": "my-electron-app",
3
  "version": "1.0.0",
4
  "description": "Hello World!",
5
  "main": "main.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "keywords": [],
10
  "author": "FATFATHAO",
11
  "license": "MIT",
12
  "devDependencies": {
13
    "electron": "^39.2.6"
14
  }
15
}

去 github 官方仓库里面找一下 Node.js 的 gitignore 文件 接着就是运行 Electron 应用了，不过这里有 Electron 进程模型的介绍，同时因为自己也只是前端项目做的比较多，能写个一两笔，一些理论基础和架构的相关知识还是比较薄弱的，所以可以借这个机会好好的学习一下。

流程模型#

在 Chromium 中，存在一个叫做多进程架构的东西，而 Electron 继承了 Chromium 的多进程架构，这就使得 Electron 在架构上非常类似于一个现代的网页浏览器。

主进程#

每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。主进程在 Node.js 环境中运行，这意味着它具有require模块和使用所有 Node.js API 的能力。

1
const { BrowserWindow } = require("electron");
2

3
const win = new BrowserWindow({ width: 800, height: 1500 });
4
win.loadURL("https://github.com");
5

6
const contents = win.webContents;
7
console.log(contents);

1
// quitting the app when no windows are open on non-macOS platforms
2
app.on("window-all-closed", () => {
3
  if (process.platform !== "darwin") app.quit();
4
});

渲染器进程#

每个 Electron 应用都会为每个打开的BrowserWindow(与每个网页嵌入)生成一个单独的渲染器进程。恰如其名，渲染器负责渲染网页内容。所以实际上，运行于渲染器进程中的代码是须遵循网页标准的。

因此，一个浏览器窗口中的所有的用户界面和应用功能，都应与在网页开发商使用相同的工具和规范来进行攥写。

• 以一个 HTML 文件作为渲染器进程的入口点。
• 使用层叠样式表 (Cascading Style Sheets, CSS) 对 UI 添加样式。
• 通过

此外，这也意味着渲染器无权直接访问require或其他 Node.js API。为了在渲染器中直接包含 NPM 模块，需要使用与 web 开发时相同的打包工具(例如 webpack 和 parcel)

既然这些特性只能由主进程进行访问，那渲染器进程用户界面怎样才能与 Node.js 和 Electron 的原生桌面功能进行交互。而事实上，确实没有直接导入 Electron 内容脚本的方法

Preload 脚本#

预加载脚本包含了那些执行于渲染器进程中，且优先于网页内容开始加载的代码。这些脚本虽然运行于渲染器的环境中，却因能访问 Node.js API 而有了更多的权限

预加载脚本可以在BrowserWindow构造方法中的webPreferences选项里被附加到主进程。

1
const { BrowserWindow } = require("electron");
2
// ...
3
const win = new BrowserWindow({
4
  webPreferences: {
5
    preload: "path/to/preload.js",
6
  },
7
});
8
// ...

因为预加载脚本与浏览器共享同一个全局Window接口，并且可以访问 Node.js API，所以它通过在全局Window中暴露任意 API 来增强渲染器，以便网络内容使用

尽管预加载脚本与其附着的渲染器在共享着同一个全局window对象，但并不能从中直接附加任何变量到window之上，因为contextIsolation是默认的。

1
const { contextBridge } = require("electron");
2

3
contextBridge.exposeInMainWorld("myAPI", {
4
  desktop: true,
5
});

1
console.log(window.myAPI);
2
// => { desktop: true }

此功能对两个主要目的来说非常有用：

• 通过向渲染器暴露ipcRenderer帮助程序，可以使用进程间通信(IPC)从渲染器触发主进程的任务(反之亦然)。
• 如果为远程 URL 上托管的现有 web 应用开发 Electron 封装，则可以在渲染器的window全局变量上添加自定义的属性，好在 web 客户端用上仅适用于桌面应用的设计逻辑。

效率进程#

每个 Electron 应用程序都可以通过在主进程中使用UtilityProcess API 生成多个子进程。主进程在 Node.js 环境中运行，这意味着它具有require模块和使用所有 Node.js API 的能力。效率进程可用于托管，例如：不受信任的服务，CPU 密集型任务或以前容易崩溃的组件，托管在主进程或使用 Node.js child_process.fork API 生成的进程中。效率进程和 Node 生成的进程之间的主要区别.js child_process模块是实用程序进程可以建立通信，通信与使用MessagePort的渲染器进程。

在 Typescript 中需要特别注意的是#

Process-specific module aliases 即进程特定模块别名 Electron 的 npm 包还导出了包含 Electron Typescript 类型定义子集的子路径

electron/main包含了主进程所有模块的类型定义 electron/renderer包含了所有渲染进程模块的类型定义 electron/common包含了可在主进程和渲染进程运行的模块类型 这些别名对运行时无影响，但可用于类型检查和自动补全

运行 Electron 应用#

了解了上面的内容之后，我们可以开始运行 Electron 应用的 demo。

刚刚我们已经在package.json中，指定了main文件是 Electron 应用的入口。这个文件控制主程序(main process)，它运行的 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行执行操作并管理渲染器进程(renderer processes)，稍后会详细介绍。

在继续编写 Electron 应用之前，使用一个小小的脚本来确保主进程入口已经配置正确。在根目录的main.js文件中写一行代码：

1
console.log("Hello from Electron");

因为 Electron 的主进程就是一个 Node.js 运行时，所以你可以直接用electron命令运行任意的 Node.js 代码(甚至还能把它当成REPL来用)。要执行这个脚本，需要在 package.json 的scripts字段中添加一个 start 命令，内容为electron .。这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

1
{
2
  "name": "my-electron-app",
3
  "version": "1.0.0",
4
  "description": "Hello World!",
5
  "main": "main.js",
6
  "scripts": {
7
    "start": "electron .",
8
    "test": "echo \"Error: no test specified\" && exit 1"
9
  },
10
  "author": "Jane Doe",
11
  "license": "MIT",
12
  "devDependencies": {
13
    "electron": "23.1.3"
14
  }
15
}

将网页装载到 BrowserWindow#

在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 在本例中，您将会装载本地的文件。 在您项目的根目录中创建一个 index.html 文件，并写入下面的内容

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8" />
5
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
6
    <meta
7
      http-equiv="Content-Security-Policy"
8
      content="default-src 'self'; script-src 'self'"
9
    />
10
    <meta
11
      http-equiv="X-Content-Security-Policy"
12
      content="default-src 'self'; script-src 'self'"
13
    />
14
    <title>Hello from Electron renderer!</title>
15
  </head>
16
  <body>
17
    <h1>Hello from Electron renderer!</h1>
18
    <p>👋</p>
19
  </body>
20
</html>

1
{
2
  "name": "my-electron-app",
3
  "version": "1.0.0",
4
  "type": "module" // 新增一行
5
}

监控当前所运行的平台，做出符合他们的操作#

为了让 Electron 安全的在 Win && Linux && Mac 上面进行工作，我们需要检测对应的平台。

1
const { app, BrowserWindow } = require("electron/main");
2

3
const createWindow = () => {
4
  const win = new BrowserWindow({
5
    width: 800,
6
    height: 600,
7
  });
8

9
  win.loadFile("index.html");
10
};
11

12
app.whenReady().then(() => {
13
  createWindow();
14

15
  app.on("activate", () => {
16
    if (BrowserWindow.getAllWindows().length === 0) {
17
      createWindow();
18
    }
19
  });
20
});
21

22
app.on("window-all-closed", () => {
23
  if (process.platform !== "darwin") {
24
    app.quit();
25
  }
26
});