序
每次 Electron 有最新新闻的时候，都会有很多朋友留言，问有没有相关教程，本人也是观察有一段时间了，一直鲜有人提供相关的学习内容，所以在此就给大家提供下一些入门和进阶教程，希望大家多多支持，谢谢!
本文的主要目的，是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。
案例演示
由于资源不多，直接将自己之前开源的一个 google chrome extension 代码引用过来，无需修改源码，值要配置好 electron 环境就可以运行!插件的开源仓库地址： http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension
一、Electron 是什么
官方描述
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
个人理解
就是一个Chrome浏览器封装成窗体，然后加载你做的HTML程序，直接看到效果。比较类似于手机端，基于微信的H5微网站。
应用场景
想做桌面应用，又不会c++，又不会c#，又不会swing，也不会python等各大创建桌面窗体语言，但是会HTML、CSS，没错，那就是你了。
注意!注意!注意!
由于 Electron 本身就是基于 Chromium 的，所以它的基础大小就已经很大了，应该有四五十M，如果介意文件大小的话，劝您还是再看看...
由于 Electron 本身就是基于 Chromium 的，所以它的基础大小就已经很大了，应该有四五十M，如果介意文件大小的话，劝您还是再看看...
由于 Electron 本身就是基于 Chromium 的，所以它的基础大小就已经很大了，应该有四五十M，如果介意文件大小的话，劝您还是再看看...
二、开发 Electron 需要会什么
必须的
HTML
CSS
JavaScript
其他
node.js (Electron 本身就基于node.js，不会没关系，直接照着教程来就行)
git (demo是从git仓库拿的，不会没关系，自己去下载就行)
开发工具 (本人使用的是 vscode)
三、Hello World!
官方三步start
``` bash $ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start ```
启动效果
单独启动
bash
npm start
结构分析
| -- index.html
| -- main.js
| -- package.json
index.html
你没看错，它就只是一个HTML而已!
html
Hello World!
main.js
窗口配置，主要是控制窗口的高度、宽度、入口页面、等
下面是代码的内容，一般情况下，只需要看下两个地方就行 * 入口页面配置：mainWindow.loadURL() * 打开调试工具：mainWindow.webContents.openDevTools()
``` javascript 'use strict';
const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow () { mainWindow = new BrowserWindow({width: 800, height: 600});
// 指定一个入口的html文件 mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开调试工具，其实就是chrome的那套调试工具 //mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() { mainWindow = null; }); }
app.on('ready', createWindow);
app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', function () { if (mainWindow === null) { createWindow(); } }); ```
package.json
项目名称、版本信息等，以及node.js相关的依赖配置，类似于java引用.jar
electron-packager
electron-prebuilt
两个都是用来打包成可执行应用程序的必备依赖包，细节我们在下一个步骤里面进行详细的说明