在優(yōu)麒麟上使用Electron開(kāi)發(fā)桌面應(yīng)用
Electron 是由 Github 開(kāi)發(fā)，用 HTML、CSS 和 JavaScript 來(lái)構(gòu)建跨平臺(tái)桌面應(yīng)用程序的一個(gè)開(kāi)源庫(kù)。Electron 通過(guò)將 Chromium 和 Node.js 合并到同一個(gè)運(yùn)行時(shí)環(huán)境中，并將其打包為 Mac、Windows 和 Linux 下的應(yīng)用來(lái)實(shí)現(xiàn)這一目的。像我們大家熟悉的 Visual Studio Code 就是使用 Electron 開(kāi)發(fā)的。
使用 Web 標(biāo)準(zhǔn)來(lái)創(chuàng)建桌面 GUI，上手快、成本低、跨平臺(tái)、自適應(yīng)分辨率，這些都是 Electron 的優(yōu)勢(shì)。接下來(lái)我們通過(guò)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的演示來(lái)了解在優(yōu)麒麟上開(kāi)發(fā) Electron 應(yīng)用的整個(gè)流程吧，這個(gè)演示我們將實(shí)現(xiàn)一個(gè)無(wú)窗口邊框的桌面小工具，一個(gè)顯示當(dāng)前時(shí)間的時(shí)鐘表盤。
開(kāi)發(fā)環(huán)境配置
要支持 Electron，我們需要 Node.js 運(yùn)行環(huán)境和起包管理工具 npm，打開(kāi)命令行工具，使用 apt install nodejs npm 命令進(jìn)行安裝，安裝完成后，確認(rèn)其是否已經(jīng)全局可用：
# 下面這行的命令會(huì)打印出 Node.js 的版本信息node -v# 下面這行的命令會(huì)打印出 npm 的版本信息npm -v
接下來(lái)安裝 Electron 以及一個(gè)好用的腳手架程序 electron-forge，后者可以讓我們快速構(gòu)建一個(gè) electron 應(yīng)用：
npm install -g electronnpm install -g electron-forge
這樣我們的開(kāi)發(fā)環(huán)境就搭建好了，你可能還需要一個(gè)好用的 IDE，在這里我推薦 vscode 或者是 atom，不僅好用，而且這兩個(gè) IDE 都是 electron 開(kāi)發(fā)的，如果不想用也沒(méi)關(guān)系，vim 就可以。
創(chuàng)建應(yīng)用以及編碼
1、首先，創(chuàng)建一個(gè) Electron 項(xiàng)目：
electron-forge init [程序名]
electron-forge 會(huì)為我們生成 packege.json 文件以及 src 目錄，并安裝好相關(guān)的 Node.js 依賴庫(kù)。src 目錄下有兩個(gè)文件 index.html 和 index.js，index.html 是一個(gè)普通的 HTML 頁(yè)面，而 index.js 是在 package.json 文件中指定的程序入口，并且 electron-forge 會(huì)為我們生成模板代碼以及相關(guān)的注釋，可以根據(jù)注釋了解相關(guān)的代碼作用。
接下來(lái)，我們使用 HTML+CSS 知識(shí)畫一個(gè)時(shí)鐘表盤，因?yàn)橄鄬?duì)本文的內(nèi)容，這部分不是關(guān)鍵，所以在此先省略，本文的代碼都會(huì)在文末公布，供大家參考。
然后，我們需要讓表盤上的指針動(dòng)起來(lái)，在 index.html 中引入 clock.js 文件，添加 JavaScript 代碼讓其控制指針的運(yùn)動(dòng)，以秒針為例：
const second = today.getSeconds(); // 獲取當(dāng)前時(shí)間const secondDeg = ((second / 60) * 360) + 360; // 計(jì)算秒針運(yùn)動(dòng)角度secondHand.style.transform = `rotate(${secondDeg}deg)`; // 添加 CSS 動(dòng)畫
最后，我們調(diào)整 index.js，調(diào)用 new BrowserWindow() 生成 window 對(duì)象的時(shí)候，它的寬度和高度要根據(jù)表盤的大小作相應(yīng)的調(diào)整，將 transprent 字段賦值為 true、frame 為 false，使你的程序無(wú)邊框并且背景保持透明；并且需要對(duì)new BrowserWindow() 的操作作延遲處理，這樣你的透明化操作才會(huì)生效：
app.on('ready', () => setTimeout(createWindow, 500));
應(yīng)用運(yùn)行以及打包發(fā)布
編碼完成之后，運(yùn)行應(yīng)用也是非常簡(jiǎn)單，在工程目錄下運(yùn)行命令 electron-forge start 即可。
那么如何在優(yōu)麒麟上對(duì)應(yīng)用進(jìn)行打包發(fā)布呢？首先我們修改 package.json 文件，找到 make_targets 字段，在 linux 下，我們刪除掉 rpm，因?yàn)槲覀兊膬?yōu)麒麟采用的是 debian 的打包體系，之后在工程目錄運(yùn)行命令 electron-forge make，即可完成發(fā)布。注意發(fā)布后生成二進(jìn)制文件和 deb 包都在 out 目錄下。程序最后的效果如下：
總結(jié)
使用 Electron 來(lái)開(kāi)發(fā)桌面程序是不是又快又好呢，大家可以試試同樣一個(gè)時(shí)鐘表盤桌面應(yīng)用，使用 Gtk 或者 Qt 開(kāi)發(fā)要花多少時(shí)間，才能真正體會(huì) Electron 帶來(lái)的是什么。
這個(gè)演示的代碼放在：https://github.com/thelostwind/electron-clock/ 下，供大家參考。
