【Web】Electron：第一个桌面程序

T0uken

于 2024-09-27 21:19:35 发布

阅读量390

点赞数 12

文章标签：前端 electron javascript

本文链接：https://blog.csdn.net/2303_80346267/article/details/142602662

版权

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 文件夹，其中包含你的应用的可执行文件。