桌⾯应⽤程序开发
参考⽂献：
1.基于HTML+CSS+Javascript开发窗⼝应⽤
  最近接了⼀个私⼈外包项⽬，⽤到了HTML技术开发传统的桌⾯应⽤程序，⼀开始也不太会，因为没有相关的开发经验，但经过⼀番学习后，颇有感慨，原来还可以利⽤HTML+CSS+JavaScript等技术来⽅便快速的开发界⾯漂亮的Windows桌⾯应⽤程序。通过这个项⽬，感觉⾃⼰也学到了不少新知识，遂写点东西记录⼀下⾃⼰在开发过程中的⼀些⼼得感悟。
以前开发桌⾯应⽤程序我⼀般都喜欢选择MFC+Visual C++或者C#等语⾔来编写应⽤，但是感觉极为不⽅便。⼀是，写出来的窗⼝界⾯都不太好看；⼆是，代码量⽐较⼤；三是，软件跨平台特性也不好。近些年HTML技术快速发展，利⽤HTML5+CSS3可以快速的开亮的各种⽹页，同时也出现了⼀些利⽤此类技术来快速开发桌⾯应⽤的技术和⼯具。
有了这个⼯具，利⽤HTML等技术来开发桌⾯应⽤变得易如反掌（当然，需要开发者熟悉HTML、CSS3、JavaScript等⽹页开发技术）。
2.easy-window | HTML5桌⾯应⽤程序开发
⼀背景
通常我们开发桌⾯程序选择java swing，这⽆疑是⼀个好选择；
之前我写过⼀篇《swing和java⾥嵌⼊浏览器使⽤JavaFX的⽅式》也是来探索将swing 与html相结合来开发桌⾯程序；
今天发现⼀个更简单的⼯具，实现桌⾯程序的开发 --easy-window。
⼆优势
不需要掌握java 、C++等语⾔，只需要html、css、js;
甚⾄不需要懂程序，就可以做⼀个桌⾯程序。
三分享
1.⼯具
<
3.跨越平台桌⾯应⽤开发框架electron使⽤的⼼路历程
前⾔
⾸先声明⼀下这篇⽂章不谈代码，只谈⼼。
从接触Electron到真正去做出⼀个桌⾯应⽤，再到今天写下这边⽂章，⼤概花了三个⽉时间吧，到不是因为有多难，主要是这纯碎是个⼈兴趣，⾃⼰是在业余时间⼲的，公司⾥⾯⽬前还没有推⾏，这段时间开发任务⼜⽐较重，所以断断续续⽤了三⽉吧。今天写下这篇⽂章只是记录⼀下这个过程，也是和初学者分享⼀下。相信⼤多数⼈都是知道Electron最初是起源于Atom，然后从Atom剥离开来最终形成了现在的Electron，⽬前使⽤Electron來开发的桌⾯⽤⾮常多，我们最熟悉的⽐如Atom,VScode…，这类IDE，除此之外还有⼀些开发的辅助⼯具也借助于electron，⽐如iview的官⽅脚⼿架⽤来创建vue项⽬，腾讯的weFlow⼯具，等等。这些辅助⼯具将平时的⼀些命令⾏操作集成到了图像化界⾯操作中来，使⽤起来更加⽅便简洁。总的来说，electron对于我们前端来说⽤到的知识没什么特别的，但是做出来的东西感觉挺新鲜的，毕竟⼀下从做web页⾯，升华到做桌⾯应⽤了，内⼼还是有点⼩激动的。
⽬录：安卓app开发用什么框架
我是什么时候开始接触electron的
为什么作为⼀个前端要花时间在Electron这种桌⾯应⽤开发框架上去
为什么越来越对她越来越有感觉了
为什么⼀定要做成桌⾯应⽤，web⽹页不是也能⼲他的活吗
使⽤eletron需要储备哪些知识
学习electron的过程中需要注意什么
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中的服务端了，我开始就这么⼲的，⼀看到no
de就激动了，这样你会遇见很多坑的，⽽且可能还爬不出来。
electron的弊端
前⾯都是说electron是多么多么⽅便快捷，现在提⼀下，我在使⽤中遇到的弊端
窗⼝创建背景的问题，在html没有被加载完成前，窗⼝只⽤⽤背景⾊去填充，不能使⽤个性化的背景图案，这会造成⾸次加载的体验不好。
打包出来的APP太⼤，就是最简单的应⽤打包出来都有40多MB。
总结
就⼀句话，前端现在真是⽜逼⼤了，⽼本⾏web就不说了，⽤nodejs可以搭建后台服务，⽤RN,weex可以做移动端APP，现在electron连PC桌⾯端应⽤也不放过了，现在谁还敢说我们前端就是写写页⾯，写写样式的。吼！吼！
4.Electron + Vue + Vscode构建跨平台应⽤（五）Electron-Vue项⽬源码分析

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。