【electron】

2023-12-02 23:59| 来源: 网络整理| 查看: 265

1. 无边框窗口实现

通过设置frame的值为false可以隐藏窗口的边框。

win = new BrowserWindow({ frame: false, }); mac上的红绿灯

实现了无边框后，通过设置titleBarStyle属性，可以在mac上保留红绿灯，titleBarStyle的值可选：

default：默认，标准灰色不透明的mac标题栏；

hidden ：全尺寸内容窗口，保留标准的控制按钮；

hiddenInset ：控制按钮距离边框更大；

customButtonsOnHover：鼠标划过左上角的时候显示（官方文档显示该属性在实验中）；

win = new BrowserWindow({ frame: false, titleBarStyle: 'hidden', }); 窗口可拖拽

在需要拖拽的位置设置样式-webkit-app-region: drag; 即可拖拽。（官方文档中提到drag属性会影响到点击事件，所以在点击区域需要设置no-drag，但是在mac上试了下不设置no-drag，单击双击貌似没什么问题，还不知道原因）。

-webkit-app-region: drag;

注：设置可拖拽属性的时候影响到开发者工具，如果把开发者工具和应用显示在同一窗口，会使窗口无法拖拽，这个时候最好让developer tool独立显示。

2. 自定义窗口的操作（关闭，最大化，最小化）

通过子进程与主进程通信可以实现。

主进程：

import { app, BrowserWindow, ipcMain } from 'electron'; // 关闭窗口 ipcMain.on('close', () => { win.close(); }); // 最小化窗口 ipcMain.on('minimize', () => { win.minimize(); }); //最大化窗口 ipcMain.on('maximize', () => { if (win.isMaximized()) { win.unmaximize(); } else { win.maximize(); } });

子进程：

const { ipcRenderer, remote } = require('electron'); const setWindow = (event, value?) => ipcRenderer.send( event, value ); // 判断是否最大化，用于windows上的最大化最大化按钮控制 get isMax() { return remote.getCurrentWindow().isMaximized(); } // 关闭窗口的function close() { setWindow('close'); } minWindow() { setWindow('minimize'); } maxWindow() { setWindow('maximize'); }

3.控制操作按钮的显示

应用中要求在登录页面只显示关闭按钮，在登录后显示三个操作按钮，electron的按钮无法单独控制，那就只能单独写了。

electron中提供setWindowButtonVisibility方法可以控制按钮的显示与否。

主进程：

ipcMain.on('titleBar', (event, showBar) => { win.setWindowButtonVisibility(showBar); });

子进程：

// 判断是否在登录页面，在登录页隐藏红绿灯，非登录页显示红绿灯 ngOnChanges(changes: SimpleChanges) { if (this.isLogin) { setWindow('titleBar', false); } else { setWindow('titleBar', true); } }

注：

1.需要动态控制红绿灯显示的，初始化窗口窗口时需要将红绿灯设置为default以外的值，不然动态显示处的全屏按钮无法操作，使用win.setFullScreenable(true);设置可全屏化也无效。

2.在窗口初始化后，需要立即将红绿灯设置隐藏，不然会先出现红绿灯然后再消失。

3.该方法只适用于mac，windows需要全部自定义，并且windows不支持该方法，调用的时候需要检测系统，不然会报错。

第一次写博客，总结在项目中遇到的一些问题，希望各位大佬不吝指正。

【本文地址】

公司简介

联系我们