Electron 是一个开源框架,使开发者能够使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。通过 Electron,开发者可以将网页技术应用于桌面软件开发,从而利用现有的网页技术栈构建功能强大的桌面应用。
下载 Electron
虽然 Electron 可以通过 npm 安装,但由于某些网络问题或权限问题,可能会导致安装失败。因此,本指南将介绍如何直接从 Electron 的 GitHub Releases 页面下载 Electron 并使用。
-
访问 Electron Releases 页面:
打开 Electron Releases 页面。 -
选择版本:
找到你想要下载的 Electron 版本,通常选择最新版本。 -
下载适合的文件:
根据你的操作系统下载适合的预编译二进制文件。对于 Windows,通常下载electron-vX.X.X-win32-x64.zip
文件(X.X.X
为版本号)。
解压文件
将下载的 .zip
文件解压到你选择的目录,例如 D:\code\electron
。
创建最小的 Electron Demo
接下来,我们将创建一个简单的 Electron 应用程序。
-
创建项目目录:
在你选择的工作目录下创建一个新文件夹,例如D:\code\my-electron-app
。mkdir D:\code\my-electron-app cd D:\code\my-electron-app
-
创建
index.html
文件:
在项目目录下创建一个index.html
文件,并添加以下内容:<!DOCTYPE html> <html> <head><title>Hello Electron</title> <!-- 设置网页标题 --> </head> <body><h1>Hello, Electron!</h1> <!-- 页面显示的主标题 --> </body> </html>
-
创建
index.js
文件:
在同一目录下创建一个main.js
文件,并添加以下内容:// 引入 Electron 模块 const { app, BrowserWindow } = require('electron');// 创建主窗口的函数 function createWindow() {// 创建一个新的浏览器窗口const win = new BrowserWindow({width: 800, // 窗口宽度height: 600, // 窗口高度webPreferences: {nodeIntegration: true // 启用 Node.js 集成,以便在渲染进程中使用 Node.js API}});// 加载 index.html 文件到窗口win.loadFile('index.html'); }// 当 Electron 完成初始化时调用 createWindow 函数 app.whenReady().then(createWindow);// 处理所有窗口关闭事件 app.on('window-all-closed', () => {// 对于非 macOS 系统,退出应用if (process.platform !== 'darwin') {app.quit();} });// 处理应用被激活时的事件 app.on('activate', () => {// 如果没有打开的窗口,则重新创建一个窗口if (BrowserWindow.getAllWindows().length === 0) {createWindow();} });
运行 Electron 应用
-
在命令行中运行 Electron:
打开命令行,导航到你的应用程序目录,然后运行 Electron:cd D:\code\my-electron-app path\to\your\electron\executable\electron.exe .
例如,如果你将 Electron 解压到
D:\code\electron
,命令应为:D:\code\electron\electron.exe .
打包你的应用
如果你希望打包应用,可以使用 Electron 的打包工具。
-
下载 Electron Packager:
下载 Electron Packager。 -
使用 Electron Packager 打包:
- 将
electron-packager
解压到你的项目目录。 - 使用以下命令打包你的应用:
path\to\your\electron\packager\executable\electron-packager . MyApp --platform=win32 --arch=x64
这将生成一个
MyApp-win32-x64
文件夹,其中包含你的应用的可执行文件。 - 将