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入门教程就讲完了,有什么问题请私信我。
网友评论0