曾几何时，Windows 操作系统最鼎盛的时候，几乎是垄断了绝大多数人手中的个人计算机操作系统，除了一小部分人使用 Linux 和 MACOS 之外，绝大多数基本都是使用 Windows。

在那时候，有谁在主流人群中抱着一台 Linux 操作系统的计算机，绝对会被人看作“极客”或者“另类”；而那个年代的苹果 MAC 里面，装的几乎都是 Windows 操作系统。

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

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

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

图 1WINE

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

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

图 2electron

安装 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 的终端里面使用“npminstallelectron-g”命令来安装 electron，这会持续一段时间，速度的快慢完全取决于你的网络。

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

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

使用 Electron 创建一个简单的 APP

上述步骤安装好 electron 之后，我们就可以开发项目了，运行完“npmi--save-develectron”命令之后，我们会发现项目文件夹里面多了一个 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 所示。

图 5main.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 方法，在 electronapp 第一次被初始化时创建了一个新的窗口。

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

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

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

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

图 6index.html 的内容

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

图 7 启动 Electron

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

图 8 渲染进程效果

图 9 渲染进程代码

Electron 测试软件

写在最后

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

图 10 用 Electron 开发的软件