在优麒麟上使用 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