桌面应用程序开发

参考文献：

https://www.cnblogs.com/meicorl/p/6008456.html

https://www.jianshu.com/p/1f12eab097ee

https://blog.csdn.net/wang839305939/article/details/80741100

https://blog.csdn.net/yi_master/article/details/84783502

1.基于HTML+CSS+Javascript开发窗口应用

 　　最近接了一个私人外包项目，用到了HTML技术开发传统的桌面应用程序，一开始也不太会，因为没有相关的开发经验，但经过一番学习后，颇有感慨，原来还可以利用HTML+CSS+JavaScript等技术来方便快速的开发界面漂亮的Windows桌面应用程序。通过这个项目，感觉自己也学到了不少新知识，遂写点东西记录一下自己在开发过程中的一些心得感悟。

      以前开发桌面应用程序我一般都喜欢选择MFC+Visual C++或者C#等语言来编写应用，但是感觉极为不方便。一是，写出来的窗口界面都不太好看；二是，代码量比较大；三是，软件跨平台特性也不好。近些年HTML技术快速发展，利用HTML5+CSS3可以快速的开发漂亮的各种网页，同时也出现了一些利用此类技术来快速开发桌面应用的技术和工具。

      这里，介绍一种非常好用的工具 ——nw.js（http://nwjs.io）,nw.js实际上 是node.js和webkit的结合体，webkit提供DOM操作，node.js提供本地化操作，且将二者的context完全整合，可在HTML代码中直接使用node.js的API，功能十分强大。

      有了这个工具，利用HTML等技术来开发桌面应用变得易如反掌（当然，需要开发者熟悉HTML、CSS3、JavaScript等网页开发技术）。

2.easy-window | HTML5桌面应用程序开发

一 背景
通常我们开发桌面程序选择java swing，这无疑是一个好选择；
之前我写过一篇《swing和java里嵌入浏览器使用JavaFX的方式》也是来探索将swing 与html相结合来开发桌面程序；
今天发现一个更简单的工具，实现桌面程序的开发 --easy-window。
二 优势
不需要掌握java 、C++等语言，只需要html、css、js;
甚至不需要懂程序，就可以做一个桌面程序。
三 分享
1.工具
easy-window.exe

3.跨越平台桌面应用开发框架electron使用的心路历程

前言

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

目录：

我是什么时候开始接触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中的服务端了，我开始就这么干的，一看到node就激动了，这样你会遇见很多坑的，而且可能还爬不出来。
electron的弊端

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

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

 4.Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析