Electron应用-云桌面客户端

文章目录

云桌面初认识:
3v融合端三大特性，十大亮点：
Electron
- 简介：
- 术语：
- 主进程与渲染进程的区别：
- 进程之间的通信：
- Electron API：
- 主进程的部分模块解析：
- 渲染进程的部分模块解析：
- 打包时的常见问题
Electron缺点：
vscode示例：

云桌面初认识:

从上图可以看得出，传统PC需要购买4台主机，而云桌面则只需要购买一个台服务器，4个终端盒子即可。

传统PC与云桌面主要有以下几点的区别：

1、数据管理传统PC的数据和计算都在本地主机上运行，无论是软件还是硬件都需要在本地进行维护，只要有一台机器坏了，就需要单独维护这台主机，比较麻烦。而云桌面是通过连接服务器使用的，数据和计算都集中在服务器上，我们只要维护服务器即可，云桌面不需要花费太多时间进行维护，更加方便。
2、安装部署我们都知道，安装部署一台PC，需要购买CPU、内存、硬盘、主板等各种硬件设备，然后人工去装配这些硬件，装完硬件后，还要安装操作系统以及各类所需要的软件。从装配到使用，可能就花费了我们一天的时间了。云桌面则大大简化了这些步骤，只需要在服务器预装好操作系统和一些软件，当我们想要使用云桌面时，只要需要把终端盒子接上显示器和网线，我们就基本能使用了，大大缩减了中间的部署安装细节。
3、兼容性虽然我们知道云桌面确实比较方便，但它的兼容性始终没办法与传统PC相比，毕竟云桌面实质上还是虚拟化技术生成出来的。
4、依赖性云桌面的数据传输，主要依赖网络带宽，因为计算和存储就集中在服务器上，所以云桌面的稳定使用需要稳定的网络环境和高质量的带宽，而传统PC由于计算存储都在本地，所以不用考虑这方面的问题。
综上所述，就目前来说，因为部分技术瓶颈，例如网络、兼容性等，云桌面确实还不能完全替代传统PC，但不妨碍它在各个领域中去投产使用，就像我们上面提到的医院、图书馆、学校以及政务大厅等地方。这些地方都有相同之处，就是对电脑的配置要求不高，人们使用的方式只是查看资料，用完就走。这对于硬件投入和维护成本来说，云桌面发挥了天然的优势。相信在不久的未来，随着技术的进步，例如：5G网络的普及、数字化越来越成熟，云桌面会成为一种趋势。
云桌面的组成：

硬件层：主要是云服务器，服务云桌面的存储数据与计算，然后到各个终端盒子，放在需要使用的地方，还有一些外接设备，例如显示器、键盘鼠标。

软件层：云服务器需要提前部署好虚拟化平台，通过虚拟技术生成出若干个云主机，再部署一些操作系统和预装软件，分配到云主机上，终端盒子接入时，服务器会自动分配其中一个云主机到终端里，然后用户就可以直接使用了。
云桌面的技术分类： 在云桌面中，其实也有技术实现的差异，接下来简单说是一些技术的分类，目前云桌面主要通过 VDI、IDV、VOI 这三种技术架构实现。
VDI（Virtual Desktop Infrastructure 虚拟桌面基础架构） VDI 主要把用户的桌面数据和计算由服务端集中处理，用户桌面只负责接收界面，VDI 在桌面移动性、服务器架构设计、集中管理控制、数据安全性方面都具有很大优势，但是 VDI 非常依赖稳定的网络环境，如果没有网络，是无法去使用 VDI 的。

IDV（Intelligent Desktop Virtualization 智能桌面虚拟化） IDV 为集中存储、分布运算的构架。该架构下服务器端存放系统镜像，客户机通过本地虚拟机运行虚拟桌面,不需要大量的图像传输，支持系统离线运行。相对 VDI 有了很大改善，但是该模式对客户机的要求比较高：配置必须一致及支持虚拟终端。由于硬件虚拟化层在客户机运行，性能和兼容性还是没有办法和传统的PC机相比。

