electron Windows版 v2.0.2 官方版 xx

electron是GitHub最新发布的一款功能强大的桌面应用开发工具。electron官方版小巧实用，具有极强的可持续性开发性，它主要为用户提供了一个完整的框架，你可以通过将Chromium和Node.js合并到同一个运行时环境，并利用JavaScript, HTML和CSS来构建能够运行于Windows、macOS、Linux系统之上桌面应用，2.0以上版本遵循semver标准，使得软件开发更加高效灵活。

【基本介绍】

Electron是一个开源的跨平台开发框架，整合了Node.js、Chromium和V8，让开发者可以使用HTML、CSS和JavaScript编写跨平台桌面应用，使用Electron开发的应用不仅可以在Windows、Linux以及Mac平台下运行，还拥有自动更新、崩溃报告、调试分析等功能，目前微软、Facebook、Stack和Docker等多家公司都在使用Electron。

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

【软件特点】

Web 技术
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
开源
Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。
跨平台
Electron 兼容 Mac, Windows 和 Linux， 它构建的应用可在这三个操作系统上面运行。

【软件功能】

自动更新
原生的菜单和通知
崩溃报告
调试和性能分析
Windows 安装程序

【软件亮点】

一、优点
1、它依赖于每一个Web开发者都已经熟知的Web标准，让你可以用它编写桌面软件。
2、它允许开发者专注于核心功能，electron免费版去负责软件开发中复杂的部分
3、它为桌面应用提供了多种核心功能，例如自动更新、崩溃报告、安装器创建工具和一些具体的系统功能
二、缺点
没有内置的MVC，electron免费版无法完全支持Chrome平台。

【软件进程】

主进程
在 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。

【安装教程】

方式一：通过npm进行安装
通过那npm进行安装比较简单，但是要注意的是，npm是安装node时附带的包管理器，所以你需要先安装node

将下载的zip包解压打开，可以看到其目录结构，如下图所示，里面是node的相关文件，其中有几个文件需要了解下：node.exe,npm,README】，
node.exe是执行程序，双击就可以运行
npm是包管理器，通过他我们可以下载各种我们需要的包，需要你的模块
README是对于node的说明，由于是英文，看不懂的话，可以翻阅中文文档

双击目录中的nsa个绿色的node.exe文件 ，他就是nodejs的可执行文件，开始运行node，然后会弹出一个doc框出来，我在里面随便输入了些javascript代码，运行结果如下。


安装完node，就可以执行命令来安装electron了，如下：
npm install electron -g
提醒：
如果通过npm来安装在国内可能比较慢，推荐安装cnpm，使用淘宝镜像来安装我们的electron.安装cnpm的命令如下：
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装完成后可以输入cnpm -v 来查看是否安装成功，显示了版本号就代表成功了。
用cnpm来安装electron和用npm来安装electron几乎没什么区别，就是把npm改为cnpm即可
命令：cnpm install -g cnpm –registry=https://registry.npm.taobao.org
当然，安装cnpm不是必须的，你也可以不安装cnpm，直接用npm来安装electon也行


方式二：通过下载electron压缩包来使用electron
下载electron的zip压缩包，在本地解压

复制解压文件的electero.exe文件所在路径（electron.exe不要复制进来了）

将这个路径配置到环境变量中

【环境配置】

Windows 开发环境配置
首先，安装最新版本的Node.js 。 我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。 访问Node.js下载页面，选择Windows Installer。 下载完成后， 执行安装程序，根据引导完成安装即可。
在安装过程中的配置界面, 请勾选Node.js runtime、npm package manager和Add to PATH这三个选项。
安装完成后，我们需要来确认Node.js是不是可以正常工作。 点击 开始 按钮，输入PowerShell，找到Windows PowerShell。 打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：

# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -v
Copy

如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！ 然后，你只需要安装一个适合JavaScript开发的代码编辑器就可以开始开发工作了。

【使用教程】

Electron 应用的目录结构
大体上，一个 Electron 应用的目录结构如下：
electron-app/
├── package.json
├── main.js
└── index.html
即主要需要三个文件，下面来分别接收每个文件的作用：
package.json //主要用来描述我们的electron项目的一些信息
index.html //也就是我们的网页文件，也就是要用来打包为桌面应用的文件。
main.js  //用于创建窗口，把网页ui放到窗口里面来去，同时处理系统时间，

