初识Electron

之前有个需求，说是可能会用到electron，于是稍微了解了一下，顺便做个记录。
对于初学者而言，我最关心的往往不是这个框架的内核，而是我多久能打出HelloWord，能不能满足业务需求，我投入的时间与我收获的东西等不等值（当然这一点毋庸置疑是不等值的😭）？
虽然对electron什么也不懂，没关系，上来就是萌新三连先百度一哈看看。

&01.啥是electron？

感谢seo优化逻辑，百度第一行这串字

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

就很好的解释了啥是electron。什么？你还不懂？好吧，我也不懂但我看着解释一哈。

桌面应用就是针对于pc端的各种系统（win/mac/linux）的应用程序。就好像开发移动端的小程序一样，用前端语言模拟开发Android/ios应用，electron能用前端语言开发pc端的应用。

electron作为一种为前端开发者（或说是js/html/css语言的使用者）所开发的一种能用前端语言生成桌面应用的框架。
你只需要要和往常一样编写你的前端代码，诸如布局样式，页面交互，数据处理，请求响应等等。而当你编写完成，下达了打包的命令后，electron会帮你生成对应的桌面应用。
也就是说，如果没什么细节的配置要求，你只管写你的前端代码，怎么生成桌面应用就是一句命令的事。

啥是electron？

electron是个框架，给它个命令，它能生成桌面应用，Over.

&02.为啥用electron？

贴一下之前整理的几点笔记：

简要

• Electron 跨系统 开发框架
• Electron 通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为 Mac ，Windows 和 Linux 系统下的应用来实现这一目的。同时也支持跨平台开发，诸如移动端APP,小程序,H5等，但适应性不及原生的跨平台开发框架(Weex,DCloud...)

框架特性

• 开源
• 客户端vs浏览器端 （安全性，用户体验，本地工具...）
• 适应多系统的运行环境
• 适应系统下原生的通讯联动（系统提示/任务栏常驻/崩溃监控/开机自启...）
• 个人信息、操作日志的本地化数据库存储
• 适配部分 chrome 的 crx 扩展插件
• 打包文件大(几十兆，至少包含一个浏览器程序大小)，吃内存 ## 开发 ##
• 在 /src/renderer/ 渲染进程内 进行 vue 项目开发;vue配套的工具插件(axios,vuex,router...)照常使用
• 一个主进程与多个渲染进程 模拟 多页面/多弹窗 的情景
• Electron 版本发布相当频繁
• Electron 不支持 Web Worker 多进程，使用 background process & 缓存机制
• 不同系统间存在部分api差异
• 自动更新 autoUpdater win&mac , 不支持Linux
• NeDB 嵌入式持久数据库 & 浏览器端缓存机制
• 使用fs操作系统文件

为啥用electron？

不需要额外的编写，把原来写好的前端代码搬到electron对应渲染目录下即可，快速构建一个桌面应用，还能同时适配（并非百分百适配）三个操作系统，是网页服务端向PC应用端过渡的一个不错方案，Over.

&03.怎么用electron？

emm...那我要怎么用呢？如果仅仅是知道了啥是electron，那想真正玩起来还是蛮麻烦的，你可能还会遇到不少问题，还是要看不少博客文章，当然这都是正常的。

打开官网，快速浏览下网站，你会发现官网有一个快速入门的demo。

我下过来看了一哈，感觉就真的是一个入门demo，没啥特殊的。反倒是怎么把入门demo跑起来倒花了我点时间，因为electron的下载可能需要外网资源，所以会遇到安装失败的情况，解决办法就是使用cnpm淘宝镜像源。

//npm安装electron要从国外下载一个45MB左右的zip包，
//特别的慢（8KB...），所以我们可以采用下面的这条安装命令。
//条安装命令会从淘宝的镜像站下载这个zip包，速度很快。 
$ npm install electron -g --registry=http://registry.npm.taobao.org
// 当然你也可以使用cnpm来全局安装electron 
$ npm install cnpm -g --registry=http://registry.npm.taobao.org 
$ cnpm install electron -g

