共计 2271 个字符，预计需要花费 6 分钟才能阅读完成。
作者：程序员学院
官网网址：https://www.chengxuyuan.com
微信公众号：华仁程序员学院
一、Electron 简介
Electron 提供了丰盛的本地（操作系统）的 API，使你可能应用纯 JavaScript 来创立桌面应用程序。与其它各种的 Node.js 运行时不同的是 Electron 专一于桌面应用程序而不是 Web 服务器。
Electron 能够让你应用纯 JavaScript 调用丰盛的原生 APIs 来发明桌面利用。你能够把它看作是专一于桌面利用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相同，Electron 应用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 管制的，精简版的 Chromium 浏览器。
二、学习前提
因为 Electron 是一个可能让你应用JavaScript 调用丰盛的原生 APIs 来发明桌面利用，所以你必须把握 JavaScript 的常识。
三、Electron 装置
1. 装置 node.js
Node.js 官网：https://nodejs.org/zh-cn/，点击下载安装即可，这里不作具体解说。
2. 查看 node.js 和 npm 是否装置胜利
node -v
npm -v
倡议把 npm 的仓库切换到国内 taobao 仓库，
注册 cnpm 命令，如下
npm install -g cnpm --registry=https://registry.npm.taobao.org3、Electron 的装置
cnpm install -g electron
electron 是否装置胜利可通过命令 electron -v 查看。
4. 打包输入工具
cnpm install -g electron-packager
5.electron 客户端工具（electron.exe）
关上链接：https://developer.aliyun.com/mirror/NPM?from=tnpm
找到对应版本，我当初装置的版本是：10.1.2
OK，下载下来并解压，能够放到 D 盘软件装置目录外面，例如：D:\Program Files
好的，咱们当初就装置好了
四、打造咱们的第一个 Electron 利用
大体上，一个 Electron 利用的目录构造如下：
CXY/
├── package.json
├── main.js
└── index.htmlpackage.json的格局和 Node 的完全一致，并且那个被 main 字段申明的脚本文件是你的利用的启动脚本，它运行在主过程上。你利用里的 package.json 看起来应该像：
{
"name" : "CXY",
"version" : "0.1.0",
"main" : "main.js"
}留神：如果 main 字段没有在 package.json 申明，Electron 会优先加载 index.js。
main.js 应该用于创立窗口和解决零碎工夫，一个典型的例子如下：
var app = require('app'); // 管制利用生命周期的模块。var BrowserWindow = require('browser-window'); // 创立原生浏览器窗口的模块
// 放弃一个对于 window 对象的全局援用，不然，当 JavaScript 被 GC，// window 会被主动地敞开 var mainWindow = null;
// 当所有窗口被敞开了，退出。app.on('window-all-closed', function() {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
// 利用会放弃活动状态
if (process.platform != 'darwin') {app.quit();
}
});
// 当 Electron 实现了初始化并且筹备创立浏览器窗口的时候 // 这个办法就被调用
app.on('ready', function() {
// 创立浏览器窗口。mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载利用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 关上开发工具
mainWindow.openDevTools();
// 当 window 被敞开，这个事件会被收回
mainWindow.on('closed', function() {
// 勾销援用 window 对象，如果你的利用反对多窗口的话，// 通常会把多个 window 对象寄存在一个数组外面，// 但这次不是。mainWindow = null;
});
});最初，你想展现的 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>
document.write(process.version)
</script>
and Electron <script>
document.write(process.versions['electron'])
</script>.
</body>
</html>
五、运行利用
办法一：用 electron 命令运行
首先关上我的项目所在目录，而后输出上面命令，回车即可运行
electron CXY
办法二：用 Electron.exe 运行
关上上述说到的 Electron.exe 装置目录，执行上面的命令：
electron.exe E:\wwwwebCXY
运行胜利!!!