构建一个真正的electron应用
我们要依次创建package.json，index.html，main.js这三个文件
首先来创建package.json文件，主要描述一些项目信息，基本代码如下：
{
"name"    : "electron-app",
"version" : "0.1.0",
"main"    : "main.js"
}
name表示项目名称，version表示项目版本。
main表示我们应用的启动脚本，它运行在主进程上
（关于进程，文章末尾来讲，现在先不管他）
注意：
1. package.json文件的最后一个键值对的值不要在加逗号，不然会报错。
这里也就是指【"main"    : "main.js"】这个键值对。
2. 注如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js


然后我们开始创建 main.js文件 ，
用于创建窗口，把网页ui放到窗口里面来去，同时处理系统时间，
代码如下：
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;
});
});


最后我们来创建，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>


ok,所需的必须文件全部创建


开始运行，运行主要又两种方式
方式一：
在你的项目electron-app目录下，打开cmd窗口，执行electron . 这样应该就能跑起来了
如下图所示：

方式一：
打开cmd窗口，输入electron，会弹出electron的窗体来，
如下图所示，然后你复制下框中的electron.exe的路径，然后后面加一个空格在输入你的electron-app目录路径即可运行，
在我的电脑上的命令如下，每个人的电脑上肯定都不一样：
F:\installPackages\node-v9.9.0-win-x64\node_modules\electron\dist\electron.exe D:\webs\electron-app
然后就运行起来了。
注意：
如果你是直接下载electron压缩文件来使用的话，可能弹出的框不太一样，你可以直接拖动main.js进入到electron的弹框里面就能运行。

【使用实例】

如何将elecron应用打包为安装包？
我们可以使用Grunt打包Electron,生成exe的安装包
过程如下：
1. 新建一个package.json
2. 安装grunt-electron-installer
cnpm install grunt-electron-installer --save-dev
3. 安装grunt
cnpm install grunt --save-dev
4. 新建Gruntfile.js文件
5. 执行grunt进行打包

1.新建package.json文件，内容如下
{
"name": "electron-app",
"version": "0.1.0",
}

2. 安装grunt-electron-installer
执行命令：cnpm install grunt-electron-installer --save-dev

3. 安装grunt
执行命令：cnpm install grunt -g && cnpm install grunt -D

4. 新建Gruntfile.js文件
代码如下：
var grunt = require("grunt");
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
'create-windows-installer': {
x64: {
appDirectory: './appName-win32-x64',
authors: 'zhanglu.',
exe: 'appName.exe',
description:"electron-app",
}
}
})
grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);
5. 执行grunt进行打包为安装包
准备工作都完成之后，在outName目录下执行grunt就可以了
（执行中，最好退出360，电脑管家，毒霸等软件，可能会造成干扰）
打包完成后会在outName目录下生成installer文件夹，如下图：

【快捷键】

本地快捷键
您可以使用 [Menu] 模块来配置快捷键，只有在 app 处于焦点状态时才可以触发快捷键。 为此，在创建 MenuItem时必须指定一个 [accelerator] 属性。

你还可以在操作系统中配置不同的组合键。


全局快捷键


在浏览器窗口内的快捷方式
如果你想处理 BrowserWindow中的键盘快捷键，你可以监听渲染进程中 window 对象的 keyup 和 keydown 事件。

在调度页面中的keydown和keyup事件之前，会发出before-input-event事件。 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。
如果您不想手动进行快捷键解析，可以使用一些库来进行高级的按键检测。例如 mousetrap.

【相关问题】

Electron新版本多久发布一次？
Electron的版本发布相当频繁。每当Chromium、Node.js有重要的bug修复，新API或是版本更新时Electron会发布新版本。
一般Chromium发行新的稳定版后的一到两周之内，Electron中Chromium的版本会对其进行更新，具体时间根据升级所需的工作量而定。
一般Node.js发行新的稳定版一个月后，Electron中Node.js的版本会对其进行更新，具体时间根据升级所需的工作量而定。

Electron的核心理念是什么？
Electron的核心理念是：保持Electron的体积小 和 可持续性开发。
如：
为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ，Electron限制了所使用的核心项目的数量。
比如Electron只用了Chromium的渲染库而不是其全部组件。 这使得升级Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。
添加到Electron的新功能应该主要是原生 API。 如果可以的话，一个功能应该尽可能的成为一个Node.js模块。