你可以用electron白手起家，跟着demo自己边学边造一个工程出来；也可以在demo的基础上改改接着开发；或者呢找找看有没有脚手架之类的。

因为我之前是学习的vue，所以看到 vue-cli + electron 的关键字后就感到特别亲切。

主要依赖&版本

"electron": "^2.0.6", // latest 4.0.3| beta 5.0.0 | nightly 6.0.0, 
"vue": "^2.5.16",
"vue-cli": "^2.9.6",
"vue-electron": "^1.0.6", 
"vue-router": "^3.0.1", 
"vuex": "^3.0.1", 
"vuex-electron": "^1.0.0", 
"iview": "^3.2.2", 
"axios": "^0.18.0"

起步

P.S. vue-cli 为 2.0 版本

# 安装 vue-cli 和 脚手架样板代码 
# 此模板依赖的 electron 默认为"^2.0.6"，需求高版本的可自行更改
npm install -g vue-cli vue init simulatedgreg/electron-vue my-project 
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# pack electron application
npm run pack

开发
在/src/renderer/ 目录下 进行 vue 项目开发
打包结果会在build文件夹（还是dist来着具体我忘了）生成几个exe安装程序。
把exe文件复制到桌面，安装并打开即可。

怎么用electron？

使用vue-cli脚手架傻瓜式创建一个项目出来，并在/src/renderer/ 目录下 进行 vue 项目开发,
开发之前先看看Electron|API里有没有贴合业务需求的，有就尽量拿来用，没有再自己写,Over.

&04.EX-electron结语

即使我们什么都不写，一个空的electron工程打包完也有20mb左右的大小，我猜这是其内部浏览器的大小。

我们甚至可以说electron就是一个内部封装了一整个chrome的工程。它之所以能适配端系统，就是因为在三个系统上使用的都是同一个chrome浏览器的内核。

我们的electron开发视图也都是在这个内置的浏览器中显示，而不是我们常用的外部真实的浏览器，而且在这个内部浏览器中你也能使用开发者模式进行调试，使用chrome的大部分功能，同时又多了许多与操作系统交互的api。

相当于本来写的项目需要做不同浏览器适配，现在用electron就可以只写chrome的适配（不用IE！！！）。

然后原来是 直接在不定浏览器中访问的方式改成在一个提供且仅提供chrome浏览器功能的程序中访问业务。

当然，做窗口分辨率适配还是要的。你可以用它快速地搭建自己的桌面小应用。

最后，我们的需求是既要网页应用也可能要桌面应用，和上级沟通了一哈，选择了下面的第三种方案A。

方案C
├─── vue本地开发=>vue生产发版=>网页应用
│   ├── vue迭代版本 ↑
│   ├── vue外套electron ↓
└─── electron生产发版=>桌面应用
** 一次迭代更新vue&electron，两个都要重新发版静态文件。

方案B
├─── vue本地开发=>vue生产发版=>网页应用=>close
│   ├── vue迭代版本 ↑ 
│   ├── vue整体搬迁electron ↓
│   ├── electron内部开发 ↓
└─── electron生产发版=>桌面应用=>桌面&网页应用
** 一次迭代更新electron，需要时间搬迁原工程。

方案A
├─── vue本地开发=>vue生产发版=>网页应用
│   └───vue迭代版本 ↑ 
└─── electron 近空项目生产发版=>桌面应用
**[打开程序后仅提供vue网页工程的网址访问，类似electron打开一个百度页面的程序窗口]
** 一次迭代更新vue，Over.

End，因为对electron的业务需优先级不高，所以这个需求也先搁置下来了。我也没做更深入的研究，初识electron就到这了。

以后有时间的话可以用这个做个小程序玩玩。

参考链接

• 安装 | Electron
• Electron | API-目录
• 简介-electron-vue
• electron 两种打包
• electron入门心得
• electron学习历程
• electron+webpack2+多入口配置
• electron去边框&可拖动
• electron打开新窗口

:::