基于Node.js的开源架构Electron赋能前端开发

邓杰海，刘 薇，汤小燕

（江西中医药高等专科学校教育技术中心，抚州 344000）

0 引言

软件开发可分为基于浏览器的前端Web 开发和可以直接访问本地软硬件资源的后端开发。前端开发的软件架构比较丰富，有如jQuery、vue、react和angular等应用非常广泛的架构，通过HTML、CSS、JavaScript 完成前端软件开发。基于浏览器的前端Web 开发受浏览器沙箱操作的限制，前端程序访问本地资源受到很大的约束，而在网上流动的满足各行业的业务规则的数据，最终需要通过后台服务端程序将数据持久化到本地硬盘上，可以说前端应用与后端应用相辅相成、缺一不可。

常用的后端跨平台桌面应用开发的框架有Mono、QT 等，要求具有C、C++、C#编程经验。长期从事Web 前端开发的软件从业人员，要从事后端桌面应用开发，面对这些与前端JavaScript 语言完全不同特性的语言，需要学习面向对象编程和泛型编程，这对前端开发人员来说，有一定难度。然而，在基于JavaScript 引擎V8 的Node.js 横空出世之后，使得精通HTML、CSS和JavaScript语言的前端工程师，可以使用整合了Node.js 和WebKit 技术的Electron架构，在后端桌面服务端程序开发中大放异彩。

1 JavaScript语言运行环境Node.js

Node.js 是Javascript 的一个服务器端运行环境，它使得Javascript 可以脱离浏览器的束缚而运行在服务器环境下，可以像PHP、Python 等语言一样进行服务器端程序的开发［1-2］，它是一个为实时Web（Real-time Web）应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下的架构的可扩展性［3］，这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式的程序设计模型［4］。

Node.js与Chrome 浏览器相比，除了HTML、WebKit 和显卡这些UI 相关技术没有支持外，其他功能与Chrome 浏览器十分相似［5］，它们的组成结构如图1所示。

图1 Chrome与Node.js结构图

从图1 可看出，Node.js 开发人员抽象出了Libuv层，使得Node.js的异步非阻塞模型可以兼容Windows 和基于POSIX 的操作系统等平台。在Windows 操作系统平台下，采用IOCP 机制实现，基于POSIX 的操作系统平台下，则对Libev和Libeio库进行抽象封装来实现事件驱动和异步I/O［6］。由于 Node.js 平台抽象了中间层（libuv），使得Node.js实现跨平台成为可能。

在 windows10 操作系统 64 位 CPU 架构安装Node.js v13.14.0软件过程如下：

（1）创建d: odejs目录；

（2）在 d: odejs 目录下创建 node_global 和node_cache子目录；

（3）打开https://nodejs.org/dist/v14.16.1/网页，选择node-v14.16.1-x64.msi 下载并安装至d: odejs目录下；

（4）设置npm config setprefix“d: odejs ode_global”和 npm config set cache“d: odejsnode_cache”；

（5）查看设置npm config get cache、npm config get prefix；

（6）在系统环境变量添加NODE_PATH，输入路径为：D: odejs ode_global（重启）；

（7）设置 npm 镜像源 npm install-g cnpm--registry=https://registry.npm.taobao.org、npm config set registry https://registry.npm.taobao.orgglobal、npm config set disturl https://npm.taobao.org/dist-global；

（8）添加系统变量path的内容（重启），因为cnpm 会被安装到D: odejs ode_global 下，而系统变量path并未包含该路径。

（9）在 cmd 命令状态输入 node-v、npm-v、cnpm-v，如果都能正常显示版本，则表示安装成功。

2 跨平台桌面应用开发架构Electron

Electron 是一个使用 JavaScript、HTML 和CSS 构建桌面应用程序的框架。嵌入Chromium和Node.js 到二进制的Electron 允许操作者保持一个JavaScript 代码并创建在Windows、macOS和Linux 等平台上运行的跨平台应用——不需要本地开发经验［7］。

