electron学习前必看-初学electron

　　最近公司须要用electron这个框架来开发跨平台应用，对于我这个尚未接触过的小白来讲确定是很陌生的。因此就在网上找了不少的文章来进行恶补这方面的知识。

首先想要用这个electron必须得要先知道这个什么东西，能够用它干什么。以及一些初学的建议。因此我在网上看到这样一篇文章，感受很不错。在此处转载一下，进行保存。同时也但愿可以帮助到和我相似的小伙伴。

 

 题目：跨越平台桌面应用开发框架electron使用心路历程

 

前言

    首先声明一下这篇文章不谈代码，只谈心。
    从接触Electron到真正去作出一个桌面应用，再到今天写下这边文章，大概花了三个月时间吧，到不是由于有多难，主要是这纯碎是我的兴趣，本身是在业余时间干的，公司里面目前尚未推行,这段时间开发任务又比较重，因此断断续续用了三月吧。今天写下这篇文章只是记录一下这个过程，也是和初学者分享一下。相信大多数人都是知道Electron最初是起源于Atom,而后从Atom剥离开来最终造成了如今的Electron，目前使用Electron來开发的桌面用很是多，咱们最熟悉的好比Atom,VScode…,这类IDE，除此以外还有一些开发的辅助工具也借助于electron，好比iview的官方脚手架用来建立vue项目，腾讯的weFlow工具，等等。这些辅助工具将平时的一些命令行操做集成到了图像化界面操做中来,使用起来更加方便简洁。总的来讲，electron对于咱们前端来讲用到的知识没什么特别的，可是作出来的东西感受挺新鲜的，毕竟一下从作web页面，升华到作桌面应用了，心里仍是有点小激动的。

目录：

1.我是何时开始接触electron的
2.为何做为一个前端要花时间在Electron这种桌面应用开发框架上去
3.为何愈来愈对她愈来愈有感受了
4.为何必定要作成桌面应用，web网页不是也能干他的活吗
5.使用eletron须要储备哪些知识
6.学习electron的过程当中须要注意什么
7.electron的弊端
我是何时开始接触electron的

    最早接触的是Weex这一类的垮终端移动APP开发框架，后来开始使用VScode编辑器，才据说Electron有多么的强大，而后跑去Electron的官网一看，首页那句醒目的标题“使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”瞬间吸引到了我，而后就开始干，从最开始的官方demo到electron-vue再到本身开始作了一个前端开发的辅助工具应用，一步步趟过来，有点喜悦，也有点头疼，虽然已经有相似Atom,VScode这样的产品了，可是发如今开发过程当中遇到的问题，度娘上仍是找不到几篇真正能解决问题的帖子，最后仍是本身去踩，可是比起weex来仍是好多了，不是黑weex，主要是他的生态建设太差了，新入门的须要花费大量的时间去学习，而且须要在实际应用中不断去发现问题，而后解决问题，关键是解决问题的过程当中不多能得到社区的帮助。言归正传，咱们仍是回到electron的话题上来。

为何做为一个前端要花时间在Electron这种桌面应用开发框架上去

    做为一个web前端开发人员，去弄桌面应用是否是有点不误正业。这个其实否则，首先electron的精华就是”使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”，这就是赤裸裸的在勾引咱们前端开发人员，臣妾就是为你服务的。其次在node出来以后，前端的定位其实开始变得模糊起来了，前端开发人员再也不仅仅局限于UI和页面,UE和业务逻辑的实现了，开始愈来愈多的接触后端的知识，‘大前端’这个名词也开始常常在各类公开场合见到，就连ES也开始和java这对兄弟也开始相认了（愈来愈像了），因此多接触一点也算是与时俱进吧。
    像Electron这种结合了Node，Chromium,html,css,js的框架，对于有志成为‘大前端’的同窗来讲，是比较有吸引力的，它是基于node的，对于熟悉node生态圈的人来讲，开发起来就更加如鱼得水了。这里可能惟一比较陌生的可能就是Chromium了，咱们能够拿面向对象的思想来看待它，electron已经帮咱们封装了对于Chromium的操做，so.咱们只须要了解electron的API就好了，刚开始接触没有必要去纠结本身对于它有多了解，当到了用electorn开发桌面应用如鱼得水的时候，咱们有时间能够去了解一下他。因此这些所谓的陌生并不会成为咱们学习和使用electorn 阻碍做为一个程序员，就是要敢于去接触新的东西，这样平时枯燥的编码生活才会多一点点色彩。
    因此，做为前端彻底能够大胆去尝试使用electron来开发桌面应用，技多不压身，在未来的某些时候或许能够为你提供一种全新的解决方案。

为何愈来愈对她愈来愈有感受了

