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

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

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

開發環境配置

要支持 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 就能夠。

建立應用以及編碼

首先，建立一個 Electron 項目：

electron-forge init [project name]

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 文件，添加 js 代碼讓其控制指針的運動，以秒針爲例：

const second = today.getSeconds();  // 獲取當前時間

const secondDeg = ((second / 60) * 360) + 360; // 計算秒針運動角度

secondHand.style.transform = `rotate(${secondDeg}deg)`; // 添加CSS動畫

最後，咱們調整 index.js，調用 new BrowserWindow() 生成 window 對象的時候，width 和 height 要根據錶盤的大小做相應的調整，將 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 帶來的是什麼。

demo 代碼地址：https://github.com/thelostwind/electron-clock