electron入门教程

Electron 快速上手教程

electron 简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用macOS和Linux
不需要本地开发经验

Electron Fiddle 运行实例

Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。一个学习工具来安装，便于对Electron的api进行实验或对特性进行原型化

安装 electron 环境

安装node
注意因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关
项目初始化

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

package.json 必选项
a. 入口文件应为 main.js.
b. author 与 description 可为任意值，但对于应用打包是必填项。

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "keep",
  "license": "MIT"
}

安装electron依赖

npm install --save-dev electron

配置命令

{
  "scripts": {
    "start": "electron ."
  }
}

创建页面
可以是本地HTML文件，也可以是一个远程url

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

应用窗口打开页面

Electron的两个模块：

app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序窗口。

主进程运行着 Node.js，main.js 文件头部将它们导入作为 CommonJS 模块：

main.js

// 主进程运行着 Node.js，main.js 文件头部将它们导入作为 CommonJS 模块
const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('path')

// modify your existing createWindow() function
// createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // __dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
    // path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html');

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()
app.whenReady().then(() => {
  createWindow();

  // 如果没有窗口打开则打开一个窗口 (macOS)
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  });
});

// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

管理窗口的生命周期

可以使用进程全局的 platform 属性来专门为某些操作系统运行代码

关闭所有窗口时退出应用 (Windows & Linux)

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

为了实现这一点，你需要监听 app 模块的 ‘window-all-closed’ 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()

如果没有窗口打开则打开一个窗口 (macOS)

当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

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

因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。

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

主进程通过Node的全局 process 对象访问这个信息是微不足道的。然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。它们存在于完全不同的进程！

预加载脚本连接到渲染器可以实现。预加载脚本在渲染器进程加载之前加载，并有权访问两个渲染器全局 (例如 window 和 document) 和 Node.js 环境。

创建一个名为 preload.js

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])
  }
})

将功能添加到您的网页内容

由于渲染器运行在正常的 Web 环境中,可以在 index.html 文件关闭标签之前添加一个

<script src="./renderer.js"></script>

renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack 打包并最小化您的代码，或者使用 React 来管理您的用户界面

打包并分发您的应用程序

最快捷的打包方式是使用 Electron Forge

npm install --save-dev @electron-forge/cli
npx electron-forge import

npm run make

出现：Cannot find module ‘@electron-forge/plugin-fuses’

npm i @electron-forge/plugin-fuses -D

预加载脚本

Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境。除了 Electron 模组之外，您也可以访问 Node.js 内置模块和所有通过 npm 安装的包。另一方面，出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。

为了将 Electron 的不同类型的进程桥接在一起，我们需要使用被称为预加载的特殊脚本。

使用预加载脚本来增强渲染器

BrowserWindow 的预加载脚本运行在具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限的环境中。

预加载脚本沙盒化

从 Electron 20 开始，预加载脚本默认沙盒化，不再拥有完整 Node.js 环境的访问权。实际上，这意味着你只拥有一个 polyfilled 的 require 函数，这个函数只能访问一组有限的 API。

在进程之间通信

Electron 的主进程和渲染进程有着清楚的分工并且不可互换。这代表着无论是从渲染进程直接访问 Node.js 接口，亦或者是从主进程访问 HTML 文档对象模型 (DOM)，都是不可能的。

解决这一问题的方法是使用进程间通信 (IPC)。可以使用 Electron 的 ipcMain 模块和 ipcRenderer 模块来进行进程间通信。为了从你的网页向主进程发送消息，你可以使用 ipcMain.handle 设置一个主进程处理程序（handler），然后在预处理脚本中暴露一个被称为 ipcRenderer.invoke 的函数来触发该处理程序（handler）。

我们将向渲染器添加一个叫做 ping() 的全局函数来演示这一点。这个函数将返回一个从主进程翻山越岭而来的字符串。

首先，在预处理脚本中设置 invoke 调用

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping')
  // 除函数之外，我们也可以暴露变量
})

main.js

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  ipcMain.handle('ping', () => 'pong')
  createWindow()
})

renderer.js