VOI（Virtual Operatingsystem Infrastructure 虚拟操作系统基础架构） VOI无任何硬件虚拟化层，其本身是无盘工作站模式。VOI为集中存储、分布运算的构架。该架构主要是服务器存储数据，在终端运行桌面。终端只需在启动时从服务器端将操作系统和应用加载到本地缓存即可使本地计算机能正常使用。该模式支持离线运行、支持桌面系统集中安全管理，而且桌面性能完全保持传统PC的体验，不存在兼容性问题，同时支持本地机器无硬盘启动。对数据的安全性、硬件的精简做了进一步改善。

3v融合端三大特性，十大亮点：

特性一、实验教学在云端，随时随地灵活访问

通过噢易教育融合桌面云技术，师生将获得一台长在云端的电脑，操作系统和应用运行所需的计算和存储能力集中在云端的数据中心执行。师生通过移动设备随时随地访问自己的云端桌面，通过网页快速访问教学网盘，按需存储教学资料并设置共享权限，教学空间被随身携带，让实验教学、实验实训活动开展得更加便捷灵活！

教学桌面、个人桌面，满足用户多重需求（图）

亮点详解

1、灵活访问多桌面，窗口同屏显示使用更便捷：在网络攻防课程、专业实践等场景中，需同时开启多个桌面云系统用于实验实训，噢易教育融合桌面云提供系统多开功能，师生可在客户端中按需开启多个桌面以窗口的方式共存显示，无需来回重启、设置选单参数，灵活访问，操作流畅，使用便捷；

2、桌面分层存储，一朵云覆盖教学办公全场景需求：管理员无需分离服务器即可同时部署教学桌面和个人桌面，根据不同桌面类型指定全局的数据存放路径，让系统镜像统一运行于速度更快的固态盘，让个人数据集中存放于空间更大的机械盘，不同桌面的分层存储、融合运行一次指定操作完成；

3、新虚实双系统，双重保障教学连续性：通过部署VDI+VOI/IDV架构桌面云的模式，提供虚拟桌面和本地桌面，结合融合模板技术，两个桌面之间实现数据互通，保障教学连续性的同时简化运维管理；

4、支持国产操作系统和终端，打造信创教学实训环境：新增在桌面内使用国产操作系统KOS和UOS，支持X86、ARM、MIPS等多种国产架构终端连接使用，为师生提供国产化信创教学实训环境，支撑信创教育。

随时随地移动登录的个人桌面，教学环境随身携带（图）

灵活访问多个桌面，窗口同屏显示（图）

特性二、管理运维在云端，运维效率提升80%

噢易教育融合桌面云系统为管理员提供单一的融合桌面云管理平台，对全校机房数据、模板、桌面、资源进行统一管理。此次，首发“噢易一朵云”微信小程序，让管理员在无PC的环境下也能通过手机实现移动管理、远程运维，获得更简单、更高效、更便捷的云端管理新体验！

支持微信扫码登录的噢易教育融合桌面云管理平台（图）

亮点详解

1、首发“噢易一朵云”微信小程序，手机移动管理无处不在：专为教育用户量身打造的微信小程序，机房全局数据一目了然，手机移动管理多架构（VDI/VOI/IDV/TCI）融合桌面云，随时随地高效远程运维，绑定“噢易云客服”公众号，第一时间接收小程序的风险告警信息，7*24h直达客服O小易进行咨询，专业快捷更方便；

2、微信扫码登录管理平台，操作便捷更安全：WEB端噢易教育融合桌面云管理平台支持将管理账号绑定至微信，微信扫码一键快速登入，让登录更便捷、更安全；

3、单一的3V融合客户端，运维效率提升80%：全新UI界面展示，管理员只需安装一个客户端即可使用VDI、IDV、VOI三种不同架构的云桌面，同时无缝融合TCI引导启动技术，无需重复安装多个客户端，运维效率提升80%；

4、支持IPv6、IPv4的共存和混用，推动IPv6与教育新型基础设施融合发展：支持IPv6、IPv4的共存和混用，平滑演进到下一代互联网，开展教育信息化IPv6支持能力建设，响应政策的同时，让校园机房快速适应学校未来信息化发展规划，不断催生教育信息化发展下的新技术、新应用、新模式。

“噢易一朵云”微信小程序，手机移动管理无处不在（图）

单一的3V融合客户端，交付多个桌面模板（图）

特性三、云上安全保护，应急预案有保障

