在优麒麟上使用 Electron 开发桌面应用 (优麒麟 kmre)

Electron是由Github开发，用HTML、CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux下的应用来实现这一目的。像我们大家熟悉的VisualStudioCode就是使用Electron开发的。

整理分享在优麒麟上使用 Electron 开发桌面应用 (优麒麟 kmre)，希望有所帮助，仅作参考，欢迎阅读内容。

内容相关其他词:优麒麟20.04,优麒麟 kmre,优麒麟怎么用,优麒麟命令,优麒麟界面,优麒麟支持的软件,优麒麟怎么用,优麒麟 kmre,内容如对您有帮助，希望把内容链接给更多的朋友！

使用Web标准来创建桌面GUI，上手快、成本低、跨平台、自适应分辨率，这些都是Electron的优势。接下来我们通过实现一个简单的demo来了解在优麒麟上开发Electron应用的整个流程吧，这个demo我们将实现一个无窗口边框的桌面小工具，一个显示当前时间的时钟表盘。开发环境配置要支持Electron，我们需要Node.js运行环境和其包管理工具npm，打开命令行工具，使用aptinstallnodejsnpm命令进行安装，安装完成后，确认其是否已经全局可用：#下面这行的命令会打印出Node.js的版本信息node-v#下面这行的命令会打印出npm的版本信息npm-v接下来安装Electron以及一个好用的脚手架程序electron-forge，后者可以让我们快速构建一个Electron应用：npminstall-gelectronnpminstall-gelectron-forge这样我们的开发环境就搭建好了，你可能还需要一个好用的IDE，在这里我推荐vscode或者是atom，不仅好用，而且这两个IDE都是Electron开发的，如果不想用也没关系，vim就可以。创建应用以及编码首先，创建一个Electron项目：electron-forgeinit[projectname]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代码让其控制指针的运动，以秒针为例：constsecond=today.getSeconds();//获取当前时间constsecondDeg=((second/)*)+;//计算秒针运动角度secondHand.style.transform=`rotate(${secondDeg}deg)`;//添加CSS动画最后，我们调整index.js，调用newBrowserWindow()生成window对象的时候，width和height要根据表盘的大小作相应的调整，将transprent字段赋值为true、frame为false，使你的程序无边框并且背景保持透明；并且需要对newBrowserWindow()的*作作延迟处理，这样你的透明化*作才会生效：app.on('ready',()=>setTimeout(createWindow,));应用运行以及打包发布编码完成之后，运行应用也是非常简单，在工程目录下运行命令electron-forgestart即可。那么如何在优麒麟上对应用进行打包发布呢？首先我们修改package.json文件，找到"make_targets"字段，在"linux"下，我们删除掉"rpm"，因为我们的优麒麟采用的是debian的打包体系，之后在工程目录运行命令electron-forgemake，即可完成发布。注意发布后生成二进制文件和deb包都在out目录下。程序最后的效果如下：

总结使用Electron来开发桌面程序是不是又快又好呢，大家可以试试同样一个时钟表盘桌面应用，使用Gtk或者Qt开发要花多少时间，才能真正体会Electron带来的是什么。demo代码*：