在優麒麟上使用 Electron 開發桌面應用

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/ 下，供大家參考。

訂閱“Linux 中國”官方小程式來檢視