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.js0.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，它是JS的包管理器。可以帮助我们管理包的下载、依赖、部署、发布等，可以认为是js中的maven。安装完成后在命令行窗口输入node-v和npm-v可以查看node和npm的版本。cnpm安装（非必须）考虑到npm下载包时，是从国外服务器下载的，不仅速度慢，而且不稳定。所以推荐使用淘宝npm镜像（官网：https://npm.taobao.org/）。安装cnpm：$npminstall-gcnpm--registry=https://registry.npm.taobao.orgcnpm的用法与npm相同。在后续的使用中，所有的npm都可以换成cnpm。例子从github上下载第一个例子，运行看看效果#克隆这个仓库>gitclonehttps://github.com/electron/electron-quick-start#进入仓库>cdelectron-quick-start#安装依赖库>cnpminstall#运行应用，也可以使用：cnpmrunstart>cnpmstart注意：需要安装git，具体安装步骤这里不再赘述。另外，请注意这里使用了cnpm。如果没有安装git，可以直接下载压缩包。在命令行中执行以上操作，最终效果：（注：我把命令行窗口和弹出的HelloWorld窗口剪成一张图）主要文件结构进入electron-quick-start文件夹，可以看主目录结构electron-quick-start/├──package.json├──main.js├──index.html├──node_modules/index.html：窗口显示的内容，在index.html包中。json:project的配置信息和需要的各种模块都配置在这里。根据它，npminstall命令会自动下载所需的模块main.js：用于创建窗口和处理系统事件node_modules：npminstall安装包所在位置。如果是全局安装，则不在该目录中。大家可以打开各个文件和目录，看看具体的内容，先有个大概的了解，有个整体的概念。示例中package.json简单说明了“name”：“electron-quick-start”通过name字段指定窗口标题。"main":"main.js"通过main字段指定应用的启动脚本。如果没有指定，Electron将首先加载index.js。“脚本”：{“开始”：“电子。”}配置npm命令，这里是启动命令。npmstart命令调用“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示例，介绍了一些主要的功能和实现代码，大家可以下载参考：>gitclonehttps://github.com/electron/electron-api-demos>cdelectron-api-demos>cnpminstall>cnpmstart结果界面：本例中显示：“新建一个window;"管理窗口状态;"窗口失去焦点和获得焦点事件;"创建无边框窗口;"自定义菜单和右键菜单;"注册快捷键"打开外部链接;"通知消息(带图片);"使用系统窗口（文件选择窗口、错误提示窗口、信息提示窗口、保存窗口）》添加系统状态栏图标；》多进程通信；《获取系统信息；》复制粘贴；“打印PDF；”屏幕截图。更深入的理解可以参考网上相应的文档。
