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

摘自:https://www.cnblogs.com/uu58250/p/12796443.html

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  

          安装时提示: Missing write access to /usr/locallib ,

         可以使用root登录. 默认安装创建用户时,如果没勾选 root 用户使用相同的口令,那么安装完成以后,root 是没有设置口令的,通过sudo passwd root 输入当前普通用户的口令,之后再设置root 口令就可以了 

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知识画一个时钟表盘,因为相对本文的内容,这部分不是关键,所以在此先省略,本文的代码都会在文末公布,供大家参考。

2. 然后,我们需要让表盘上的指针动起来,在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带来的是什么。

GTK+(GIMP Toolkit)是一套源码以LGPL许可协议分发、跨平台的图形工具包。最初是为GIMP写的,已成为一个功能强大、设计灵活的一个通用图形库,是GNU/Linux下开发图形界面的应用程序的主流开发工具之一。并且,GTK+也有Windows版本和Mac OS X版。

MFC、WTL、WPF、wxWidgets、Qt、GTK 

因为您似乎主要针对Linux,所以选择主要取决于您要使用的编程语言。

如果您使用C编写代码,那么显然可以使用GTK +

如果您使用C 编写代码,请使用Qt,否则您将需要Gtkmm(GTK +上的C 包装器)

如果您使用Python进行编码,则GTK
+和Qt都具有该语言的绑定:请参见PyGtk,PyQt和PySide(由诺基亚自己发行)。

如果您使用Java进行编码,则由于诺基亚不再使用Qt
Jambi(Qt的Java绑定),因此Qt不再是可行的选择。

同样,Qt在其场景图QGraphicsScene
API,基于Javascript
Core构建的脚本引擎(为WebKit提供动力的引擎),其状态机和动画框架以及声明性UI方面更为一流。

尽管您可以与Clutter一起使用,但GTK +并没有提供太多功能。

如果您专门研究DB,XML(GTK +具有用于XML子集的解析器)和线程(GTK
+具有GLib)的功能,则Qt将提供QtSql,QtXml和QtConcurrent中的所有功能。

总而言之,我会说Qt是肯定的选择。但是GTK +也非常有能力。

我不确定您是否会清楚地回答您的问题,这可以解释为什么有些人仍然偏爱Gnome而不是KDE,反之亦然。 选择最适合您的产品。

 

objdump命令是用查看目标文件或者可执行的目标文件的构成的gcc工具。可以查看二进制文件的格式

posted @ 2021-08-23 11:19  古锁阳关  阅读(359)  评论(0编辑  收藏  举报