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 的技术架构包含：

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

环境搭建

1. 安装 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 完成。

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

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

3. 设置项目：创建一个新的项目文件夹，并初始化一个新的 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 程序。

4. 安装 Electron 作为项目依赖：

   npm install --save-dev electron
   

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

   const { app, BrowserWindow } = require('electron');
   
   function createWindow() {
       const mainWindow = new BrowserWindow({
           width: