写在前面
我想上 Steam 骗钱，可不幸的是 CocosCreator 目前对 Windows 平台的支持实在一言难尽，而幸运的是有很多开源项目能帮助我实现曲线救国。
经过了长达不知道几天的摸索，终究是有惊无险的完成了。以下是对本次开荒的记录，也希望能对有需要的小伙伴们有点帮助。
本篇是系列专栏的第一篇。如需了解其他内容，可前往：
CocosCreator & Steam 开发手记（1）：Electron 打包 exe
CocosCreator & Steam 开发手记（2）：Greenworks 接入 Steamworks
CocosCreator & Steam 开发手记（3）：CocosCreator 与 Electron 通信
开发环境
操作系统：windows 10
CocosCreator：3.5.0
Nods.js：16.15.0
Electron：18.2.1
前面说了，CocosCreator 打包发布 Windows 平台是有许多坑的，包括但不限于“TTF字体显示效果异常”、“VideoPlayer 组件不支持 Windows 平台因此无法播放视频”等。
与其去逐一击破这些非游戏逻辑的问题，倒不如找个成熟的方案来帮我们处理这些琐事，让我们把精力更多地集中在游戏本身上。
这个时候，一些机智的小伙伴可能就会说了：“既然 CocosCreator 的主场是 Web 平台，那有没有一种可能，我们可以写个只有 Webview 的 exe，然后在 Webview 上运行我们的游戏呢？”
巧了，Electron，也是这么想的。
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在 Windows 上运行的跨平台应用 macOS 和 Linux —— 不需要本地开发经验。
说人话就是：“你只管搞你的 Web，PC 上的事儿放着我来！”
而 Electron 的专业性也是不用担心的。这么说吧，有个叫“Visual Studio Code”的《小工具》用的就是 Electron。
那么接下来，就让我们正式开始吧！
一、安装 Electron
创建一个空文件夹（文件夹的名字和路径应该尽量避开空格和一些非法字符的干扰，比如我用的是 D:\UnrealProjects\EleProj ）。
打开 EleProj 文件夹，在此处打开控制台，输入以下命令：
> npm initinit 初始化命令会提示我们初始化一些项目配置，并已给出一部分默认值，这里我们用默认的一路回车就好。
此时，文件夹中应该会多出一个名为 package.json 的文件，它大概长这个样子：
{
"name": "eleproj",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}3. 接着在控制台输入命令：
> npm install electron --save-dev该命令会安装 Electron。安装过程大概率会非常耗时，并且遇到一些报错，例如 ELIFECYCLE、ECONNRESET 等，这基本都是网络问题，使用魔法后就能顺利安装了。
4. 编辑 package.json 文件，在 scripts 字段下增加一条 start 命令：
{
...
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}start 命令能在开发模式下运行 Electron，让我们赶紧试试吧~
5. 在控制台输入命令以运行 Electron：
> npm start啊哦，报错了！
npm start 命令报错
根据报错，我们可以在 package.json 文件中找到如下属性：
{
...
"main": "index.js",
...
}main 属性配置的值是 Electron 应用程序的入口文件，因此，我们需要...↓↓↓
6. 在项目的根目录下创建一个名为 index.js 的文件，并写入以下代码：
// app模块控制应用程序的事件生命周期。
// BrowserWindow模块创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron')
/** 创建窗口 */
const createWindow = () => {
const mainWindow = new BrowserWindow()
}
// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
// 创建窗口
createWindow()
})
// 当所有窗口都被关闭的时候退出程序。
app.on('window-all-closed', () => {
app.quit()
})代码相对简单，注释我也写的比较清楚了，这里就不再赘述。
7. 再次运行 Electron，看看效果吧~（如何运行请参考第5步）
再次运行 Electron 的效果
如果打开了一个如上图所示的空白应用程序窗口，则说明之前的工作是正确的，第一阶段大功告成啦~
二、通过 Electron 运行 Web 游戏
这一阶段，咱就用 CocosCreator 自己的 HelloWorld 项目来说吧。
CocosCreator 自己的 HelloWorld 项目预览
1. 构建项目，注意发布平台要选择 Web 手机端，其他选项默认即可。
构建发布
2. 将 build 目录下的 web-mobile 文件夹整个拷贝到 EleProj 目录下。
3. 在 index.js 中加入以下代码，用来加载游戏的 index.html。
...
/** 创建窗口 */
const createWindow = () => {
const mainWindow = new BrowserWindow()
// 加载 index.html
mainWindow.loadFile('web-mobile/index.html')
}
...4. 再次运行 Electron，ohhhhhhhhhhhhh！！！
ohhhhhhhhhhhhh！！！
三、打包到 exe
最快捷的打包方式是使用 Electron Forge，它非常的简单易用。
1. 安装 Electron Forge，在控制台输入以下命令：
> npm install --save-dev @electron-forge/cli2. 使用其 import 命令设置 Forge 的脚手架：
> npx electron-forge import3. 使用 Forge 的 make 命令来创建可分发的应用程序：
> npm run make啊哦，又报错了！
npm run make 命令报错
不难看出，上图黄框中即为该报错的关键信息。
还记得最最最最最开始的时候，我们在空文件夹中执行的第一个命令吗？
没错，就是npm init 初始化命令，在初始化项目配置时，author 和 description 属性是没有默认值的。
4. 现在，我们再次打开 package.json，为上述两个属性赋值。
{
...
"description": "CocosCreator & Steam Demo",
...
"author": "Thomac",
...
}5. 重新执行 Forge 的 make 命令。
这次不会再报错啦，而我们要的 exe 就在out/eleproj-win32-x64目录下。
四、一些小瑕疵的处理
1. 自定义 exe 文件的名字与图标。
修改 package.json 中 packagerConfig 相关配置，新增 name 和 icon 属性，icon图片自己准备好。
例：
{
...
"config": {
"forge": {
"packagerConfig": {
"name": "Demo",
"icon": "icon.ico"
},
...
}
}
}2. 窗口相关设置。
修改 index.js 代码，在创建 BrowserWindow 对象时传入参数对象进行自定义。
例：
/** 创建窗口 */
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 1336, // 整数型 (可选) - 窗口的宽度（以像素为单位）。 默认值为 800。
height: 768, // 整数型 (可选) - 窗口的高度（以像素为单位）。 默认值为 600。
resizable: false, // boolean (可选) - 窗口大小是否可调整。 默认值为 true。
fullscreen: true, // boolean (可选) - 窗口是否全屏. 当明确设置为 false 时，在 macOS 上全屏的按钮将被隐藏或禁用. 默认值为 false.
title: "Demo", // string(可选) - 默认窗口标题 默认为"Electron"。 如果由loadURL()加载的HTML文件中含有标签<title>，此属性将被忽略。
// icon: "", // (NativeImage | string) (可选) - 窗口图标。 在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.
frame: false, // boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true。
})
mainWindow.removeMenu() // 删除窗口的菜单栏。
// 加载 index.html
mainWindow.loadFile('web-mobile/index.html')
}更多窗口自定义设置，可参考其官方文档，链接：https://www.electronjs.org/zh/docs/latest/api/browser-window#new-browserwindowoptions。
那么今天的内容就这些吧，如果对你有帮助，求个一键三连。
下一篇我会介绍 Steamworks SDK 的接入，敬请期待！
