Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小

╰+攻爆jí腚メ 2022-01-21 08:27 4164阅读 0赞

### 文章目录 ###

*   *  一、目标原型
     *   *   *  1. 目标
             *  2. 原型设计
             *  3. 原型初步实现
     *  二、无边框窗口
     *   *   *  1. 要点
             *  2. 改造
     *  三、可拖拽区
     *   *   *  1. 要点
             *  2. 改造
     *  四、最小化、最大化、关闭
     *   *   *  1. 要点
             *  2. 改造
     *  五、动态改变窗口大小
     *   *   *  1. 要点
             *  2. 改造
     *  六、扩展
     *   *   *  扩展1：在内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭？
             *  扩展2：在\`\`标签内嵌的页面中怎么实现拖拽、最大化、最小化、关闭？
             *  扩展3：如何在Electron关闭时执行cmd命令
             *  扩展4：系统托盘tray
     *  七、源码下载

## 一、目标原型 ##

#### 1. 目标 ####

*  实现一个无边框窗口，包括最小化、最大化、关闭、拖动等功能
 *  动态改变窗口大小，即在页面跳转的时候根据需要改变窗口大小

#### 2. 原型设计 ####

**(1) 登录窗口（500×300）**

*  点击登录跳转到首页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]

**(2) 首页（全屏）**

*  跳转到首页，自动全屏
 *  包括最小化、最大化、关闭，以及灰色区域可拖动整个窗口功能  
    ![在这里插入图片描述][2019060911281731.png]

#### 3. 原型初步实现 ####

创建login.html和index.html页面，实现原型页面基本效果，下文逐步改造，实现Electron无边框窗口。

## 二、无边框窗口 ##

#### 1. 要点 ####

要创建无边框窗口，只需在BrowserWindow的options中将frame设置为 false：

const {  BrowserWindow } = require('electron')
    let win = new BrowserWindow({  width: 800, height: 600, frame: false })
    win.show()

> 通过将 transparent 选项设置为 true, 还可以使无框窗口透明：  
> `let win = new BrowserWindow({ transparent: true, frame: false })`  
> 参考地址：https://electronjs.org/docs/api/frameless-window\#%E9%80%8F%E6%98%8E%E7%AA%97%E5%8F%A3

#### 2. 改造 ####

在`main.js`文件中添加`frame:false`：

mainWindow = new BrowserWindow({ 
      width: 800,
      height: 600,
      frame:false,
      webPreferences: { 
        /*preload: path.join(__dirname, 'preload.js')*/
        nodeIntegration: true
      }
    })

**注意：** webPreferences的值，如果写preload无nodeIntegration，会影响后面最大最小化功能不起作用，暂不明白原因。

## 三、可拖拽区 ##

#### 1. 要点 ####

*  应用程序需要在 CSS 中指定 `-webkit-app-region: drag` 来告诉 Electron 哪些区域是可拖拽的
 *  在可拖拽区域内部使用 `-webkit-app-region: no-drag` 则可以将其中部分区域排除
 *  拖动行为可能与选择文本冲突。 例如, 当您拖动标题栏时, 您可能会意外地选择标题栏上的文本。 为防止此操作, 您需要在可区域中禁用文本选择

.titlebar { 
      -webkit-app-region: drag;
      -webkit-user-select: none;
    }

*  在某些平台上，可拖拽区域不被视为窗口的实际内容，而是作为窗口边框处理，因此在右键单击时会弹出系统菜单。 要使上下文菜单在所有平台上都正确运行, 您**永远也不要在可拖拽区域上使用自定义上下文菜单**。
 *  备注：如果你在某些页面设置了可拖拽区，跳转到一个新的页面，而这个新的页面没有设置可拖拽区，则会沿用上一页面的可拖拽区，感觉很奇怪，也没有相应的dom支持，就像取用的上一页面固定的像素区域一样（测试发现是这样，不准确之处请指正，谢谢）。如果拖拽区域不同，这种情况下，在新的页面中设置上拖拽区域即可。

#### 2. 改造 ####

修改`index.html`页面中的样式，添加相应drag和no-drag特性

<div class="topbar" style="-webkit-app-region: drag;-webkit-user-select: none;">
        <div class="logo fl">
            <img src="images/logo.png" alt="">
            <span>这里写软件名称</span>
        </div>
        <ul class="menu fl" style="-webkit-app-region: no-drag;">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
        </ul>
        <div class="min_max_close fr" style="-webkit-app-region: no-drag;">
            <img src="images/min.png" id="min" alt="">
            <img src="images/max.png" id="max" alt="">
            <img src="images/close.png" id="close" alt="">
        </div>
    </div>

## 四、最小化、最大化、关闭 ##

#### 1. 要点 ####

*  render 进程通过 ipcRenderer 与 ipcMain 进行通讯，以通知 main 进程操作窗体。

#### 2. 改造 ####

(1) 在renderer.js中添加click事件，发送操作命令给主进程

(2) 在main.js中接收操作命令，做出相应处理

**补充：** 这里最大化和取消最大化时，修改图标的方法不合适，因为通过双击drag-area或者拉动窗口到屏幕边缘等操作，也可能修改窗口的状态。  
因此，应该在主进程中监听窗口的最大化操作，然后发送命令给渲染进程：

mainWindow.on('maximize', function () { 
     mainWindow.webContents.send('main-window-max');
    })
    mainWindow.on('unmaximize', function () { 
      mainWindow.webContents.send('main-window-unmax');
    })

在渲染进程中接收到相应命令，再进行处理：

ipcRenderer.on('main-window-max', (event) => { 
    	max.classList.remove('icon-max');
    	max.classList.add('icon-maxed');
    });
    ipcRenderer.on('main-window-unmax', (event) => { 
    	max.classList.remove('icon-maxed');
    	max.classList.add('icon-max');
    });

## 五、动态改变窗口大小 ##

#### 1. 要点 ####

思路同最小化、最大化、关闭，仅添加了页面调转。

#### 2. 改造 ####

(1) 在main.js中设置启动初始页面为`login.html`

mainWindow.loadFile('login.html')

(2) 在renderer.js中添加login按钮的click事件，发送最大化给主进程

var loginbtn = document.getElementById('login');
    if (loginbtn) { 
        loginbtn.addEventListener('click', () => { 
            ipcRenderer.send('window-max');
            location.href = "index.html";
        })
    }

--------------------

## 六、扩展 ##

#### 扩展1：在内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭？ ####

如果你只是用Electron打个包，用它的浏览器功能，里面还是一个完整的其它项目，比如一个普通的java web项目，相当于只是穿层衣服。怎么在里边实现以上最小化、最大化、关闭、拖动等功能呢？

1.  首先创建一个完全独立的nodejs项目，创建一个index页面，其中有最小化、最大化、关闭按钮和拖拽区  
    ![在这里插入图片描述][20191026153719783.png]
2.  在Electron项目index.html中直接跳转到独立项目页面

1.  实现可拖拽区  
    同上加上样式即可：`style="-webkit-app-region: drag;-webkit-user-select: none;"`
2.  实现最小化、最大化、关闭  
    关键的有两步：  
    （1）在`main.js`中new BrowserWindow加上`nodeIntegration: true`

mainWindow = new BrowserWindow({ 
        width: 500,
        height: 300,
        frame: false,
        webPreferences: { 
            nodeIntegration: true
        }
    })

（2）在独立项目中加上之前的renderer.js文件，在页面中引入renderer.js

其实不应该这样做，应该可以直接写`require('./renderer.js')`的，但是这样要求在electron项目中把renderer.js export出来，由于我语法不熟，就直接拷过去了，先不研究了。

#### 扩展2：在`<webview>`标签内嵌的页面中怎么实现拖拽、最大化、最小化、关闭？ ####

在webview标签上加上`nodeintegration`属性：

当有此属性时, webview 中的访客页（guest page）将具有Node集成, 并且可以使用像 require 和 process 这样的node APIs 去访问低层系统资源。

#### 扩展3：如何在Electron关闭时执行cmd命令 ####

两种实现方式：[https://www.jb51.net/article/170628.htm][https_www.jb51.net_article_170628.htm]  
我的需求比较简单，简单实现如下：

//接收关闭命令
    ipcMain.on('window-close', function() {
    	let closeProcess = child_process.exec('taskkill /f /im XXXXX.exe');
    	closeProcess.on('close', function (code) {
    		mainWindow.close();
    	})
    })

#### 扩展4：系统托盘tray ####

在任务栏右下角添加图标和右键菜单。查看[Electron tray文档][Electron tray]即可。

## 七、源码下载 ##

[Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小][Electron]  
[在Electron内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭][Electron 1]

> **references**  
> \[1\] [无边框窗口 | Electron][_ Electron]  
> \[2\] [Electron 无边框窗口最大化最小化关闭功能][Electron 2]  
> \[3\] [electron 改变窗体大小][electron]  
> \[4\] [BrowserWindow配置说明文档][BrowserWindow]  
> \[5\] [webview标签说明文档][webview]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]: /images/20220121/9f9c9eeb68b44457aed041cecd39a623.png
[2019060911281731.png]: /images/20220121/9aaaebf8c85a429abd3928976fc817e5.png
[20191026153719783.png]: /images/20220121/f74babd9acd34d4a9f605da1d5834bd0.png
[https_www.jb51.net_article_170628.htm]: https://www.jb51.net/article/170628.htm
[Electron tray]: https://electronjs.org/docs/api/tray
[Electron]: https://download.csdn.net/download/fukaiit/11232180
[Electron 1]: https://download.csdn.net/download/fukaiit/11928649
[_ Electron]: https://electronjs.org/docs/api/frameless-window
[Electron 2]: https://blog.csdn.net/HY_358116732/article/details/87874969
[electron]: https://segmentfault.com/a/1190000018854216?utm_source=tag-newest
[BrowserWindow]: https://electronjs.org/docs/api/browser-window
[webview]: https://electronjs.org/docs/api/webview-tag#nodeintegration