Electron 学习笔记

Electron 是一个开源框架，允许开发者使用网页技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。它由 GitHub 开发并维护，最初是为了支持开发 Atom 编辑器。Electron 结合了 Chromium（用于呈现网页内容）和 Node.js（用于与操作系统交互），因此开发者可以利用大量现有的网页开发技术和工具来构建桌面应用。

Electron 的主要特点有：

1. 跨平台支持：Electron 应用可以运行在 Windows、macOS 和 Linux 系统上。
2. 使用网页技术：开发者可以使用熟悉的 HTML、CSS 和 JavaScript 来创建应用程序的用户界面。
3. 与操作系统交互：通过 Node.js，Electron 应用可以与底层操作系统进行交互，执行文件系统操作、网络请求等。
4. 自动更新：Electron 提供了自动更新的功能，可以轻松地发布和分发应用的更新版本。
5. 打包和发布：Electron 提供工具将应用程序打包成独立的可执行文件，以便于分发。

0.前提条件

在使用 Electron 进行开发之前，需要安装 node.js，使用如下命令进行检查。

node -v
npm -v

注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，因此应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

1.Electron 应用程序的创建

1.1 使用脚手架

Electron 应用程序遵循与其他 Node.js 项目相同的结构，首先创建一个文件夹并初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init

npm init 初始化命令会设置项目的相关值，生成一个 package.json 的配置文件，但在 electron.js 项目中有以下两点需要注意：

1. entry point 是项目的入口文件，这个文件必须存在。
2. author 与 description 可以任意设置，但对于 electron 应用的打包来说，是必填项。

因此，实际的 package.json 应该是如下的内容：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "this is a electron demo.",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "euansu",
  "license": "ISC"
}

然后，使用如下命令，将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron
# 过程中安装 electron 可能会失败，执行如下两行命令
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron

1.2 运行主进程

Electron 配置了入口文件，这个文件控制了主进程，，它运行在一个完整的 Node.js 环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

这里首先是创建入口文件，内容如下所示：

// 引入electron应用和浏览器窗口
const { app, BrowserWindow } = require('electron');

// 创建浏览器窗口
const createWindow = () => {
  // 浏览器窗口实例
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    title: 'EuanSu的第一个Electron应用',
    autoHideMenuBar: true
  });
  // 加载页面
  // mainWindow.loadURL('http://www.baidu.com')
  // 加载本地文件
  mainWindow.loadFile('index.html');
};

// 当app准备好的时候，调用创建窗口函数
// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。
app.on('ready', () => {
  createWindow();
});

// 当窗口关闭的时候，退出electron应用
app.on('window-all-closed', () => app.quit());

简单编写一个 html 文件，内容如下所示：

<h1>Hello electron!</h1>

其次，需要配置 script 操作，如下所示，修改 package.json 文件的 scripts 内容。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
},

配置完成后，在终端环境，执行 npm start 启动 electron 应用。

npm start

出现一个应用程序的窗口，内容如下所示：

1.3 管理窗口的声明周期

应用程序的窗口在不同的操作系统下有不同的行为，Electron 将在 app 中实现这些行为的责任交给开发者来实现，也即开发者可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。

1.3.1 关闭所有窗口时退出应用（Windows & Linux）

Windows 和 Linux 操作系统上，关闭所有窗口通常会完全退出一个应用程序。

使用 app.on 监听当前是否处于 window-all-closed（所有窗口被关闭）场景，如果用户不是在 macOS 上运行程序，则调用 app.quit()。

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

1.3.2 如果没有窗口打开则打开一个窗口（macOS）

Linux 和 Windows 应用在没有窗口打开的场景，认为应用是退出状态。macOS应用通常在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

为了实现这一特性，监听 app 模块的 activate 事件，如果没有任何应用窗口是打开的，则调用 createWindow() 方法。

// app.whenReady() 等同于 app.on('ready',()=>{})
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

1.4 通过预加载脚本从渲染器访问 Node.js

实现将 Node.js 和 Electron 的版本号以及以来信息输出到 Electron 应用上。

这里以 Chromium 多进程架构做示范，当 Electron 应用主进程处于 read 状态，应该做的是页面的展示，而不是获取 Node.js 以及相关的依赖信息，创建一个子进程，获取对应的依赖信息，当主进程处于 ready 状态，只需要考虑页面的加载即可。

创建一个名为 preload.js(预加载) 的 JavaScript 文件，内容如下：

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

如上代码访问 Node.js 的 process.version 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文件中。

在 main.js 文件中使用 BrowserWindow 构造器加载 preload.js 文件。

const { app, BrowserWindow } = require('electron')
// 在你文件顶部导入 Node.js 的 path 模块
const path = require('node:path')

// 修改已有的 createWindow() 方法
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}
// ...

以上代码有两个 Node.js 的相关内容：

• __dirname 字符串指向当前正在执行脚本的路径，也即当前目录。
• path.join 将多个路径连接在一起，创建一个符合不同操作系统的路径字符串。

创建 index.html，内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

启动 Electron 应用。

npm start

出现一个如下所示的窗口内容：

2.打包并分发 Electron 应用程序

1. 将 electron-builder 添加到应用的开发依赖中，

   cnpm install --save-dev electron-builder
   

2. 修改 package.json 项目配置文件，主要修改的内容如下所示：

     
   // 增加build配置
   "build": {
       "appId": "com.euansu.electron_example", // 应用程序的唯一标识符
       "productName": "electron_example", // 应用名称
       "directories": {
         "output": "release" //打包输出的目录
       },
       "win": {
         "target": [
           {
             "target": "nsis", // 指定使用nsis作为安装程序格式
             "arch": [
               "x64" // 生成 64 位按转包
             ]
           }
         ]
       },
       "nsis":{
         "oneClick": false, // 安装程序显示安装向导界面
         "allowToChangeInstallationDirectory": true // 允许用户选择安装目录
       }
     }
   

3. 执行如下脚本，打包 Electron 应用。

   npm run build
   

   

   打包完成后，在 release 目录下能找到输出的程序。

   

4. 安装测试。

   

   安装完成后能够正常运行。

   

3.参考链接

[1] Electron 快速入门 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

[2] BrowserWindow官方文档 https://www.electronjs.org/zh/docs/latest/api/browser-window

[3] Electron 流程模型 https://www.electronjs.org/zh/docs/latest/tutorial/process-model

[4] electron-build 官方文档 https://www.electron.build/