前言： 最近临时起意，想开发桌面应用程序，但是我们肯定都先会想到微软的C#。而我又不想花时间去学习C#，而且就算学了C#，还是很难快速开发出好看的Windows桌面应用。所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。首先声明，我自己也在学习Electron这个框架，所以就有了这个系列教程。你的电脑里得安装好Node.js，并且你得对Node.js和npm包管理工具的使用有基本的了解，本教程不会讲解这些过于基础的知识。
关于Electron这个框架我就不多介绍，它说白了就是Node和Chromium内核的一种封装。用它开发出来的桌面应用程序其实就是套壳浏览器的应用，这就是为什么它可以用web前端技术来开发，并且可以跨平台的原因了。
✧ 安装Electron Fiddle工具
在开发第一个桌面应用之前，我要向大家推荐一款官方的工具，这个工具叫Electron Fiddle ，我们可以在这个工具里面调试代码，你可以更改里面的样例代码运行，或者把自己的项目代码添加进行运行，一般用来调试功能。
✧ 编写第一个桌面应用程序
1.创建一个项目文件夹，并cd到该文件夹下面。
mkdir my-electron-app
cd my-electron-app
2.初始化项目文件夹
npm init
注意： entry point应该是main.js , author和description可以是任何值，但对于应用程序打包是必需的。
{ "name": "my-electron-app", "version": "1.0.0", "description": "my first app", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "haiexijun", "license": "ISC" }
3.安装electron
npm install --save-dev electron
4.配置electron项目的运行命令，在package.json中的scripts下添加start命令
"scripts": { "start": "electron ." }
5.在项目的根目录下创建index.html ，先添加如下的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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 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>. </body> </html>
这个页面会显示Hello World ! 以及正在运行的 Chromium、Node.js 和 Electron 版本的信息。
6.在项目的根目录下创建一个名为main.js的文件,这个文件是整个应用程序的入口
// 我们需要导入两个electron模块 const { app, BrowserWindow } = require('electron') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600 }) let promise = win.loadFile('index.html'); } // 调用这个createWindow()函数来打开你的窗口 app.whenReady().then(() => { createWindow() })
运行npm start 就可以启动程序了。
下面对代码再做一下解释：
app模块是用于控制应用程序生命周期的模块。BrowserWindow模块是用于创建和管理应用程序窗口的模块。在 Electron 中，浏览器窗口只能在app模块的ready事件触发后才会创建。您可以使用app.whenReady()等待此事件 。
通常，您可以使用process全局platform属性来运行专门针对某些操作系统的代码。platform属性返回一个字符串，该字符串标识编译Node.js二进制文件的操作系统平台。常见属性值有：win32、darwin（mac OS系统内核）、linux
关闭所有窗口后退出应用程序（Windows 和 Linux) , 退出所有窗口通常会完全退出应用程序。
要实现这一点，请监听app模块的'window-all-closed' 事件，如果用户不在 macOS ( darwin) 上则调用app.quit()。
app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
Linux 和 Windows 应用程序在没有打开窗口时会退出，而 macOS 应用程序通常会在没有打开任何窗口的情况下继续运行，并且在没有可用窗口时激活应用程序应该打开一个新窗口。要实现此功能，请侦听app模块的activate事件，如果没有打开浏览器窗口，则调用您现有的createWindow()方法。因为不能在事件之前创建窗口，所以你应该只在你的应用程序ready之后。activate通过在现有whenReady()回调中附加事件侦听器来做到这一点。
// 调用这个createWindow()函数来打开你的窗口 app.whenReady().then(() => { createWindow() // 监听窗口激活的事件 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0){ createWindow() } }) })
7.使用预加载脚本
现在，要做的最后一件事是打印出Electron的版本号和它的依赖关系到你的网页上。在主进程中通过Node的全局进程对象访问这些信息是很简单的。但是，您不能仅仅从主进程编辑DOM，因为它无法访问渲染器的文档上下文。它们处于完全不同的进程中! 关于这些进程相关的以后具体学习讲解。
预加载脚本在渲染进程被加载之前运行，并且可以访问渲染全局变量(例如窗口和文档)和Node.js环境。
在根目录下创建一个preload.js文件，这是预加载脚本：
window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, process.versions[dependency]) } })
上面的代码访问Node.js进程。版本对象，并运行replaceText函数，将版本号插入HTML文档。要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。在main.js现有的BrowserWindow构造函数中的预加载选项。
const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) let promise = win.loadFile('index.html'); }
下面是main.js的完整代码：
// 我们需要导入两个electron模块 const { app, BrowserWindow } = require('electron') const path = require('path') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) let promise = win.loadFile('index.html'); } // 调用这个createWindow()函数来打开你的窗口 app.whenReady().then(() => { createWindow() // 监听窗口激活的事件 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0){ createWindow() } }) }) // 监控窗口全部关闭的事件 app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
8.自定义js脚本的添加
此时，您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能，你都需要添加js脚本到你的渲染过程中。因为渲染器运行在正常的web环境中，你可以在index.html文件的结束</body>标签之前添加<script>标签来包含任何你想要的脚本:
如：
<script src="./index.js"></script>
js中包含的代码可以使用与典型前端开发相同的JavaScript api，比如使用webpack来打包和缩小代码，或者使用Vue打包的代码。
9.打包发布您的应用程序
发布新应用的最快方式是使用Electron Forge
(1)添加Electron Forge作为你应用的开发依赖，并使用它的import命令来设置Forge的脚手架:
npm install --save-dev @electron-forge/cli
npx electron-forge import
(2)使用 Forge 的package命令打包发布成exe文件：
npm run package
out目录下面存放的是打包好的exe执行文件。
到这里，教程的第一节就结束了，后面会对Electron开发的更多功能知识点进行讲解，如果你想和我一起学习electron，关注我的专栏。 最后，你的点赞是我更新的动力，谢谢路过的各位大牛！