他让我摆脱了不一样浏览器之间的差别和版本的限制，因为electron是基于Chromium的（Chromium是chrome的开发者版本），他彻底遵循W3C的标准，对ES,CSS,BOM，DOM的最新规范都有很好的支持，因此咱们在写代码的时候，什么ES6,7,8,DOM0,2,3都大胆的用起来，爽歪歪。
基于Node,生态成熟，有足够丰富的第三方包来支持咱们的开发。不必本身再绞尽脑汁的去想某个功能的实现，别人写的npm包早已帮咱们实现，这就是”拿来主义”的好处。
能够开发跨平台的桌面应用，就像weex宣传的那样“write once,run everyWhere”,只须要写一份代码，打包出来的应用能够在windows,linux，mac OS上面运行。固然这是最理想的状况，不管是RN，weex仍是electron,要作到多端共用，仍是须要在代码中作必定的适配的，大概有百分之八十是共用的吧，剩下的百分之二十仍是须要兼容一下。
为何必定要作成桌面应用，web网页不是也能干他的活吗

    在最开始的时候我也有这样的疑问,用web网页来实现不是更好吗，只要有浏览器就能够访问，并且只要终端上面有浏览器就能访问，这样还省去了应用的安装步骤多好啊。在接触久了以后发现，网页能干的他能干，并且干的更好，web不能干的，他也能干。好比：
1.他能够摆脱浏览器的沙盒机制，能够访问操做系统层面的东西。咱们在网页上面只能借助于后台服务去干这种事，而后经过http告诉前端页面，若是要处理本地文件，还得将文件传到服务器上去，让服务器处理。
2.更好的用户体验，无论咱们是作成B/S的web仍是作成客户端的形式，最终的目的实际上是在实现功能需求的同时仍是最求更好的用户体验，在用户体验上桌面应用无疑更上一层。就像你webApp和原生APP比较，原生无疑仍是体验更好。

既然electron就能够作桌面应用，那是否是就没有C#和C++什么事了

    在electron以前，桌面应用基本上是靠C#和QT来作。那为何不用他们来作，非得整个electron呢。

效率，就我我的的使用经验来看，用electron来开发相同需求的桌面应用，使用electron来开发效率明显比其余的要提升不少，并且作出来的桌面效果更佳。
C#的开发者如今基本上在各个公司都是稀有物种了，如今都跑去开发移动端应用去了，PC端的桌面应用感受没什么油水了，能用web开发的就用web了，这样天然开发的人就少了，开发人员少了若是还用他去开发，这样后期维护起来会比较困难。
除了C#不是还有QT吗，这个我没有写过，可是咱们组老大就是用QT框架来桌面应用的，可是当他看见electron的时候，感慨仍是这个写起来方便。
固然java也有相似Swing之类的桌面UI组件，可是效果比较通常，也能作比较酷的效果可是比较耗时。
固然这并非说electron 就能够替代C#和QT，每总技术都有适合他的应用场景，在作以前咱们在技术选型的时候，须要充分的考虑他们的利与弊，后面我会说说我在使用electron使用中碰见的弊端。
使用eletron须要储备哪些知识

首先须要熟练掌握前端的基础知识html,css，js，为何要强调熟练，由于做为前端，你连这都没掌握，那我仍是建议好好学习一下前端基础知识吧，等基础打牢了再出来浪。
有必定的node基础，也就是对nodejs有必定了解，知道他是什么，用来干什么的，怎么环境搭建，npm包的使用，我是建议系统的学一下nodejs,看看官方文档，而后Express或者Koa这种web服务框架看看，本身搭建一个web服务玩玩，如今流行大前端，走出去不知道nodejs，所实话有点很差意思。
在具有了上面两门绝技以后，就能够跟着官方demo,把electron的demo拉下来根据步骤，将代码跑起来，看看electron作的桌面应用到底长什么样子，感觉一下。
在demo跑起来后而后再根据demo的结构看看里面使到的API，这里我不建议一开始就去撸官方的API文档，这样你可能很快就放弃了，一看，呀这么多API那记得住啊，而后就在内心开始打退堂鼓了。一步一步来，用到什么，而后去看什么，这里我后面会将我从搭建环境到最后制做打包出APP的心路历程分享出来，有兴趣的能够留意一下，下个月吧。
学习electron的过程当中须要注意什么

首先不要急功冒进，一来就要干点什么大事，先按照文档，将demo跑起来，看看怎么搭建开发环境，怎么打包成一个可执行程序，这里打包出来的执行程序可能有点难看，可是不要在乎，先将就用着，我会在后面的笔记整理中提到如何打包成咱们平时看到那样的安装程序。
建议如今网上找一些鼻尖简单的demo看看，然要一上来就撸官方API文档，这样太枯燥了，并且好多API你一开始也用不上，看看简单的demo，将基本的API掌握，再去完善其余。
须要分清楚主进程和渲染进程，分清楚他们的职能，这样咱们在写代码的时候才不会混淆，代码的层次结构才能分的领清。
有node经验的小伙伴不要先入为主将主进程当着nodejs中的服务端了，我开始就这么干的，一看到node就激动了，这样你会碰见不少坑的，并且可能还爬不出来。
electron的弊端

    前面都是说electron是多么多么方便快捷，如今提一下，我在使用中遇到的弊端

窗口建立背景的问题，在html没有被加载完成前，窗口只用用背景色去填充，不能使用个性化的背景图案，这会形成首次加载的体验很差。
打包出来的APP太大，就是最简单的应用打包出来都有40多MB。
总结
    就一句话，前端如今真是牛逼大了，老本行web就不说了，用nodejs能够搭建后台服务，用RN,weex能够作移动端APP，如今electron连PC桌面端应用也不放过了，如今谁还敢说咱们前端就是写写页面，写写样式的。吼！吼！

 

 

转载信息：
---------------------
做者：小飞猫_
来源：CSDN
原文：https://blog.csdn.net/wang839305939/article/details/80741100