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

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

使用Web标准来创建桌面GUI,上手快、成本低、跨平台、自适应分辨率,这些都是Electron的优势。接下来我们通过实现一个简单的demo来了解在优麒麟上开发Electron应用的整个流程吧,这个demo我们将实现一个无窗口边框的桌面小工具,一个显示当前时间的时钟表盘。

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

开发环境配置

要支持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开发桌面应用

总结

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

这个demo的代码放在: https://github.com/thelostwind/electron-clock/下,供大家参考。

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/11680.html