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，您需要将nodeIntegration首选项设置为true，将contextIsolation首选项设置为false。请注意，出于安全原因，不建议在加载远程网页中直接使用nodejs的API。
Electron 在主进程和渲染进程中都暴露了对 Node.js API 及其模块的完全访问权限。 例如，您可以从根目录读取所有文件：
const fs = require('fs')
const root = fs.readdirSync('/')
console.log(root)npm install --save aws-sdk
const S3 = require('aws-sdk/clients/s3')下面我们来一步一步利用Electron 开发一个桌面应用程序
在使用 Electron 之前，您需要安装 Node.js。 我们建议您安装最新可用的 LTS 或 Current 版本 。
请使用为你平台预构建的 Node.js 安装器来进行安装。 否则，您可能会遇到与不同开发工具不兼容的问题。
要检查 Node.js 是否正确安装，请在您的终端输入以下命令：
node -v
npm -v
二、创建基本应用程序
为您的项目创建一个文件夹并安装 Electron：
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言，是 main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。
主脚本可以如下所示：
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})上面发生了什么？第 一行：为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块 。
第二行: Second, you import the path package which provides utility functions for file paths.
第四行: After that, you define a function that creates a new browser window with a preload script, loads index.html file into this window (line 13, we will discuss the file later).
第 16 行：你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。
第十八行 You add a new listener that creates a new browser window only if when the application has no visible windows after being activated. 例如，在首次启动应用程序后或重启运行中的应用程序。
第二十五行: You add a new listener that tries to quit the application when it no longer has any open windows. 由于操作系统的 窗口管理行为 ，此监听器在 macOS 上是禁止操作的。
这是应用程序初始化后您想要显示的页面。 此网页代表渲染过程。 您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染进程。
您可以选择授予nodejs通过从预加载脚本公开api。
index.html 页面如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
</body>
</html>window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})上面代码解析第1行：首先定义一个事件监听器，告诉您网页何时加载
第2行：然后定义一个实用函数，用于设置index.html
第7行：接下来，您将遍历要显示其版本的组件列表
第8行：最后，调用replaceText在index.html中查找版本占位符并将其文本值设置为进程.版本
您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。 您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js"
}
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
三、运行您的应用程序
npm start
您正在运行的 Electron app 应该如下所示：
四、打包并分发应用程序
分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。
导入 Electron Forge 到您的应用文件夹：
npm install --save-dev @electron-forge/cli
npx electron-forge import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
npm run make
> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
好了，一个简单的electron入门教程就讲完了，有什么问题请私信我。
{{collectdata}}
网友评论0