Electron 入门（1）

前言

公司要做一个PC端游戏下载启动器项目。经过一番调研，一个典型的游戏启动器可以使用以下技术：

前端： 使用 Electron 或 WPF（Windows Presentation Foundation）来创建跨平台或 Windows 桌面应用。
后端： 使用 Node.js、.NET Core 或其他服务器端技术来处理用户认证、游戏更新等。
数据库： 使用 MySQL、MongoDB 或其他数据库来存储用户数据、游戏信息等。

由于 WPF 是只支持 Windows 平台，无法跨平台，最终前端选择 Electron 技术栈实现。

技术架构

Electron 官方文档：https://www.electronjs.org/zh/docs/latest/

Electron 的技术架构包含：

Chromium：支持最新特性的浏览器。
Node.js：Javascript 运行时，可实现文件读写。
Native API ：提供统一的原生界面能力。

环境搭建

安装 Node.js：首先需要在系统中安装 Node.js，可以从 Node.js 官网下载并安装最新的 LTS 版本。
1. 检查 node.js 是否以安装及安装版本，node -v
2. 如果版本号不是最新版本，查看 node.js 版本文档：https://nodejs.org/en/download/package-manager ，可以根据文档下载更新最新版本，但是我这里根据文档命令行不生效，选择的是直接下载安装包：https://nodejs.org/en/download/prebuilt-installer
3. 查看 node.js 安装路径 where node
4. 下载最新版本后重新安装（注意路径选择和之前的路径一致）
5. node -v 查看版本是否更新到了最新版本。更新下载最新版 node.js 完成。

安装 Electron：通过 npm 安装 Electron。在命令行中运行以下命令：

# 这是全局安装
npm install -g electron 
# 这是本地安装npm install electron --save-dev

设置项目：创建一个新的项目文件夹，并初始化一个新的 npm 项目：
```
# 方式一
mkdir my-electron-app && cd my-electron-app
npm init -y#方式二
npm init electron-app@latest my-app
# 其中 my-app 是需要创建的项目名
```
注意：如果使用方式二，可以没有步骤4～步骤7，直接执行步骤8中启动 demo 程序。
安装 Electron 作为项目依赖：
```
npm install --save-dev electron
```

创建主进程文件：在项目根目录下创建一个名为 main.js 的文件，作为应用的入口点。以下是一个简单的主进程文件示例：

const { app, BrowserWindow } = require('electron');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});mainWindow.loadFile('index.html');
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});

创建 HTML 文件：在项目根目录下创建一个名为 index.html 的文件，作为应用的主界面。以下是一个简单的 HTML 文件示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Electron App</title>
</head>
<body><h1>Hello, Electron!</h1>
</body>
</html>

更新 package.json：在 package.json 文件中添加一个 main 字段，指向主进程文件，并添加一个 start 脚本来启动应用：

{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron ."},"devDependencies": {"electron": "^latest"}
}

启动应用：在命令行中运行以下命令来启动 Electron 应用：
```
npm start
```
这里的命令是根据**package.json** 文件中的 scripts 属性下的 start 属性定义。如果 package.json 文件中定义的是
```
{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"dev": "electron ."},"devDependencies": {"electron": "^latest"}
}
```
启动命令就是
```
npm run dev
```
ctrl+c 停止运行项目。

通过上述步骤，你可以快速搭建一个简单的 Electron 开发环境，并启动一个基础的 Electron 应用。

Electron 应用程序的生命周期

在 Electron 中，应用程序的生命周期由 app 模块管理。通过监听 app 模块的各种事件，可以在特定的生命周期阶段执行相应的操作。以下是一些常用的生命周期事件及其处理方式：

ready：当 Electron 初始化完成并且可以创建浏览器窗口时触发。

const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,},});win.loadFile('index.html');
}app.whenReady().then(createWindow);app.on('ready', () => {console.log('Application is ready.');
});

window-all-closed：当所有窗口都被关闭时触发。默认情况下，在 macOS 上应用程序和菜单栏会保持激活状态，直到用户显式退出。
```
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});
```

activate：在 macOS 上，应用程序会在没有任何窗口打开的情况下被重新激活。

app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {// 如果没有窗口，则创建一个新的createWindow();}
});

before-quit：在应用程序开始关闭时触发。可以在此事件中执行一些清理操作。
```
app.on('before-quit', (event) => {console.log('应用程序即将退出');
});
```
will-quit：在所有窗口关闭且应用程序将退出时触发。这是执行最后清理操作的地方。
```
app.on('will-quit', (event) => {console.log('应用程序即将完全退出');
});
```
quit：当应用程序退出时触发。

console 的日志输出在终端查看。

一些其他学习记录

监听主页的修改不用每次打包（这是实时监听，每次修改都会编译），在 package.json 的编译命令加上 nodemon —watch index.js（监听的文件）—exec (后面执行的命令)
```
 "scripts": {"start": "nodemon --watch index.js --exec npm run build","build": "electron-forge start","package": "electron-forge package","make": "electron-forge make","publish": "electron-forge publish","lint": "echo \"No linting configured\""},
```
添加完之后执行 npm start 会实时监听 index.js 文件，监听完成会执行 npm run build ，build 命令执行的是：electron-forge start 。如果报错：nodemon: command not found，就是没有安装 nodemon 环境，执行：npm install nodemon --save-dev 本地安装即可。
启动的时候有白屏，可以在创建窗口时不设置展示，监听 ready-to-show 声明周期，准备好之后再调用 show 方法。

const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,show:false, // 创建时不展示webPreferences: {preload: path.join(__dirname, 'preload.js'),},});// and load the index.html of the app.mainWindow.loadFile(path.join(__dirname, 'index.html'));// 监听生命周期方法mainWindow.on('ready-to-show',()=>{mainWindow.show()})
};// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow();// On OS X it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});

Electron 入门（1）

前言

技术架构

环境搭建

Electron 应用程序的生命周期

一些其他学习记录

最新新闻

热搜词