噢易教育融合桌面云系统为师生的日常教学、实验实训、大型考试等环境提供完备的安全保护机制，缓解数据泄漏和失窃的风险并简化合规性工作程序。即便突遭异常断电等意外情况，也能通过多种应急预案切实保障核心数据的安全，保障教学、办公的连续性，将用户风险降至最低。

亮点详解

1、完备的高可用机制，VOI主备服务器安全双保险：支持为独立的VOI桌面环境，配置两台控制服务器，主备控数据保持同步状态。当主控服务器故障时，备控服务器自动完成接管，保障数据、业务不中断，解决VOI桌面大规模应用时，主控服务器突发事故的安全隐患；

2、简便高效的应急预案机制，一键快速恢复：突遭异常断电导致客户端文件丢失、损坏时，管理员可通过重置客户端的方式快速恢复，避免教学事故发生，操作简便又高效。

VOI主备服务器，成就安全双保险（图）

噢易教育融合桌面云5.4新版本让实验教学在云端、管理运维在云端的同时，维护云端使用的安全，配备完备的应急制度，为教育用户带来卓越的云端体验，广泛应用于公共机房、语音机房、经管实训机房、3D专业机房、图书馆、多媒体教室、专业考试、云办公等多种场景，构建智慧教学新空间，带来云上无限可能！

Electron

简介：

Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。通过嵌入Chromium 和 Node.js，将js转换成二进制。无需原生开发经验，Electron允许您维护一个JavaScript代码库，并创建在Windows、macOS和Linux上工作的跨平台应用程序-。

总结：electron=chromium+node.js+Native API

chromium：提供界面UI支持，无需考虑代码兼容性。

node.js：提供操作系统底层API的能力,Nodejs中常用的Path、fs、Crypto等模块在Electron可以直接使用。

native AI：Electron内置了原生应用程序接口，可调用一些系统功能，如调用系统通知、打开系统文件夹提供支持。

注：在开发模式上, Electron在调用系统API和绘制界面上是分离开发的，下面我们来看看Electron关于进程如何划分。

术语：

NSIS:
(Nullsoft Scriptable Install System)是一个微软Windows平台上的脚本驱动的安装制作工具。它发布在免费软件许可证书下，是一个被广泛使用的替代商业专利产品类似于InstallShield。electron-builder 支持使用NSIS作为编译目标。

V8 是谷歌公司的开源的 JavaScript 引擎。它使用 C++ 编写并使用在谷歌公司开源的的浏览器 Google Chrome 上。V8 能够单独运行或者集成在任何一个 C++ 应用内。

ASAR

ASAR 代表了 Atom Shell Archive Format。一个 asar 压缩包就是一个简单的 tar 文件-就像将那些有联系的文件格式化至一个单独的文件中。Electron 能够任意读取其中的文件并且不需要解压缩整个文件。

ASAR 格式主要是为了提升 Windows 平台上的性能。

process进程

一个进程是计算机程序执行中的一个实例。Electron 应用同时使用了 main (主进程) 和一个或者多个 renderer （渲染进程）来运行多个程序。

Electron中的main.js文件进程被称为主进程，在主进程中运行的脚本通过创建web页面来展示用户界面。在普通的浏览器中，web页面是无法访问操作系统的原生资源。然而Electron 的用户在Node.js的API支持下可以在页面中和操作系统进行一些底层交互。

main process 主进程

主进程，通常是值 main.js 文件，是每个 Electron 应用的入口文件。它控制着整个 APP 的生命周期，从打开到关闭。它也管理着原生元素比如菜单，菜单栏，Dock 栏，托盘等。主进程负责创建 APP 的每个渲染进程。在主进程中运行的脚本通过创建web页面来展示用户界面。在普通的浏览器中，web页面是无法访问操作系统的原生资源。然而Electron 的用户在Node.js的API支持下可以在页面中和操作系统进行一些底层交互。

每个 app 的主进程文件都定义在 package.json 中的 main 属性当中，这也是为什么 electron . 能够知道应该使用哪个文件来启动。

renderer process 渲染进程

每个Electron中的web页面叫做渲染进程。渲染进程是你的应用内的一个浏览器窗口。

由于Electron使用了Chromium来展示web面,所以Chromium的多进程架构也被使用到。

