JS是世界上最好的语言—— 使用Electron开发桌面应用(一)

前阵子用Node+Vue搞了一个小程序的发布系统，开发期间一直在本地跑直到完成全部功能准备部署到服务器才发现了一个问题，根据官方的api小程序想要发布 必须 要依赖开发者工具！微信开发者 工具 会在你的本地启一个web服务，我们获取到它的端口号然后配合api才能完成上传。。。这就陷入了一个非常尴尬的局面，他喵的小程序开发者工具没有能运行在 linux 服务器的版本！！！

考虑不周，考虑不周。。。下次注意，代码是死的人是活的，线上行不通就想办法搞到本地吧，那么问题来了，如何能以最简单的形式让其他人的电脑上方便快捷的使用这个系统？要是能搞成一个app装在电脑上就好了，可我也不会写app呀，咦。。。等等。。。我JS可是世界上最强大的语言，不如找找有没有办法能用JS写一个app的框架吧 ，结果还真有！！！好吧，我承认我孤陋寡闻了，Electron就这么出现在了我的视野中，既然要拿它搞事情那就先简单的学习一下吧。

什么是Electron？

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。实际上Electron就是将Chromium和Node.js合并到同一个运行时环境中，根据你的需要将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。Electron有多牛? 这么说吧VScode和Atom都是用它撸出来的。

了解Electron的主进程和渲染器进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。

打造你的第一个Electron应用程序

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

初始化项目

安装 Electron

现在，你需要安装electron。把他作为项目中的开发依赖项，在app所在文件夹中运行下面的命令：

yarn add electron

开发一个简易的 Electron

在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。 下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口，添加后，main. js 就像下面这样：

在这个文件中，你可以续写应用剩下主进程代码。也可以拆分成几个文件，然后用 require 导入。

最后，创建你想展示的 index.html：

启动你的应用

在创建并初始化完成 main.js、 index.html和package.json之后，您就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了。