[[280594]]

Electron 是由 Github 開發，用 HTML、CSS 和 JavaScript 來構建跨平臺桌面應用程序的一個開源庫。Electron 通過將 Chromium 和 Node.js 合并到同一個運行時環境中，并將其打包為 Mac、Windows 和 Linux 下的應用來實現這一目的。像我們大家熟悉的 Visual Studio Code 就是使用 Electron 開發的。

使用 Web 標準來創建桌面 GUI，上手快、成本低、跨平臺、自適應分辨率，這些都是 Electron 的優勢。接下來我們通過實現一個簡單的演示來了解在優麒麟上開發 Electron 應用的整個流程吧，這個演示我們將實現一個無窗口邊框的桌面小工具，一個顯示當前時間的時鐘表盤。

開發環境配置

要支持 Electron，我們需要 Node.js 運行環境和起包管理工具 npm，打開命令行工具，使用 apt install nodejs npm 命令進行安裝，安裝完成后，確認其是否已經全局可用：

# 下面這行的命令會打印出 Node.js 的版本信息
node -v
# 下面這行的命令會打印出 npm 的版本信息
npm -v

接下來安裝 Electron 以及一個好用的腳手架程序 electron-forge，后者可以讓我們快速構建一個 electron 應用：

npm install -g electron
npm install -g electron-forge

這樣我們的開發環境就搭建好了，你可能還需要一個好用的 IDE，在這里我推薦 vscode 或者是 atom，不僅好用，而且這兩個 IDE 都是 electron 開發的，如果不想用也沒關系，vim 就可以。

創建應用以及編碼

1、首先，創建一個 Electron 項目：

electron-forge init [程序名]

electron-forge 會為我們生成 packege.json 文件以及 src 目錄，并安裝好相關的 Node.js 依賴庫。src 目錄下有兩個文件 index.html 和 index.js，index.html 是一個普通的 HTML 頁面，而 index.js 是在 package.json 文件中指定的程序入口，并且 electron-forge 會為我們生成模板代碼以及相關的注釋，可以根據注釋了解相關的代碼作用。

接下來，我們使用 HTML+CSS 知識畫一個時鐘表盤，因為相對本文的內容，這部分不是關鍵，所以在此先省略，本文的代碼都會在文末公布，供大家參考。

然后，我們需要讓表盤上的指針動起來，在 index.html 中引入 clock.js 文件，添加 JavaScript 代碼讓其控制指針的運動，以秒針為例：

const second = today.getSeconds();  // 獲取當前時間
const secondDeg = ((second / 60) * 360) + 360; // 計算秒針運動角度
secondHand.style.transform = `rotate(${secondDeg}deg)`; // 添加 CSS 動畫

最后，我們調整 index.js，調用 new BrowserWindow() 生成 window 對象的時候，它的寬度和高度要根據表盤的大小作相應的調整，將 transprent 字段賦值為 true、frame 為 false，使你的程序無邊框并且背景保持透明；并且需要對new BrowserWindow() 的操作作延遲處理，這樣你的透明化操作才會生效：

app.on('ready', () => setTimeout(createWindow, 500));

應用運行以及打包發布

編碼完成之后，運行應用也是非常簡單，在工程目錄下運行命令 electron-forge start 即可。

那么如何在優麒麟上對應用進行打包發布呢？首先我們修改 package.json 文件，找到 make_targets 字段，在 linux 下，我們刪除掉 rpm，因為我們的優麒麟采用的是 debian 的打包體系，之后在工程目錄運行命令 electron-forge make，即可完成發布。注意發布后生成二進制文件和 deb 包都在 out 目錄下。程序最后的效果如下： 

總結

使用 Electron 來開發桌面程序是不是又快又好呢，大家可以試試同樣一個時鐘表盤桌面應用，使用 Gtk 或者 Qt 開發要花多少時間，才能真正體會 Electron 帶來的是什么。

這個演示的代碼放在：https://github.com/thelostwind/electron-clock/ 下，供大家參考。