前言： 最近临时起意，想开发桌面应用程序，但是我们肯定都先会想到微软的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到该文件夹下面。
代码语言：javascript复制mkdir my-electron-appcd my-electron-app2.初始化项目文件夹
代码语言：javascript复制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
代码语言：javascript复制npm install --save-dev electron4.配置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的完整代码：
代码语言：javascript复制// 我们需要导入两个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/clinpx electron-forge import
(2)使用 Forge 的package命令打包发布成exe文件：
npm run packageout目录下面存放的是打包好的exe执行文件。
到这里，教程的第一节就结束了，后面会对Electron开发的更多功能知识点进行讲解！
