从一个游戏启动器带大家学习 Electron（ Electron 开发指南 · 其二 ） - 创建一个 Electron 程序，并搭建程序框架

sincenir
961 阅读5分钟

你的 点赞、收藏、关注 ，是我继续写下去的唯一动力 ~

文章在观看过程中，有任何问题，都可以在 评论区 提出 ~

所有文章中出现的源码都以发布在 github ，有任何问题可以查看 github.com/Sincenir/el…

前言

上期回顾

上期我们主要讲的是 Electron 相关教程的现状，以及在开发过程中，我们为什么要使用 Electron 的原因，再有我们使用到的 Electron 的主要特性。

本期内容

这篇文章 S 将带大家从安装到开发到启动第一个窗口的全过程。旨在让大家能够顺利的成功跑起来第一个项目。

同时，带大家避免由于网络、版本等问题导致的挫败感。

在后续的文章中，希望带领大家完整的做一个 Electron 项目，学习新技能的真谛，不是疯狂的观看教程文章、视频，而是自己上手开发。有正反馈才是快速学习的最好办法。

本来这期是打算和集合 Vue、React 以及框架一起的，但担心有朋友等的太久，故分两期发布啦。

后续安排

  1. Electron 简介、系统文章撰写原因
  2. 创建一个 Electron 程序，并搭建程序框架
  3. 如何集成 Vue / React，以及基于 Electron 的框架（electron-vite）使用
  4. 前后端通信框架搭建
  5. 导入游戏模块及对应的数据存储
  6. 启动游戏模块及对应的文件系统
  7. 游戏分类模块及对应的配置文件设计
  8. 游戏主页模块及对应的手柄操作
  9. Electron 的在线升级、打包、加密
  10. ...

其他附加（时间允许）：

  • nvm 安装、使用 及国内存在的问题
  • pnpm 从入门到精通
  • vite 简单入门攻略
  • vite 在 Electron 中的应用
  • 架构必修课：如何根据项目大小搭建合适的架构
  • Electron 安全性指南
  • Electron 疑难杂症

搭建教程

前置条件

  • NodeJS 20.16.0+
  • pnpm 8.15.3+

Electron 本身依赖高版本，因此最好使用最新的 LTS 版本的 NodeJS 或者跟随我使用相同版本的 NodeJS: 20.16.0 。
如果你的电脑还有其他项目需要依赖其他版本的 NodeJS ，强烈建议你使用 nvm 管理你的 NodeJS 版本。

pnpm 是 S 我的使用习惯，强烈建议大家跟我保持一致，避免由于网络问题导致的 Electron 安装失败。

相信不少人使用 Electron 遇到过被网络卡死的问题

  • nvm 使用教程：见附录
  • pnpm 使用教程：见附录

备用链接：

安装

初始化 package.json

  1. 在自己喜欢的位置，创建项目文件夹
  2. 进入文件夹运行以下命令初始化 package.json
pnpm init
  1. 修改 package.json 配置（带注释的位置是需要修改的）
{
  "name": "game-launcher", // 包名
  "version": "1.0.0",
  "description": "",
  "main": "main.js", // 入口文件位置
  "scripts": {
    "start": "electron .", // electron 启动命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Sincenir", // 开发者
  "license": "ISC", // 协议
}

配置 .npmrc *

这步对于国内没有魔法的用户超级重要！

  1. 在项目根目录下创建 .npmrc 文件
  2. 在文件中写入以下内容
engine-strict=true
resolution-mode=highest
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/ # 很重要，否则极有可能还走国外的仓库

这三句话主要目的是：

  • 限制项目依赖的 NodeJS 版本
  • 安装依赖时，优先最高版本依赖
  • 指定 npm 包的下载源，避免网络问题导致的 Electron 下载失败

其中尤其是第三条，请务必填写，就算你有 magic 和 shell proxy ，依旧有很大可能安装 Electron 失败。

安装 Electron

  1. 安装 Electron
pnpm install electron@32.0.2
  1. 在 package.json 中限制 NodeJS 版本
"engines": {
    "node": ">=20.16.0"
}
  1. 根目录新建 main.js 文件，并写入一行打印
console.log('Hello from Electron 👋')
  1. 运行启动命令，并查看控制台
pnpm start

打印以下内容代表着我们第一步安装过成功啦 ~

image.png

你可以安装最新的 Electron ，同时在安装时保证 NodeJS 为最新版本。
但强烈建议你保持一致的版本，避免由于 Electron 更新速度导致的开发问题。

安装时遇到任何网络问题导致的安装失败，请检查上一步的 .npmrc 文件配置。

第一个窗口

创建页面

  1. 在项目根目录下创建一个 index.html 文件
  2. 自己写一些内容或者复制以下代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

直接打开，会是以下页面，一个传统的 HTML 页面。我们需要将它塞到一个 Electron 的壳子里面。

image.png

将页面塞到 Electron 壳子中

以下所有操作均在 main.js 中。

  1. 创建一个指定大小的窗口（在应用准备完成后创建）
const { app, BrowserWindow } = require("electron");

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 400,
        height: 200,
    });
});
  1. 创建完运行 pnpm start 会启动一个空白的 Electron 的项目。

image.png

  1. 挂载 HTML 到窗口中
const { app, BrowserWindow } = require("electron");

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 400,
        height: 200,
    });
    
    win.loadFile("index.html");
});
  1. 中止项目（ctrl + c），重新运行 pnpm start ，我们会发现页面的内容有了。 image.png

总结

这期我们主要讲的是 Electron 的 前置条件、安装、挂载页面 ，其实纯静态页面，这些已经完全可以实现了。

但你会发现，我们现在不会直接写 HTML 了，我们常常用的 Vue、React 等框架，下期将带来 Electron 如何集成这些框架 。
同时你还会发现，我们在启动项目后，更新 HTML 内容 Electron 项目并不会更新，必须手动刷新，这里的 热更新 也会在下期同步带来。

你的 点赞、收藏、关注 ，是我继续写下去的唯一动力 ~

附录

nvm简单使用教程

你可以通过这篇简易文档进行使用（nvm）。

关于由于网络问题导致的 nvm install 20.16.0 失败问题

失败信息：

Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt. 
Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.22.46:443: i/o timeout

解决方案：

  • macOS/Linux
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
  • Windows
nvm node_mirror https://npmmirror.com/mirrors/node/ 
nvm npm_mirror https://npmmirror.com/mirrors/npm/

pnpm简单使用教程

这里就不展开了，安装只需要运行以下命令：

npm install -g pnpm

大家有需要或者后期有兴趣，会展开讲讲 pnpm 相关的内容。

avatar
文章
阅读
粉丝