初步理解
简介
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
主进程
在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。
主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。
创建 Electron 应用
目录结构
app/
├── package.json //配置声明文件
├── main.js //主进程渲染文件
├── renderer.js //渲染进程文件
└── index.html //主入口文件
1.1 创建app目录，在目录中新建index.html及main.js文件（暂时不考虑renderer.js）
index.html文件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
<script>
//require('./renderer.js')
</script>
</html>
main.js文件示例：
// var app = require('app'); // 控制应用生命周期的模块。
// var BrowserWindow = require('browser-window'); // 创建原生浏览器窗口的模块
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
// 保持一个对于 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;
});
});
1.2 创建配置文件package.json ( npm init -y )
package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：
{
"name" : "app",
"version" : "1.0.1",
"main" : "main.js"
}
运行 Electron 应用
安装electron-prebuilt运行项目
npm install electron-prebuilt -save
你只需要按照如下方式直接运行你的应用
electron .
程序执行成功了...
22.png
Electron 应用打包
#######安装electron-packager
npm install electron-packager --save-dev
安装后可以在package.json中看到:
"devDependencies": {
"electron-packager": "^8.7.2"
}
打包阶段（有两种方法）
1.1 直接用命令打包
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
命令说明：
- location of project：项目所在路径
- name of project：打包的项目名字
- platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
- architecture：决定了使用 x86 还是 x64 还是两个架构都用
- electron version：electron 的版本
- optional options：可选选项
命令比较长，每次要是都用这个命令来打包会很烦，可以使用第二种方法；
1.2 首先在项目根目录下面的 package.json的scripts 下添加代码
"packager": "electron-packager ./ HelloWorld --all --out ./outApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
--all 可以换成 --platform=win32 --arch=ia32
- platform 是发布平台
- win32指windows平台
- linux
- darwin
- arch=ia32 指32位windows 64位的则为x64
在项目中新建outApp目录
app/
├── package.json
├── node_modules
├── outApp
├── main.js
├── renderer.js
└── index.html
使用命令 npm run-script packager
npm run-script packager
打包命令执行后，可能会遇到如下问题：
Packaging app for platform win32 ia32 using electron v1.0.1
Downloading tmp-1156-0-electron-v1.0.1-win32-x64.zip
Error: connect ETIMEDOUT 52.216.0.16:443
connect ETIMEDOUT 52.216.0.16:443
这时候需要做的是翻墙（打开蓝灯翻墙软件），多执行几次npm run-script packager，就可以成功了
成功截图如下：
23.png
打包成功啦~~
github源码地址：https://github.com/zky-Luke/electron
网友评论