关注“前端学苑” ，坚持每天进步一点点
「Electron 跨平台桌面浏览器」
桌面应用程序就是GUI程序，是采用图形方式显示的计算机操作用户界面。
本文主要包括：
1、桌面应用开发选型
2、前端桌面应用：electron和nw.js区别对比
3、Electron 简介、Main（主）进程和Renderer（渲染）进程
4、electron-vue 简要介绍
5、electron 打包方式
6、踩坑总结
正文从这里开始~~~
桌面应用开发技术选型
前端桌面应用：electron和nw.js区别对比
一、原理实现对比：
Electron是由Github开发，electron的web技术：node + chromium。用HTML，css和javascript来构建跨平台桌面应用程序的一个开源库。
NW.js是Intel开发，nw.js的web技术：node + webkit。 可以嵌套我们的web页面，让我们不需要兼容不同版本的浏览器，也可以通过内置的api调用一些底层方法。
二、技术的对比
1、Electron比nwjs 社区更活跃，众多贡献者组成的活跃社区共同维护的开源项目。
2、Electron 官网的文档更全面些。
三、资料说明：
Electron官网：https://www.electronjs.org/
Electron的github地址：https://github.com/electron/electron
electron不同版本：https://npm.taobao.org/mirrors/electron/
nwjs官网：https://nwjs.io/
nwjs的github地址：https://github.com/nwjs/nw.js
最终结果，选择用electron做桌面应用开发
1、因为electron桌面应用社区活跃度高，官网文档比较全面。
2、 因为现在vue框架比较火，针对桌面应用有electron-vue框架，更加方便。
Electron 简介
1、理解Electron桌面应用
图解：electron由Node.js+Chromium+Native APIs构成。你可以理解成，它是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器，可以用来开发跨平台的桌面级应用。
2、Main（主）进程和Renderer（渲染）进程
1）主进程 - main process
electron项目启动的时候运行main.js的进程就是主进程
一个项目有且只有一个主进程
创建窗口等所有系统事件都要在主进程中进行
简单的说就是我们的electron项目的主进程只有一个, 主进程的执行代码需要写到main.js中, 所有跟系统事件相关的代码统统都要写在这里
2）渲染进程 - Renderer Process
我们每创建一个web页面都会创建一个渲染进程
每个web页面运行在它自己的渲染进程中
每个渲染进程是独立的, 它只关心它所运行的页面
简单理解就是一个web页面一个渲染进程
3）Main进程和Renderer进程通过ipcMain和ipcRenderer来进行通信。
通过事件监听和事件派发来实现两个进程通信，从而实现Main或者Renderer进程里不能实现的某些功能。
3、Electron定义包括：
1、web技术：Electron 基于node.js 和 Chromium
2、开源：社区也更活跃，众多贡献者组成的活跃社区共同维护的开源项目。
3、跨平台：兼容Mac，Windows 和 Linux。
4、摆脱了不同浏览器之间的差异和版本的限制
目前，Electron已经创建了包括VScode和Atom在内的大量应用。
4、快速启动Electron项目
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
electron-vue 简要介绍
vue只是在renderer进程里使用的框架，不涉及到main进程。
不过想要做到把vue和electron结合起来并不是一件特别容易的事。为了方便开发，我使用的是electron-vue，这个是开发者SimulatedGREG参考vue-cli的webpack模板骨架搭建的electron和vue结合的开发脚手架。
electron-vue桌面应用开发资料：
electron-vue开发文档：https://simulatedgreg.gitbooks.io/electron-vue/cn/
electron-vue的github地址：https://github.com/SimulatedGREG/electron-vue
electron-vue脚手架：https://github.com/SimulatedGREG
electron-vue感觉好的地方如下：
1、只有一个package.json。而大部分其他的项目结构依然在使用两个package.json来应对main进程和renderer进程的依赖库。
2、内建完整的vue全家桶，省去再次配置vue-router和vuex的一些初期操作。
3、内建完整的webpack开发、生产等配置，开发环境舒适。
4、内建完整的开发、构建等npm scripts，使用非常方便。
5、内建完整的Travis-ci、Appveyor配置脚本，只需少数修改就能做到利用CI自动构建的应用发布。
6、完善的文档，清晰的项目结构。
主要关注的两个文件夹：src/main和src/renderer分别对应的是main进程和renderer进程。
electron 打包方式
1、electron-packager：https://www.npmjs.com/package/electron-packager
2、electron-builder：https://github.com/electron-userland/electron-builder
简单的说，electron-builder 有比 electron-packager 更丰富的功能，支持更多的平台，同时也支持了自动更新。除了这几点外，electron-builder 打出的包更为轻量，并且可以打包出不暴露源码的 setup 安装程序。另外使用下来感觉比 electron-packager 的坑要少一点。
electron-builder的自动更新
更新机制
踩坑总结
electron 安装卡死在node install.js
使用命令sudo npm install electron -g安装electron中总是卡死node instatll.js这一步，之后就是报错: 网络超时。
npm install 报错 Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
查阅资料后，发现大体解决方法是：
1、npm 安装 node-sass 网速慢可以运行
npm config set registry https://registry.npm.taobao.org
配置国内淘宝镜像
2、编辑 ~/.npmrc
$ sudo vi ~/.npmrc
添加如下配置
registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs electron_mirror=http://npm.taobao.org/mirrors/electron/
网上找的项目地址：
需要深入研究 （重要）
https://github.com/Molunerfinn/PicGo
https://github.com/poetries/yuqing-monitor-electron
对于electron开发有两种说法：
1、很简单，不过就是web开发换了个壳
2、很难，需要了解很多原生的概念，不知道要怎么入手
electron的开发其实包括了两个部分，一个是main进程的相关开发，一个是renderer进程的相关开发。对于renderer进程的开发对于大多数前端开发人员来说不难。main进程的相关开发，如果你想要把electron的main进程的所以特性都学一遍、都用一遍，确实是需要不少时间的。
