Electron 跨平台应用开发的终极技能

各位朋友，是否想打造一款属于自己的桌面程序？昨天分享了炫酷的前端开源项目edex UI终端模拟器，里面就是用的electron来打包编译windows桌面程序。之前刚毕业那会有过开发windows应用的经历，不过是用C#的winform开发一点简单的应用，后面就没有然后了，代码类似如下：

今天就来介绍一下如何使用electron创建一个windows应用的流程。带你快速入门这款对新手友好，老手喜爱的开源框架。

首先介绍下electron，它是一个开源框架，可以跨平台构建桌面应用，结合chromium和nodejs，这样前端开发人员也可以开发web应用了，对前端人员非常之友好。

再说说现状，elctron社区活跃、生态繁荣，越来越标准化，但是也面临了一定的阻力。据我从事前端开发的朋友说，electron现状是苹果app store已经不太允许上架此类应用，为什么？

因为有以下几种原因：

1、体验感不太好，就是使用web技术开发，界面交互不像原生应用那么流畅，不符合苹果对于产品和用户体验的极致追求理念。

2、安全性隐患大，因为electron嵌入Chromium和nodejs运行环境，如果存在漏洞的话，这又与苹果安全性要求不符。

3、应用过大，打包完之后体积通常比较大几十上百兆，比如我简单搞个test应用，打包完有一百来兆。

4、electron应用的技术栈比较复杂，审核难度也加大了。

尽管如此，electron目前发展迅猛，前景良好，不但能在macos上用也能在windows和linux上使用，主要有以下优势，值得继续学习：

1、开发简单跨平台应用。

2、学习难度降低，因为使用web技术，对前端开发者很友好，可以快速上手。

3、生态还是很丰富，有现成的UI框架、API、工具可以使用。

4、electron对nodejs环境有完全的访问权限，调用各种模块完成业务逻辑，更加灵活可控。

好的有了electron的背景了解，我们就着手创建一个windows桌面应用（毕竟windows应用使用基数大），至于macos和linux如果会用到再分享。

创建步骤：

1、不管什么框架，先看官网介绍迅速入门，再去看别人的详细介绍即可。

官方网址：

导航栏一目了然，直接点击文档中的快速入门即可学到基础知识：

2、准备开发环境

1.nodejs,最好是12版本及以上版本。

2.python2.7,因为一部分功能在编译的时候比较依赖python2.7，而3的版本有不兼容。

3. Visual Studio Build Tools，编译的时候需要用到这个工具，可以直接上vs官网下载即可。

3、安装并创建

创建主进程main,js，创建渲染进程文件index.html，显示网页内容

在pakage.json添加启动脚本

示例main.js：

示例index.html

4、保存文件并启动

5、开发完就是打包分发了：

1.最快捷的打包方式是使用官方推荐的Electron Forge。

2.使用make命令创建可分发的应用

在你的项目out文件夹就会有一个可执行的exe应用，打开运行即可。

不管使用什么技术，创建一个hello world应用还是比较简单的。虽然咱们很难做出世界都向你问好的应用，但重要的是享受这个学习新技能的过程，培养自己的思考能力，一定会收获不一样的东西。

好了，今天的分享就到这里，感兴趣的朋友别忘了点赞关注呀！