在優麒麟上使用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就可以。

建立應用以及編碼

1.首先，建立一個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/下，供大家參考。