一、简介
Electron是github发布的跨平台桌面应用开发工具，支持Web技术开发桌面应用，其本身是基于C++开发的，GUI核心来自于Chrome，而JavaScript引擎使用v8。 简单来说，Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等。二、配置开发环境
可以使用原生的Node.js开发环境来开发Electron应用。为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本的了解。本次只针对于Windows系统进行讲解Windows开发环境配置
Electron支持Windows7及以上版本---任何在低版本Windows上开发Electron的尝试都将是徒劳无功的。
安装最新版本的Node.js：
下载node.js：https://nodejs.org/en/download/
选择Windows Installer。下载完成后，执行安装程序，根据引导完成安装即可
在安装过程中的配置界面，请够选Node.js runtime、npm package manager和Add to PATH这三个选项。
安装完成后，点击开始按钮，输入cmd，打开命令行，执行node -v、npm -v；如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！此时只需要再安装一个适合JavaScript开发的代码编辑器即可，这里推荐使用Visual Studio Code
三、Electron安装
推荐的安装方法是把它当作您app中的开发依赖项，这使您可以在不同的app中使用不同的Electron版本。
npm install --save-dev electron四、快速上手Electron
从开发的角度来看，Electron application本质上是一个Node.js应用程序。与Node.js模块相同， 应用的入口是package.json文件 。一个最基本的Electron应用一般来说会有如下的目录结构： package.json、main.js、index.html1、创建一个新的空文件夹。打开命令行工具，然后从该文件夹运行npm init
npm会帮助创建一个基本的package.json文件。其中的main字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。
{ "name":"appName", "version":"0.1.0", "main":"main.js", "script":{ "start":"electron ." }}注意：如果main字段没有在package.json中出现，那么Electron将会尝试加载index.js文件
electron模块所提供的功能都是通过命名空间暴露出来的。比如说：electron.app负责管理Electron应用程序的生命周期，electron.BrowserWindow类负责创建窗口。
2、写一个简单的main.js文件(它将在应用程序准备就绪后打开一个窗口、打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口：)
const { app, BrowerWindow } = require('electron')function createWindow() { // 创建浏览器窗口 const win = new BrowerWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 为应用加载index.html win.loadFile('index.html') // 打开开发者工具 win.webContents.openDevTools()}// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法// 部分API在ready事件触发后才能使用app.whenReady().then(createWindow)app.on('window-all-closed',()=>{ if(process.platform !== 'darwin') { app.quit() }})app.on('activate',()=>{ if(BrowserWindow.getAllWindows().length === 0){ createWindow() }})3、创建index.html
<html> <head> <meta charset="UTF-8"> <title>Hello World!title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> head> <body> <h1>Hello World!h1> We are using node <script>document.write(process.versions.node)script>, Chrome <script>document.write(process.versions.chrome)script>, and Electron <script>document.write(process.versions.electron)script> <script>console.log(process.versions)script> body>html>4、启动应用
在创建并初始化完成main.js、index.html和package.json之后，您就可以在当前工程的根目录执行npm start命令来启动刚刚编辑好的Electron程序了
