Electron入门介绍
Electron是什么
可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。
PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适用哪个。
对于Web应用：
优点：
- 部署、升级方便。用户通过浏览器就可以访问；
- HTML/JS/CSS编写，方便且高效；
- windows、linux都支持；
缺点：
- 对于开发者：浏览器适配比较繁琐；
- 对于开发者：有些应用，必须指定浏览器或版本。比如OCX必须是IE内核，H5要求浏览器必须是较高版本；
- 对于用户：传统行业中，部分用户对web应用不习惯，尤其在专业工具软件方面，觉得web应用没有桌面应用用起来踏实。
- 对于开发者：必须打开浏览器，输入一长串URL地址（虽然可以建立浏览器收藏夹或者创建URL的快捷方式到桌面，但大部分用户不会这么做）；
因为之前开发的一款应用是专业工具软件，给科研院所的设计人员使用。而且用户的大部分系统是XP，且不允许安装非IE浏览器。我们发现，采用web方式，效果很不好。因此决定用桌面应用。
考虑到开发效率、人员配备情况以及后续的升级，于是调研了一下nw.js和Electron技术。本文主要讲解Electron的入门。（注：Electron的一个遗憾，不支持XP系统。nw.js 0.14.7以后版本不支持XP系统。）
Electron网址：
https://electronjs.org/
https://github.com/electron/e...
环境安装（Windows）
Node.js安装
Electron中使用了Node.js，因此首先安装Node.js。安装十分简单，直接从官网下载安装包，点击安装即可。当前最新版本8.9.4。
新版本的Node.js中自动集成了npm，npm是JS的包管理器。可以帮助我们管理包的下载、依赖、部署、发布等。可以认为是js中的maven。
安装完后，在命令行窗口中分别输入node -v和npm -v来查看node和npm的版本。
cnpm安装（非必须）
考虑到npm下载包时是从国外的服务器上下载，不仅速度慢，而且不稳定。因此，建议使用淘宝npm镜像（官网：https://npm.taobao.org/）。
安装cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm的使用方法和npm一样。后续使用中，npm全部替换为cnpm即可。
例子
从github上下载第一个示例，运行看效果
# 克隆这仓库 > git clone https://github.com/electron/electron-quick-start # 进入仓库 > cd electron-quick-start # 安装依赖库 > cnpm install # 运行应用，也可以用： cnpm run start > cnpm start
注意：需要安装git，具体安装步骤这里不描述。另外，注意这里使用的cnpm。
如果没有安装git，直接下载压缩包也可以。
命令行中执行上述操作，最后的效果：
（注：我把命令行窗户和弹出的Hello World窗口截在一张图了）
主要文件结构
进入到electron-quick-start文件夹，可以看到主要目录结构
electron-quick-start/ ├── package.json ├── main.js ├── index.html ├── node_modules/
index.html：窗口中显示的内容，在index.html中
package.json：项目的配置信息和所需的各种模块，在这里配置。npm install命令根据它，自动下载所需模块
main.js：用于创建窗口和处理系统事件
node_modules：npm install安装包的位置。如果是全局安装，则不在这个目录。
可以打开各个文件和目录，看看具体的内容，先大致了解，有个整体概念。
例子中package.json简要解释
"name": "electron-quick-start"
通过name字段，指定窗口标题。
"main": "main.js"
通过main字段，指定应用的启动脚本。如果未指定，Electron会优先加载index.js。
"scripts": { "start": "electron ." }配置npm的命令，这里是start命令。npm start命令调用的就是这里的“electron .”
注意：这里直接使用的是"electron ."，而不是"node_modules.binelectron ."。虽然前面electron模块是局部安装，但是运行npm命令时，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。因此，即使非全局安装，electron也可以不带路径。这里的electron其实就是一个shell脚本。
"devDependencies": { "electron": "~1.6.2" }配置依赖的模块，这里只有Electron模块。
自己手动编写一个例子，并运行
如果上诉的简单例子还不够直观，可以自己建立一个。
》创建一个文件夹ETest；
》该文件夹下建立三个文件：index.html, main.js, package.json。文件的内容参考上诉例子；
》打开命令窗口，cd到ETest目录下；
》启动程序：e:githubelectron-quick-startnode_modules.binelectron .
》完成。
注意这里直接使用的是上一步electron-quick-start例子中的electron命令。
还有一个重要例子
github上有一个electron-api-demos的例子，里面介绍了主要的一些功能及实现代码。可以下载下来参考：
> git clone https://github.com/electron/electron-api-demos > cd electron-api-demos > cnpm install > cnpm start
结果界面：
这里例子中，展示了：
》创建新窗口；
》管理窗口状态；
》窗口失去焦点和获取焦点的事件；
》创建无边框窗口；
》自定义菜单和右键菜单；
》注册键盘快捷键
》打开外部链接；
》通知消息（带图片）；
》使用系统窗口（文件选择窗口、错误提示窗口、信息提示窗口、保存窗口）
》添加系统状态栏图标；
》多进程间通信；
》获取系统信息；
》拷贝和粘贴；
》打印PDF；
》截图。
要更深入的了解，可以参网上相应的文档。