【electron】- 无边框窗口应用中的一些坑

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不支持该方法，调用的时候需要检测系统，不然会报错。

 

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