[[280594]]

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

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

開發(fā)環(huán)境配置

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

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

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

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

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

創(chuàng)建應(yīng)用以及編碼

1、首先，創(chuàng)建一個 Electron 項目：

electron-forge init [程序名]

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

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

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

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

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

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

應(yīng)用運行以及打包發(fā)布

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

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

總結(jié)

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

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