Electron 快速入门教程

Electron 快速入门教程

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。官网：www.electronjs.org

通常，你可以使用操作系统 (OS) 特定的本地应用程序框架来创建一个桌面应用程序。 Electron 可以使用你了解的技术来编写应用程序。

一、Electron 基础

应用程序结构

Electron 包含三个核心：

1、Chromium 用于显示网页内容。
2、Node.js 用于本地文件系统和操作系统。
3、自定义 APIs 用于使用经常需要的 OS 本机函数。

用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。

主进程和渲染器进程

如前所述，Electron 有两种进程：主进程和渲染进程。

主进程通过创建 BrowserWindow 实例来创建 网页。 每一个 BrowserWindow 实例在其渲染过程中运行网页， 当一个 BrowserWindow 实例被销毁时，对应的渲染过程也会被终止。
主进程 管理 所有网页及其对应的渲染进程。

渲染进程只能管理相应的网页， 一个渲染进程的崩溃不会影响其他渲染进程。
渲染进程通过 IPC 与主进程通信在网在页上执行 GUI 操作。 出于安全和可能的资源泄漏考虑，直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。
进程之间的通信可以通过 Inter-Process Communication(IPC) 模块进行：ipcMain 和 ipcRenderer

APIs

Electron API

Electron API 是根据进程类型分配的。这意味着某些模块可以在主进程或渲染进程中使用，有些模块两者中皆可使用。 Electron 的 API 文档注明了各个模块可以分别用在哪个进程中。

例如，需要同时在两个进程中访问 Electron API，require 包含的模块：

const electron = require('electron')

若要创建一个窗口，请调用 BrowserWindow 类，但只能在主进程中使用：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

若要从渲染进程调用主进程，请使用 IPC 模块：

// 在主进程中
const { ipcMain } = require('electron')

ipcMain.handle('perform-action', (event, ...args) => {
// ... do actions on behalf of the Renderer
})

// 在渲染过程中

const { ipcRenderer } = require('electron')

ipcRenderer.invoke('perform-action', ...args)

注意：由于渲染过程可能会运行不受信任的代码(特别是第三方的代码)， 重要的是要认真验证主要进程中提出的请求。

Node.js API

要访问node.js的API，您需要将nodeIntegration首选项设置为true，将contextIsolation首选项设置为false。请注意，出于安全原因，不建议在加载远程网页中直接使用nodejs的API。

Electron 在主进程和渲染进程中都暴露了对 Node.js API 及其模块的完全访问权限。 例如，您可以从根目录读取所有文件：

const fs = require('fs')
const root = fs.readdirSync('/')
console.log(root)

要使用 Node.js 模块，您首先需要安装它作为依赖：

npm install --save aws-sdk

然后，在您的 Electron 应用程序中，加载该模块：

const S3 = require('aws-sdk/clients/s3')

下面我们来一步一步利用Electron 开发一个桌面应用程序

前提条件

在使用 Electron 之前，您需要安装 Node.js。 我们建议您安装最新可用的 LTS 或 Current 版本 。

请使用为你平台预构建的 Node.js 安装器来进行安装。 否则，您可能会遇到与不同开发工具不兼容的问题。

要检查 Node.js 是否正确安装，请在您的终端输入以下命令：

node -v
npm -v

这两个命令应输出了 Node.js 和 npm 的版本信息。 如果这两个命令都执行成功，你就可以开始准备安装 Electron了。

二、创建基本应用程序

从开发的角度来看，Electron 应用本质上是一个 Node.js 应用。 这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。 最小的 Electron 应用程序具有以下结构：

my-electron-app/
├── package.json
├── main.js
├── preload.js
└── index.html

让我们根据上面的结构创建一个基本的应用程序。

安装 Electron

为您的项目创建一个文件夹并安装 Electron：

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

创建主脚本文件

主脚本指定了运行主进程的 Electron 应用程序的入口(就我...

点击查看剩余70%