文章目錄

• • • • 云桌面初認識:
      • 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

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

總結

以上是生活随笔為你收集整理的Electron应用-云桌面客户端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。