在通常的浏览器内，网页通常运行在一个沙盒的环境挡住并且不能够使用原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

IPC

IPC 代表 Inter-Process Communication。Electron 使用 IPC 来在 [主进程] 和 [渲染进程] 之间传递 JSON 信息。

主进程与渲染进程的区别：

基本规则：

GUI 模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉主进程 vs 渲染进程脚本的概念。
一个Electron应用有且只有一个主进程。与主进程不同的是，渲染进程能够同时存在多个而且运行在不一样的进程。而且它们也能够被隐藏。
主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

进程之间的通信：

1）主进程与渲染进程通信。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

异步通讯的代码示例，演示渲染进程向主进程发送异步消息send,主进程接收该消息。同步为sendSync。

/*** 渲染进程,快捷键监听method*/
import { ipcRenderer } from 'electron';window.addEventListener('keyup', (event) => {let e = event || window.event;if (e.shiftKey && e.altKey && e.ctrlKey) {// 监听Ctrl+Alt+Shift+F12，打开控制台if (e.keyCode === 123) {ipcRenderer.send('show-console');}}
});/*** 主进程,注册打开控制台事件，在主进程发送通知时触发*/const { ipcMain } = require('electron')
showConsole() {ipcMain.on('show-console', (event) => {this.win.webContents.openDevTools();});
}

注：

同步消息会导致主进程阻塞，实际编码过程中要注意尽量避免使用同步消息，除非是有特别的需求,切记! ! !

但凡需要主进程参与的流程,不管同步消息,还是异步消息，都会或多或少的有性能消耗。消息数量少的时候不明显，但是量变引发质变。如果是因为消息通讯导致的性能下降会非常不容易发觉，这样问题排查起来就非常的困难。所以干脆就从根源上消除这个疑虑,即:主进程只要能不参与的过程就不参与。

基于ipc通信的，是将数据存放到磁盘再通过ipc通知监听方去取，所以速度取决于IO读取的速度

2）渲染进程之间的通信：BroadcastChannel。

BroadcastChannel () 方法可以创建一个特定通道名的消息广播,通过调用postMessage () 方法向特定的渲染进程发送消息。同时在对应的渲染进程中通过onmessage监听对应的消息。

// 创建一个名字为"Hello"的消息广播通道.var bc = new BroadcastChannel('Hello');
bc.postMessage('New listening connected!');...bc.onmessage = function(e) {console.log(e);
}

主进程脚本看起来像个普通的 nodejs 脚本

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;var window = null;app.on('ready', function() {window = new BrowserWindow({width: 800, height: 600});window.loadURL('http://localhost:8080');
});

渲染进程和传统的 web 界面一样，除了它具有使用 node 模块的能力：

<!DOCTYPE html>
<html>
<body>
<script>const remote = require('electron').remote;console.log(remote.app.getVersion());
</script>
</body>
</html>

不同的操作系统在各自的桌面应用上提供了不同的特性。窗口resizable在windows下可以拖拽伸缩，federal系统不行。

Electron API：

Electron 也提供了一些额外的内置组件来开发传统桌面应用。一些组件只可以在主进程中使用，一些只可以在渲染进程中使用，但是也有部分可以在这 2 种进程中都可使用。

// 主进程API：
app：控制整个应用的事件生命周期 // 已使用
autoUpdater：自动更新
BrowserView：创建和控制视图
BrowserWindow：创建和控制窗口 // 已使用
contentTracing：跟踪并确定性能问题
dialog：创建和控制本机系统对话框
globalShortcut：监听系统快捷键
inAppPurchase：（MAC专用）Mac App Store 的应用内购买
ipcMain：从主模块到渲染模块（ipcRenderer）的异步通信 // 已使用
Menu：创建远程应用以及上下文菜单 // 已使用
MenuItem：在菜单中添加菜单项
net：发出 HTTP或 HTTPS请求
netLog：记录网络事件
Notification：创建桌面通知
powerMonitor：监视电源状态，监控电脑锁屏等
powerSaveBlocker：阻止系统自动进入省电模式
protocol：注册自定义协议并拦截基于协议的请求
session：管理浏览器会话、cookie、缓存、代理设置等
systemPreferences：获取系统配置信息
TouchBar：（MAC专用）配置 TouchBar布局
Tray：添加图标和上下文菜单到系统通知区
webContents：渲染以及控制 web页面 // 已使用
// 渲染进程API：
desktopCapturer：可用来获取可用资源
ipcRenderer：从渲染模块到主模块（ipcMain）的异步通信 // 已使用
remote：可以直接调用主进程对象的方法，而无需显式地发送进程间消息 // 已使用
webFrame：允许你自定义如何渲染当前网页
// 两种进程都可用的API
clipboard：提供方法来供复制和粘贴操作
crashReporter：开启发送应用崩溃报告
nativeImage：你可以使用文件路径或nativeImage实例创建 images，用clipboard复制的图片也是nativeImage
screen：检索有关屏幕大小、显示器、光标位置等的信息
shell：提供了集成其他桌面客户端的关联功能，能使用默认应用程序打开相应功能。

主进程的部分模块解析：

（1）app模块：
负责控制应用程序的生命周期如下：

will-finish-launching：在应用完成基本启动进程之后触发
ready：当electron完成初始化后触发
before-quit：应用退出前触发
will-quit：即将退出应用时触发
quit：应用退出时触发
window-all-closed：所有窗口都关闭的时候触发，在windows和linux里，所有窗口都退出的时候通常是应用退出的时候
win.maxmize:：应用最大化
win.minmize: 应用最小化
hide: 当窗口隐藏时
close：窗口关闭

const app = require('electron').app;
// 添加应用监听事件
app.on('ready', () => {if (this.win) return;this.createWindow(); // 创建主窗口registerEvent.init(); // 注册事件// createSocket.init();         // 创建socket
});
app.on('closed', () => {this.win = null;
});
// 当所有的窗口都已经关闭的时候触发
app.on('window-all-closed', () => () => {if (process.platform !== 'darwin') {this.app.quit();}
});// 当单个应用程序退出时取消所有监听事件
app.on('will-quit', () => {this.win.webContents.send('win-log', '-------------ipcMain will quit!------------');ipcMain.removeAllListeners();
});

（2）BrowserWindow ：

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

const defaultOptions = {title: '3VClient',icon: '',width: 1200, // 窗口宽度height: 800, // 窗口高度transparent: true,frame: false, // 边框resizable: true, // 允许调整窗口大小，否则无法窗口最大化background: 'radial-gradient(#233c90, #121d38)', // 窗口背景颜色show: false, // 创建窗口后不显示窗口hasShadow: false,autoHideMenuBar: true, // 自动隐藏菜单栏，按alt显示paintWhenInitiallyHiddenBoolean: false,// fullscreen: true, // 禁止全屏，否则VDI窗口化的桌面会被覆盖，相关BUG：30064，所以也不能设置alwaysOnTop属性webPreferences: {devTools: true, // 官网似乎说是默认falsecontextIsolation: false,nodeIntegration: true // 在渲染进程引入node模块}
};
// 打开主窗口
const createMainWin = (options = {}) => {options = Object.assign(defaultOptions, options, { icon: new Tray(path.join(__dirname, '../imgs/winIcon.png')) });return new BrowserWindow(options);
};

（3）dialog模块
用来显示原生系统对话框，比如打开文件对话框、打开消息提示框等

例：打开文件对话框

// 主进程中，导入对话框API模块
const { BrowserWindow, app, dialog } = require('electron');// 打开系统目录
dialog.showOpenDialog(mainWindow, {title: 'Open File',defaultPath: 'C:\\Users\\Administrator',properties: ['openFile', 'multiSelections'],// 支持文件格式筛选，同时也支持自定义格式filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },{ name: 'All Files', extensions: ['*'] }]}).then((result) => {// 打印选中状态console.log(result.canceled);// 打印选中文件数组（绝对路径）console.log(result.filePaths);// todo 其他操作}).catch((err) => {// 捕获异常console.log(err);});

（4）globalShortcut和addEventListener的区别：

globalShortcut是主进程中注册快捷键的方式，是node.js的能力；

addEventListener是渲染进程中注册快捷键的方式，是类似于浏览器前端页面上的功能。

如：

// 主进程，注册ctrl+r重启的快捷键，终端直接重启
const child_process = require('child_process');
app.on('ready', function () {let ret = globalShortcut.register('ctrl+r', function () {child_process.execSync("reboot") });
});// 渲染进程，注册ctrl+r重启的快捷键，终端调用后端接口重启
import { ipcRenderer } from 'electron';
window.addEventListener('keyup', (event) => {let e = event || window.event;if (e.ctrlKey && e.keyCode === 82) {// 弹窗提示this.modalTip({ type: 'confirm', content: this.$t('tips.restart') }, () => {// 调用后端接口关闭，但其实后端也只是执行了reboot命令return this.$API.notify({ CmdType: 1 });});}
});

（5）Tray模块
一个Tray代表着一个操作系统通知区域的一个icon，通常情况下是和一个上下文菜单contextMenu绑定的，因为Tray模块支持右键等功能事件。

例：下面图中的托盘图标

值得一提的是，下面是打包之后应用程序的的图标，与托盘图标的配置不同，无需使用Tray，直接配置package.json即可。

{"name": "3v-client","version": "1.0.1","description": "3v融合端","main": "./dist/main.js","scripts": {},"devDependencies": {},"dependencies": {},"publish": [],"build": {"asar": true,"productName": "3v-client","appId": "com.oseasy.app","copyright": "Copyright © year oseasy","directories": {"output": "pack"},"files": ["dist/**/*"],"mac": {"identity": "com.oseasy.app","target": ["dmg"],"artifactName": "${productName}.${ext}"},"dmg": {"title": "${productName}","artifactName": "${productName}.${ext}"},"win": {"icon": "./src/static/imgs/icon.jpg",    // 配置打包后的应用程序图标"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}.${ext}"},"nsis": {"oneClick": false,"perMachine": true,"runAfterFinish": true,"allowElevation": true,"createDesktopShortcut": "always","createStartMenuShortcut": true,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": true,"artifactName": "${productName}.${ext}","shortcutName": "os easy","guid": "686308eb-9264-4d00-ba81-f17b3e261538"}},"lint-staged": {"*.js": "eslint --cache --fix","*.{html,vue,css,sass,scss}": "stylelint --fix","*.vue": "stylelint"},"_moduleAliases": {"@": "."},"_moduleDirectories": ["node_modules_custom"]
}

（6）net和axios

3v客户端中，发请求使用的是axios，因为页面的操作都是在渲染进程中进行的，而net是主进程的模块，在渲染进程中使用axios请求更快更便捷，无需使用主进程中的模块做请求。

接口调用：

在开发Electron应用时，不建议使用axios这样的库来发起网络请求。因为这种库里有很多兼容性的代码，这些代码对于Electron应用来说毫无帮助，徒增负担。

渲染进程中可以使用浏览器原生的fetch API发起http请求，它本身就是Promise的。主进程可以使用net模块的request方法，这个方法可以不用让开发者判断请求是http的还是https的。

主进程和渲染进程都可以发起网络请求，不必把网络请求封装在某类进程中。主进程也有可能有大量的业务逻辑，也需要获取服务端数据。视你的业务需求而定。

渲染进程的部分模块解析：

（1）remote模块

以前GUI相关的模块只能是在主进程中使用像是dialog和menu等，如果想要在渲染进程中使用就需要使用ipc机制向主进程申请。但remote提供了一个简单的跨进程之间通信的方法，直接在渲染进程使用GUI相关的模块功能。但在实际项目中，应减少remote模块的跨进程调用。

// 渲染进程中
const {BrowserWindow} = require("@electron/remote")createBrowserWindow() {this.win = new BrowserWindow({width: 500,height: 500});this.win.loadFile('https://www.baidu.com');
},

一：性能消耗

渲染进程通过remote模块APIQ可以访问主进程的对象和方法。功能实现上是没有问题，问题在于这些操作都是跨进程的,时间和内存消耗都远大于进程间通讯。如果渲染进程调用remote的情况和数量较少还好，但是如果大量使用remote调用，蛮引发质变,日积月后将造成非常严重的性能消耗问题，而且相关的问题排查也非常困难。

二、状态统一
渲染进程通过remote模块具备了某些主进程的权限后，很容易就会在主进程不知情的情况下进行很多其他操作，造成很多状态不统一的问题。比如，如果主进程之前已经定义好了一自定义的弹窗接口，渲染进程本可以直接使用，但是一名开发者并不知道这个接口的存在,如果他去查询主进程提供的接口方法，很容易知道这个接口是存在的。但是,因为他现在有remote模块，所以，他自己更倾向于在不通知主进程的情况下，自己完成-套新的弹窗功能。

三、构建问题

electron工程本身非常庞大，使用的是分模块构建方法，了解的同学应该知道使用的是GN构建工具.模块化的前提就是功能拆分，主进程有主进程的功能模块，渲染进程有渲染进程的功能模块，我们也可以理解它们有共同的公共模块，但是像remote模块的存在就有些不伦不类了。也许，electron团队的开发人员也渐渐认识到这种设计上的不合理，所以采取了去掉远程模块的决定。实际使用时，我们就会发现V9x版本之后，remote模块就不能使用了。

四、安全问题

remote在实际项目使用过程中，会遇到很多安全问题，比如如果electron加载了一个第三方网页,其网站已经被黑客攻破,那么黑客容易就会通过网页中的remote调用功能窃取electron客户端中的用户信息并且操作主机完成非法活动。因为remote模块的存在,黑客可以非常容易逃离沙箱的安全机制，攻击我们的电脑。

打包时的常见问题

打包前请退出电脑管家、360 等杀毒软件，否则极有可能造成electron打包失败
下载安装依赖时如果比较慢，或者是使用 npm 下载 electron 依赖比较慢(推荐)，可以使用 cnpm 从新下载依赖
当你第一次打包时，应用程序时需要下载 electron-v.xxx-xx-xx.zip 文件、winCodeSign-v.xxx.7z 文件、nsis-v.xxx.7z 文件和 nsis-resources-v.xxx.7z 四个文件，下载速度很慢，下载失败，解决办法如下：

下载 electron-v.xxxx.zip 文件失败
解决办法：直接在淘宝的文件库下载对应版本和打包平台的文件，
下载地址：https://npm.taobao.org/mirrors/electron

Windows 下载完不解压完放在：C:\Users\{userName}\AppData\Local\electron\Cache

下载 winCodeSign-v.xxx.7z 文件失败
下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
Windows 下载完解压放在：C:\Users\{userName}\AppData\Local\electron-builder\Cache\winCodeSign

下载 nsis-v.xxx.7z 文件失败
下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z
Windows 下载完解压放在：C:\Users\{userName}\AppData\Local\electron-builder\Cache\nsis

下载 nsis-resources-v.xxx.7z 文件失败
下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
Windows 下载完解压放到：C:\Users\{userName}\AppData\Local\electron-builder\Cache\nsis

注：上述winCodeSign、 nsis、 nsis-resources文件版本是目前electron-v15.3.2-win32-64.zip对应的版本，如果需要其他版本，直接修改链接中的版本号即可下载，几个 electron 相关的依赖包，版本要兼容，目前版本都是最新的。

若在使用 npm/cnpm 安装依赖完毕运行后出现 vuex 报错，请查看实际下载的版本是否和 package.json 中的版本号是否一样，如果不一样则单独指定 vuex 版本重新下载
检查打包成功，请查看 dist 目录是否有如下文件：

|—— css
|—— fonts
|—— images
|—— js
|—— static
|—— index.html
|—— main.js
|—— main.js.map

Electron-builder：打包

打包先生成一个version.json文件，再生成一个带版本号的zip文件

Electron缺点：

Electron框架依赖于Chromium内核，所以采用的是多进程模式导致CPU和内存占用比较高，另外在开发过程中发现窗口创建到网页显示还是有一定延迟，针对于一些特殊场景下窗口显示等还是有一些bug，应用对机器性能要求会偏高，在低端机器上表现会稍微差一些，包括程序启动和页面加载体感不是很好。

vscode示例：

打开开发者工具

弹窗：调用系统通知、打开弹窗、文件夹等

自己写的通知：

参考链接：
https://zhuanlan.zhihu.com/p/448866373
https://mp.weixin.qq.com/s/VeQ6VB1CYp03z2aX-G0zcQ
https://blog.csdn.net/liuzehn/article/details/108433678