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

Electron 可让你使用纯 JavaScript 调用丰富的原生(操做系统) APIs 来创造桌面应用。 你能够把它看做一个专一于桌面应用的 Node. js 的变体，而不是 Web 服务器。

个人学习动机

前阵子用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 应用通常来讲会有以下的目录结构：

初始化项目

如下示例照搬官网
首先建立一个空文件夹，打开命令行切换到该目录下执行yarn init,注意这里我强烈推荐你使用yarn来安装本项目所须要的全部依赖，使用npm的话也许开发阶段不会有任何问题，但打包阶段会出现各类未知bug，但使用yarn会使你避免这些坑，别问为何，由于我也不知道，当初打包各类失败的时候伟大的网友告诉个人, yarn 会帮助你建立一个基本的 package.json 文件。 其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。 基本操做，没什么好说的，不懂得童鞋自行查找对应资料。
须要注意的：
若是package.json 中没有指定main的入口文件， Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。 Electron的启动命令是electron, 因此能够在script字段添加一个命令用来快速启动项目。以下：

安装 Electron

如今，你须要安装electron。把他做为项目中的开发依赖项，在app所在文件夹中运行下面的命令：
yarn add electron

开发一个简易的 Electron

首先在main.js内引入Electron模块，Electron提供了各类api使你能够调用一些原生的方法和ui，引入方法和普通的node模块同样。
const electron = require('electron')
electron 模块所提供的功能都是经过命名空间暴露出来的。 好比说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责建立窗口。 下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口：

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

在这个文件中，你能够续写应用剩下主进程代码。也能够拆分红几个文件，而后用 require 导入。
最后，建立你想展现的 index.html：

启动你的应用

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

end

Electron 使用 web 页面做为它的 GUI，因此你能把它看做成一个被 JavaScript 控制的，精简版的 Chromium浏览器。本章介绍了Electron的基础使用，在下一篇会以实战的形式将现有发布系统转换为Electron应用的开发过程和使用到的一些api及中间遇到的坑进行着重介绍。同时欢迎你们关注公众号前端小苑，我会按期在这里发表原创文章。