Electron隐藏默认窗口边框样式

背景

使用 Electron 开发桌面应用时，为了提供更好的用户体验、更强的品牌一致性和更高的功能灵活性，时常需要隐藏默认窗口边框并使用自定义窗口控件。

隐藏默认窗口边框是 Electron 开发中的一个常见实践，特别是在需要高度定制化和跨平台一致性的应用程序中。这么做的原因主要包括以下几点：

自定义用户界面：隐藏默认窗口边框允许开发者完全自定义窗口的外观，使得应用程序的界面可以与其品牌风格一致。这样可以实现更具吸引力和一致性的用户体验。例如，许多现代应用程序，如音乐播放器、聊天应用等，使用自定义边框来提供独特的外观和感觉。
增加功能：自定义窗口边框使开发者能够增加额外的功能或控件，而不是局限于操作系统提供的默认控件。例如，可以添加额外的按钮、菜单或其他控件，以增强用户的交互体验。
跨平台一致性：不同操作系统的默认窗口边框和控件风格不尽相同。通过隐藏默认窗口边框并使用自定义的窗口控件，开发者可以确保在不同操作系统上的外观和功能一致，提供统一的用户体验。
增强安全性：在某些应用程序中，隐藏默认窗口边框可以增强安全性。例如，某些专用应用程序可能需要防止用户轻易关闭窗口或切换到其他应用。通过自定义窗口边框，开发者可以更好地控制这些行为。

实现

在 Electron 中，您可以通过设置 BrowserWindow 的 frame 选项为 false 来隐藏默认的窗口边框。以下是一个简单的例子，展示了如何创建一个没有边框的窗口：

示例代码

javascript
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 隐藏窗口边框
    transparent: true, // 透明窗口
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 打开URL
  mainWindow.loadURL('http://127.0.0.1:8080');

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

在上述代码中，关键的部分是：

javascript
    frame: false, // 隐藏窗口边框
    transparent: true, // 透明窗口

这两行代码在创建 BrowserWindow 时设置了窗口没有边框，并且将原有窗口的背景色设置为透明。

注意：设置透明后，应用页面的背景色将完全由用户控制，如果用户没有设置背景色，则会使窗口变得透明，所以如果不打算自定义很多颜色的用户来说，不建议设置为透明。

通过上述步骤，您可以使用 Electron 创建一个没有默认边框的应用程序窗口。

拓展：拖动窗口

由于隐藏了窗口边框，默认的拖动窗口功能也会被隐藏。您需要在 HTML 和 CSS 中自行实现拖动功能。例如，可以在 CSS 中使用 -webkit-app-region: drag; 来实现拖动区域：

html
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      -webkit-app-region: drag;
    }
  </style>
</head>
<body>
  <h1>这是一个无边框窗口</h1>
</body>
</html>

隐藏默认窗口边框后，除 窗口拖拽 需要自行实现外，一般还需要自行实现一些控制操作：如窗口的最小化、最大化和关闭等窗口控制功能，这些功能可以使用 Electron 提供的 API 来实现。后续记笔记时会将链接放到这里。

目录

背景

实现

示例代码

拓展：拖动窗口