在Electron 开发架构，有主进程和渲染进程的概念。主进程执行的文件就是模块描述文件package.json 中main 数据项指定的文件，也是开发的桌面应用程序的入口文件，它负责建渲染进程、管理应用程序的生命周期、处理本地文件系统和网络请求等任务。在Electron 应用程序中，主进程由一个Node.js 模块组成，可以通过它来访问底层操作系统的API 和功能。主进程还可以通过进程间通信（IPC）机制与渲染进程通信，实现双方之间的数据传输和消息交互。每一个Web 网页对应一个渲染进程，各个渲染进程之间是相互独立的，都是由主进程创建。主程序与渲染进程之间、渲染进程之间可以直接或间接通过消息发送或共享存储区等方法进行数据交互。

进行Electron 跨平台桌面应用程序开发，可以使用Visual Studio Code、Sublime Text 或Atom等编辑器，它们都是最常用和流行的跨平台代码编辑器，都支持Electron 开发。选择好代码编辑器，就开始安装Electron 跨平台桌面应用程序开发架构，可以使用Node.js 带的包管理器npm 进行安装，如果安装下载速度较慢，可以设置淘宝镜像使用cnpm 进行安装。如果要在电脑上安装多个版本的Electron，则不需要全局安装，本文只介绍在Windows 平台下使用npm 进行全局安装Electron。在Windows 平台下使用cmd 命令打开一个命令输入窗口，在窗口中输入npm install-g electron 命令进行全局安装，安装完成之后输入electron-v 命令，如果能正常显示版本，则表示安装成功。

3 在Electron中实现闪烁托盘程序

以创建一个托盘程序为例，来说明使用Electron进行软件开发的过程，程序实现如下功能：

（1）程序初始界面，在渲染进程网页中显示默认的托盘程序菜单项的说明信息、操作系统信息、Node.js和Electron版本信息；

（2）托盘图标每隔500 毫秒显示两个图标中的一个，以达到动态效果；

（3）点击关闭按钮，程序界面隐藏，在任务栏的托盘位置显示闪烁托盘图标；

（4）对闪烁托盘图标点击鼠标右键，程序主界面显示相应的菜单项的说明信息、操作系统信息、Node.js和Electron版本信息；

（5）在Windows 的任务管理器中不显示程序进程，以防备通过Ctrl+Alt+Del 快捷键强制退出程序；

（6）定义全局快捷键Ctrl+Alt+k，弹出是否退出程序对话框，如果选择确定则程序退出，如果不知道这个快捷键则不能退出程序，除非系统重启。

为了实现上述功能，在项目一共创建了七个文件，文件清单见附件，项目文件结构如图2红色框所示，程序运行的初始界面如图3所示。

图2 文件结构

4 结语

Electron 开发跨平台桌面应用程序的优点包括以下几点：

（1）跨平台：能够将一份代码打包成不同平台的应用，减少开发和维护成本；

（2）快速开发：使用Node.js 和JavaScript 等现有的开发技术和库，快速开发出高质量的桌面应用程序；

（3）易于维护：应用程序的维护和更新非常简单，能够快速修复bug、更新版本；

（4）大量插件：Electron 拥有一个丰富的插件库，能够方便地集成第三方库和组件。

Electron 开发跨平台桌面应用程序包括以下缺点：

（1）资源占用：由于Electron 应用程序需要同时运行Chromium 浏览器和Node.js 运行环境，因此它的资源占用会比较高，可能会导致应用程序在老旧计算机上运行缓慢；

（2）安全性：由于Electron 应用程序缺乏完善的安全措施，因此容易受到黑客攻击和恶意代码的侵入；

（3）大小：Electron 应用程序的文件大小比较大，如果需要向用户提供快速的应用程序安装体验，需要考虑这一点；

（4）学习成本：如果不熟悉Electron，学习和使用它可能需要一些时间和精力。

总体来说，Electron 开发跨平台桌面应用程序是一种很好的方式，但是在选择它之前需要综合考虑以上这些优缺点。

附件：