曾几何时，Windows 操作系统最鼎盛的时候，几乎是垄断了绝大多数人手中的个人计算机操作系统，除了一小部分人使用 Linux 和 MAC OS 之外，绝大多数基本都是使用 Windows。在那时候，有谁在主流人群中抱着一台 Linux 操作系统的计算机，绝对会被人看作“极客”或者“另类”；而那个年代的苹果 MAC 里面，装的几乎都是 Windows 操作系统。

操作系统多样化引发的问题

早期的计算机软件根本就不需要考虑系统兼容性的问题，甚至连那个年代的腾讯 QQ 都是全力做 Windows 版本的 QQ，MAC OS 版本的 QQ 基本是敷衍了事，Linux 版本的 QQ 只支持最基本的聊天功能。归根到底，用户群体决定了这些大型的软件公司的开发方向。

对于那一小部分的 Linux 玩家来说，当时的 Linux 远远没有现在那么“有用”，甚至 Linux 操作系统下的基本工作软件都无法确保。既然大公司放弃了这块市场，那么开源软件开发者们就自己动手丰衣足食，他们开发了一些平台去逆向支持 Windows 下的软件，其中最著名的当属 WINE（Wine Is Not an Emulator）了。当然，WINE 的问世，也是在当时条件下的无奈之举，这样强硬地去兼容，必定会引起很多软件兼容性的问题。

图 1 WINE

再后来，随着 Linux 系统和 MAC OS 的使用者越来越多，这些操作系统的普及并不仅仅是 PC 端的普及，还有一大部分嵌入式设备的普及，因此软件的跨操作系统平台就显得尤为重要了。与此同时，这个时间段还有一个标志性的技术改革，即 web 技术的发展，促使越来越多传统的 C/S 结构（客户端 - 服务器）软件，都在转向 B/S（浏览器 - 客户端）结构。

那么问题来了，既然 web 端从服务器处请求过来的网页都是通过 HTML+CSS+Javascript 技术来实现的，并且这些软件都可以在不同平台的浏览器上面正常运行，那么 HTML+CSS+Javascript 技术就是一种现成的跨平台技术，而我们只需要为不同平台开发不同的 HTML+CSS+Javascript 容器就可以了。本文要讲述的 Electron 就是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。

图 2 electron

安装 Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生桌面应用程序的框架，Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

搭建 electron 框架的步骤很简单：

第一步：在使用 Electron 之前，您需要安装 Node.js，Node.js 可以去官网上面下载，链接：https://nodejs.org/zh-cn/，下载好了之后，以默认选项安装。安装好之后，我们可以在命令行或者 Linux 的终端里面使用“node -v”或者“npm -v”来检查 node.js 是否正常安装完成。

第二步：安装 Electron，Electron 的安装方式有两种，这里我们推荐全局安装，在命令行或者 Linux 的终端里面使用“npm install electron -g”命令来安装 electron，这会持续一段时间，速度的快慢完全取决于你的网络。

第三步：安装好 Electron 之后，我们就可以创建 Electron 的项目工程了。使用 VsCode 打开我们的项目文件夹，接着打开终端，输入“npm i --save-dev electron”以初始化 Electron 项目。

具体的 Electron 安装步骤，有兴趣的朋友可以具体参考官网：https://www.electronjs.org/docs/tutorial/quick-start。

使用 Electron 创建一个简单的 APP

上述步骤安装好 electron 之后，我们就可以开发项目了，运行完“npm i --save-dev electron”命令之后，我们会发现项目文件夹里面多了一个 electron 相关的文件夹，如图 3 所示。

图 3 初始化 electron 项目

接着，我们需要在工程中新建一个“package.json”文件，用来配置项目。“package.json”的内容如图 4 所示。

图 4 “package.json”内容

{"name":"my-electron-app","version":"0.1.0","author":"yourname","description":"MyElectronapp","main":"main.js","scripts":{"start":"electron."}}

写完“package.json”的内容之后，我们还需要写一个入口的主脚本文件，这个脚本文件即是“package.json”里面的“main.js”。“main.js”的内容如图 5 所示。

图 5 main.js 内容

const{app,BrowserWindow}=require('electron')functioncreateWindow(){  constwin=newBrowserWindow({    width:800,height:600,webPreferences:{nodeIntegration:true}})win.loadFile('index.html')}app.whenReady().then(createWindow)app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit()}})app.on('activate',()=>{if(BrowserWindow.getAllWindows().length===0){createWindow()}})

上面发生了什么？

第 1 行：为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块 。

第 3 行：在此之后，你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true，将 index.html 文件加载到窗口中。

第 15 行：你通过调用 createWindow 方法，在 electron app 第一次被初始化时创建了一个新的窗口。

第 17 行：您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。由于操作系统的 窗口管理行为 ，此监听器在 macOS 上是禁止操作的。

第 23 行：您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。例如，在首次启动应用程序后或重启运行中的应用程序。

一般在 Electron，main.js 里面的内容被称为“主进程”，这个进程类似于网站中的后台，它一般是不参与界面显示的，但是我们可以利用 Node.js 的事件驱动特性做一些后台的处理。

如果我们需要让这个程序界面正常运行，还需要建立一个用以显示的界面，这个界面可以使用纯 web 技术来实现，也可以使用 Node.js 来实现，我们在工程里面创建一个文件叫做“index.html”，并且写入一些 HTML 代码，如图 6 所示。

图 6 index.html 的内容

到目前为止 Electron 项目已经建立好，我们可以使用“npm start”命令来启动 Electron 项目，如图 7 所示。

图 7 启动 Electron

现在的这个工程里面，“index.html”里面的内容负责前端界面的显示，这里的“index.html”就是 Electron 里面的渲染进程。我们可以为这个单调的界面做几个控件，顺便再用 Javascript 来实现一些按键的响应，如图 8 所示。

图 8 渲染进程效果

图 9 渲染进程代码

Electron 测试软件

写在最后

Electron 确实是一个不错的跨平台框架，也是当前技术架构下最好的跨平台框架之一。用它结合一些前端的框架，如 VUE，REACT 等，可以做出非常惊艳的交互界面。如果那你不想使用 QT 或者 .net core，那么 Electron 不妨一试。

图 10 用 Electron 开发的软件