Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
窗口指的就是我们在电脑端经常使用的软件时候显示Logo,标题和操作最小化,最大化,关闭按钮的标题栏及标题栏下面显示内容的整个窗口,这往往在Web前端中接触的不是那么多,但要开发一款体验不错的GUI应用将需要对窗口做不少的工作。
frame
属性且设置值为false
,如下图:
App.vue
中通过html
标签来绘制我们的标题栏,绘制后的结果如下图所示:
按钮事件和调用函数的定义均与Vue一致,我们需要考虑的是如何与Electron联通来调用对应的API:
调整窗口对象中的如下所示属性,切记启用remote:
在App.vue中导入electron
对象:
const { remote } = window.require('electron')
对应的操作API调用:
isMaxSize
的值来动态渲染最大化后的按钮,主要通过窗口对象来监听maximize
,unmaximize
来实现:
ctrl+R
可以实现刷新,但此时当我们刷新页面后会造成窗口注册的监听对象泄露,直观的表现就是放大后的窗口又不会缩小了,我们先通过监听按键来进行禁止刷新功能吧:
本篇主要介绍了对于Electron开发GUI应用是对于窗口上的标题栏的自定义,简单的做了一些演示,后续还有一块就完成了整个窗口部分的内容,一起敲起来吧。