在优麒麟上使用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工具。可以查看二进制文件的格式