const func = async () => {
  const response = await window.versions.ping()
  console.log(response) // 打印 'pong'
}

func()

流程模型

Electron 继承了来自 Chromium 的多进程架构

为什么不是一个单一的进程？

网页浏览器是个极其复杂的应用程序。除了显示网页内容的主要能力之外，他们还有许多次要的职责，例如：管理众多窗口 ( 或标签页 ) 和加载第三方扩展。

在早期，浏览器通常使用单个进程来处理所有这些功能。虽然这种模式意味着您打开每个标签页的开销较少，但也同时意味着一个网站的崩溃或无响应会影响到整个浏览器

多进程模型

为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染，从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。然后用单个浏览器进程控制这些标签页进程，以及整个应用程序的生命周期

主进程和渲染器进程

主进程

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

窗口管理

主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。您可从主进程用 window 的 webContent 对象与网页内容进行交互

main.js
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

由于 BrowserWindow 模块是一个 EventEmitter，所以您也可以为各种用户事件 ( 例如，最小化或最大化您的窗口 ) 添加处理程序。

当一个 BrowserWindow 实例被销毁时，与其相应的渲染器进程也会被终止。

应用程序生命周期

主进程还能通过 Electron 的 app 模块来控制您应用程序的生命周期。该模块提供了一整套的事件和方法，可以让您用来添加自定义的应用程序行为 (例如：以编程方式退出您的应用程序、修改应用程序坞，或显示一个关于面板

渲染器进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。洽如其名，渲染器负责渲染网页内容。所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此)

Preload 脚本

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

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

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

虽然预加载脚本与其所附着的渲染器在共享着一个全局 window 对象，但您并不能从中直接附加任何变动到 window 之上，因为 contextIsolation【上下文隔离】是默认的

// preload.js
window.myAPI = {
  desktop: true
}

renderer.js
console.log(window.myAPI)
// => undefined

语境隔离（Context Isolation）意味着预加载脚本与渲染器的主要运行环境是隔离开来的，以避免泄漏任何具特权的 API 到您的网页内容代码中。

取而代之，我们將使用 contextBridge 模块来安全地实现交互：

// preload.js
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true
})

// renderer.js
console.log(window.myAPI)
// => { desktop: true }

此功能对两个主要目的來說非常有用：

通过暴露 ipcRenderer 帮手模块于渲染器中，您可以使用进程间通讯 ( inter-process communication, IPC ) 来从渲染器触发主进程任务 ( 反之亦然 ) 。
如果您正在为远程 URL 上托管的现有 web 应用开发 Electron 封裝，则您可在渲染器的 window 全局变量上添加自定义的属性，好在 web 客户端用上仅适用于桌面应用的设计逻辑。

效率进程

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

上下文隔离

上下文隔离功能将确保您的预加载脚本和 Electron的内部逻辑运行在所加载的 webcontent网页之外的另一个独立的上下文环境里。这对安全性很重要，因为它有助于阻止网站访问 Electron 的内部组件和您的预加载脚本可访问的高等级权限的API 。

这意味着，实际上，您的预加载脚本访问的 window 对象并不是网站所能访问的对象。例如，如果您在预加载脚本中设置 window.hello = ‘wave’ 并且启用了上下文隔离，当网站尝试访问window.hello对象时将返回 undefined

上下文隔离禁用

// preload.js
// 上下文隔离禁用的情况下使用预加载
window.myAPI = {
  doAThing: () => {}
}

doAThing() 函数可以在渲染进程中直接使用。

// renderer.js
// 在渲染器进程使用导出的 API
window.myAPI.doAThing()

启用上下文隔离

// preload.js
// 在上下文隔离启用的情况下使用预加载
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {}
})

// renderer.js
// 在渲染器进程使用导出的 API
window.myAPI.doAThing()

安全事项

单单开启和使用 contextIsolation是不安全的

// preload.js
// ❌ 错误使用
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

