共计 2815 个字符，预计需要花费 8 分钟才能阅读完成。
对 Electron 的接触也有一段时间了，大概是 3 个月，但仅仅是只是接触，并没有完全地深入学习，在网上找到的 Electron 教程少之又少，满地的 HelloWorld 看得心力交瘁，作为一名设计师，因为只懂前端的一些皮毛，对于逻辑层和底层业务开发完全是小白中的小白，在这里记录我的学习历程，分享一些学习经验，有像我一样从 0 开始学习编程的，可以相互学习。
学习 electron，环境搭建这里就不详细赘述了，网上搜索 electron 一大把，所以简单讲述一下就好了, 开发环境 win10，开发工具 VScode。
① 环境 & 开发工具
安装运行环境【NodeJS】下载地址：https://nodejs.org/en/
安装开发工具【VScode】下载地址：https://code.visualstudio.com/
② 镜像工具安装
打开控制台【cmd】安装 npm 的淘宝镜像 cnpm（可以翻墙的就不用安装了）
npm install -g cnpm --registry=https://registry.npm.taobao.org③ electron 运行环境安装
安装 electron
cnpm install -g electron④ electron 模板下载
下载 electron 快速搭建模板
https://github.com/electron/e…
⑤ 运行 electron 模板
解压到英文路径里，例如 D:develectron, 打开控制台 cmd
cd D:\dev\electron 查询对应的环境和版本，确定都正常即可继续
解压 electron-quick-start 的文件结构
在控制台输入
npm start
OK，已经跑起来了，这是万里长征的 0.0000001 步，完全可以忽略不记。
⑥ VScode 的使用
接下来我们去到 VScode 来观察代码。
后面我们直接在 VScode 调试即可，菜单栏打开 终端 -> 新建终端，底部出现 powershell 的控制台窗口，方便命令操作。
⑦ 模板代码了解
有网页设计相关知识的，对入门还是有帮助的，如果不懂 HTML，CSS，Javascript，我推荐还是先找一些免费的课程学习一下。假定你跟我一样，懂一些相关知识，我们继续往下学习和了解。
以上截图的 4 个标签对应的文件是全村的核心文件，开发 electron 都是根据这几个进行扩展的。
#package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {"start": "electron ."},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {"electron": "^7.1.0"}
}package.json 存储的是整个 app 的基本信息，就跟我们的个人介绍是一样的，可以细读一下，了解都包含些什么信息。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
index.html 和 renderer.js 是渲染层，也就是我们能看得见的层级，基本的视觉和交互操作都在这里编写。
// main.js
// 引入 electron 的 app 和 BrowserWindow 模块
const {app, BrowserWindow} = require('electron')
// 引入 nodejs 的 path 模块，用来处理文件路径
const path = require('path')
// 声明主窗体
let mainWindow
// 创建窗体函数
function createWindow () {
mainWindow = new BrowserWindow({
// 窗体属性很多，自己去了解一下 https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
width: 800, // 宽度 800
height: 600, // 高度 600
webPreferences: { // 网页功能，如预加载等可以附加进来，没有也没关系，一般在软件优化可以用上
preload: path.join(__dirname, 'preload.js') // 预加载一些程序，提高运行效率
}
})
// 主窗体载入网页，窗体相当于简化版的 chrome 浏览器
mainWindow.loadFile('index.html')
// closed 就是关闭之后，当主窗体关闭之后，执行代码，将窗体置为 null
mainWindow.on('closed', function () {mainWindow = null})
}
// app 是这个应用程序的事件生命周期，每个周期可执行相应代码，如 ready 了之后要干嘛，activate 之后要干嘛
// 这个我们去看 electron 的文档比较明了，连接 https://electronjs.org/docs/api/app
app.on('ready', createWindow) // app 触发【准备好】的时候，创建窗体
// app 触发【窗体都关闭了】执行 app 退出命令
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()})
// app 触发【激活，活动中】的时候，保持主窗体显示
app.on('activate', function () {if (mainWindow === null) createWindow()})main.js 是主进程，相当于后台控制程序，这部分是 electron 的核心部分，后期学习的难点也是在这部分。以上都做了注释，可以细看一下。
