Electron 入门（1）

MarinaTsang

已于 2024-07-31 18:22:55 修改

阅读量633

点赞数 22

文章标签： electron javascript 前端

于 2024-07-31 15:12:15 首次发布

本文链接：https://blog.csdn.net/MarinaTsang/article/details/140823597

版权

前言

公司要做一个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();
    }
  });
});