客户端开发（Electron）认识窗口

Dear，大家好，我是“前端小鑫同学”，?长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

背景说明：

窗口指的就是我们在电脑端经常使用的软件时候显示Logo，标题和操作最小化，最大化，关闭按钮的标题栏及标题栏下面显示内容的整个窗口，这往往在Web前端中接触的不是那么多，但要开发一款体验不错的GUI应用将需要对窗口做不少的工作。

窗口（BrowserWindow）的常见属性：

• 控制窗口标题栏、菜单栏 title 默认的窗口标题 icon 当' iconType '为' custom '时使用的图标 frame 指定为false将不提供默认窗口 autoHideMenuBar 自动隐藏菜单栏，默认不自动隐藏 titleBarStyle 窗口标题栏样式，'default'
• 控制窗口位置： x 窗口距离屏幕左侧的距离 y 窗口距离屏幕顶部的距离 center 窗口是否居中显示 movable 窗口是否可移动
• 控制窗口尺寸： width 窗口宽度（像素），默认800 height 窗口高度（像素），默认600 minWidth 窗口最小宽度 minHeight 窗口最小高度 maxWidth 窗口最大宽度 maxHeight 窗口最大高度 resizable 窗口是否支持缩放，默认支持 minimizable 窗口是否支持最小化，默认支持 maximizable 窗口是否支持最大化，默认支持
• 渲染进程是否集成Node.js环境： nodeIntegration 是否启动Node.js，默认不启用 nodeIntegrationInWorker web worker中是否启动Node.js，默认不启用 nodeIntegrationInSubFrames iframe是否支持Node.js，默认不启用
• 扩展渲染进程能力： preload 指定预加载的脚本文件 webSecurity 是否禁用同源策略，默认禁用 contextIsolation 是否启用单独的上下文环境运行

自定义窗口标题栏：

• 下图是我们初始时候的标题栏和菜单栏两部分（记得当时刚学计算机课就是认识每一部分的名称?）：

• 我要自定义窗口的标题栏第一步那就是要隐藏掉默认的标题栏，在窗口对象上新增frame属性且设置值为false，如下图：

• 在Vue的App.vue中通过html标签来绘制我们的标题栏，绘制后的结果如下图所示：

为标题栏的按钮增加事件：

按钮事件和调用函数的定义均与Vue一致，我们需要考虑的是如何与Electron联通来调用对应的API：

调整窗口对象中的如下所示属性，切记启用remote：

在App.vue中导入electron对象：

const { remote } = window.require('electron')

对应的操作API调用：

当窗口最大化后如何缩小：

• 监听窗口的变化来动态切换isMaxSize的值来动态渲染最大化后的按钮，主要通过窗口对象来监听maximize，unmaximize来实现：

• 我们知道通过快捷键ctrl+R可以实现刷新，但此时当我们刷新页面后会造成窗口注册的监听对象泄露，直观的表现就是放大后的窗口又不会缩小了，我们先通过监听按键来进行禁止刷新功能吧：

窗口状态记录与恢复：

• GUI应用的一个特点就是可以通过拖动来改变窗口的位置和大小，当我们持续拖拽的过程中会产生大量的事件且大部分的事件对我们来说是没有必要的，此时我们就用防抖动来处理一下：

• 监听到窗口的拖动和缩放后，我们可以用来记录窗口信息：

• 恢复窗口信息的代码如下：

• 当我们修改主进程的代码并服务自动重启后你会发现窗口会先回到居中的位置再移动到保存的窗口状态的位置，我们需要在主进程关闭展示窗口，并由我们在渲染进程中控制：

总结：

本篇主要介绍了对于Electron开发GUI应用是对于窗口上的标题栏的自定义，简单的做了一些演示，后续还有一块就完成了整个窗口部分的内容，一起敲起来吧。