文/Edawrd
曾幾何時，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": "your name","description": "My Electron app","main": "main.js","scripts": {"start": "electron ."}}
寫完“package.json”的內容之后，我們還需要寫一個入口的主腳本文件，這個腳本文件即是“package.json”里面的“main.js”。“main.js”的內容如圖5所示。
圖5 main.js內容
const { app, BrowserWindow } = require('electron')function createWindow () {const win = new BrowserWindow({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 渲染進程代碼
<html><head><meta charset="utf-8"><title>Electron test</title><style type="text/css">h1{color:red; text-align: center;}p{color:rgb(4, 0, 255)}.but{color: tomato; text-align: center;}.but:hover{color: teal;}</style></head><body><h1>Electron測試軟件</h1><div><p>請輸入姓名：</p><input id="nameInput" type="text" size="10" maxlength="30" value=""><button class="but" onclick="showHelloworld()">你好，世界</button></div><script>function showHelloworld(){var name = document.getElementById("nameInput").value;alert("你好，" + name);}</script></body></html>
寫在最后
Electron確實是一個不錯的跨平臺框架，也是當前技術架構下最好的跨平臺框架之一。用它結合一些前端的框架，如VUE，REACT等，可以做出非常驚艷的交互界面。如果那你不想使用QT或者.net core，那么Electron不妨一試。
圖10 用Electron開發的軟件
