服务器评测
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/下，供大家参考。
本文永久更新链接地址：https://www.linuxidc.com/Linux/2019-10/161183.htm
