在优麒麟上使用 Electron 开发桌面应用
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 就可以。
创建应用以及编码
首先,创建一个 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 。
-
游戏党注意!80% 的 Steam 前 100 名游戏可在优麒麟上畅玩啦[2022-01-28]
-
优麒麟16.04版本火热登场 天津麒麟共贺开源盛事[2016-04-21]
-
优麒麟15.04版本发布派对,将在中国历史文化名城西安举办![2015-05-26]
-
《优客源创会》第七站“广州中山大学”报名开始啦![2016-06-03]
-
英国政府称Ubuntu为最安全的终端操作系统[2014-03-18]
-
【麒麟杯二等奖】开箱即用的数据可视化 PPT 演示文稿[2021-11-04]
-
如何在优麒麟上安装钉钉(DingTalk)软件[2021-06-24]
-
[快讯] 360提供Ubuntu Kylin 高速镜像下载[2014-01-16]
-
优麒麟(Ubuntu Kylin) 16.04 LTS Beta 2 开发测试版发布![2016-03-25]
-
Ubuntu Kylin 14.10 Beta 2 测试版发布![2014-09-26]
-
优麒麟(Ubuntu Kylin)14.04 LTS 产品发布会4月22日在北京成功召开![2014-04-23]
-
Linux新手大礼包:学习Linux你必须知道的那些事儿[2014-11-14]
-
优麒麟社区助力“华梦2015”之Linux技术征文大赛[2015-10-04]
-
开源探索 - 优麒麟社区发布RISC-V体验版[2022-01-06]
-
HTML5利器大阅兵,助力HTML5开发[2014-11-18]
-
干货分享 - Systemd 技术原理&实践(下)[2021-10-28]
-
优麒麟电源管理浅析(二)[2021-06-24]
-
19.10 首场发布派对 - Ubuntu与优麒麟在北京等你[2019-10-19]