// preload.js
// ✅ 正确使用
contextBridge.exposeInMainWorld('myAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

进程间通信 IPC

由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责，因此 IPC 是执行许多常见任务的唯一方法，例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改

IPC 通道

在 Electron 中，进程使用 ipcMain 和 ipcRenderer 模块，通过开发人员定义的“通道”传递消息来进行通信。这些通道是任意（您可以随意命名它们）和双向（您可以在两个模块中使用相同的通道名称）的

上下文隔离进程

模式 1：渲染器进程到主进程（单向）

将单向 IPC 消息从渲染器进程发送到主进程，您可以使用 ipcRenderer.send API 发送消息，然后使用 ipcMain.on API 接收
此模式从 Web 内容调用主进程 API

Listen for events with ipcMain.on

// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function handleSetTitle (event, title) {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.on('set-title', handleSetTitle);
  createWindow()

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

通过预加载脚本暴露 ipcRenderer.send

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

这样能够在渲染器进程中使用 window.electronAPI.setTitle() 函数

构建渲染器进程 UI

<script src="./renderer.js"></script>

// renderer.js (Renderer Process)
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
  const title = titleInput.value
  window.electronAPI.setTitle(title)
});

模式 2：渲染器进程到主进程（双向）

双向 IPC 的一个常见应用是从渲染器进程代码调用主进程模块并等待结果。可以通过将 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成

// main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('path')

async function handleFileOpen () {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (!canceled) {
    return filePaths[0]
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

使用 ipcMain.handle 监听事件
ipcMain.handle(‘dialog:openFile’, handleFileOpen)
通过预加载脚本暴露 ipcRenderer.invoke
在预加载脚本中，我们暴露了一个单行的 openFile 函数，它调用并返回 ipcRenderer.invoke(‘dialog:openFile’) 的值。我们将在下一步中使用此 API 从渲染器的用户界面调用原生对话框。

// preload.js (Preload Script)
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

构建渲染器进程 UI

// renderer.js (Renderer Process)
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

使用 ipcRenderer.send

我们用于单向通信的 ipcRenderer.send API 也可用于双向通信。这是在 Electron 7 之前通过 IPC 进行异步双向通信的推荐方式。

// preload.js (Preload Script)
// 您也可以使用 `contextBridge` API
// 将这段代码暴露给渲染器进程
const { ipcRenderer } = require('electron')

ipcRenderer.on('asynchronous-reply', (_event, arg) => {
  console

秒客网

electron入门教程

Electron 快速上手教程

electron 简介

Electron Fiddle 运行实例

安装 electron 环境

应用窗口打开页面

管理窗口的生命周期

关闭所有窗口时退出应用 (Windows & Linux)

如果没有窗口打开则打开一个窗口 (macOS)

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

将功能添加到您的网页内容

打包并分发您的应用程序

预加载脚本

使用预加载脚本来增强渲染器

在进程之间通信

流程模型

为什么不是一个单一的进程？

多进程模型

主进程和渲染器进程

主进程

窗口管理

应用程序生命周期

渲染器进程

Preload 脚本

效率进程

上下文隔离

上下文隔离禁用

启用上下文隔离

安全事项

进程间通信 IPC

IPC 通道

上下文隔离进程

模式 1：渲染器进程到主进程（单向）

模式 2：渲染器进程到主进程（双向）

使用 ipcRenderer.send

`相关文章`

electron入门教程

Electron 快速上手教程

electron 简介

Electron Fiddle 运行实例

安装 electron 环境

应用窗口打开页面

管理窗口的生命周期

关闭所有窗口时退出应用 (Windows & Linux)

如果没有窗口打开则打开一个窗口 (macOS)

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

将功能添加到您的网页内容

打包并分发您的应用程序

预加载脚本

使用预加载脚本来增强渲染器

在进程之间通信

流程模型

为什么不是一个单一的进程？

多进程模型

主进程 和 渲染器进程

主进程

窗口管理

应用程序生命周期

渲染器进程

Preload 脚本

效率进程

上下文隔离

上下文隔离禁用

启用上下文隔离

安全事项

进程间通信 IPC

IPC 通道

上下文隔离进程

模式 1：渲染器进程到主进程（单向）

模式 2：渲染器进程到主进程（双向）

使用 ipcRenderer.send

相关文章

主进程和渲染器进程

`相关文章`