窗体

Electron框架中，主进程负责创建窗体（BrowserWindow）并在其中加载HTML页面，对于窗体的设置也都在主进程中进行。这篇笔记我们简单介绍窗体的一些配置选项。

标准窗体菜单

我们知道，Windows中菜单是属于窗体的一部分，Electron中Menu对标准窗体菜单进行了封装。虽然这可能有点奇怪，但菜单确实要在主进程中配置和处理，也就是说你必须在主进程中处理菜单点击事件。

如果没有对标准窗体菜单进行任何配置，Electron程序会显示一组默认的菜单（一般来说，这些菜单都不是我们希望用户看到的）。

配置窗体菜单

Electron中我们可以在主进程中使用Menu.buildFromTemplate()来创建菜单数据，然后使用window.setMenu()来配置窗体菜单。

main.js

const createWindow = () => {
    // 创建窗体
    const window = new BrowserWindow({
        width: 800,
        height: 600
    });

    // 配置菜单
    const menu = Menu.buildFromTemplate([
        {
            label: '文件',
            submenu: [
                {
                    label: '打开',
                    click: () => { console.log('Menu clicked!') }
                }
            ]
        }
    ]);
    window.setMenu(menu);

    // 加载HTML文件
    window.loadFile('index.html');
};

上面例子代码中，我们创建了一个名叫「文件」的菜单，它有一个子菜单「打开」。

隐藏默认菜单

如果希望隐藏菜单，我们给Electron窗体配置一个空的菜单就行了。

main.js

const createWindow = () => {
    // 创建窗口
    const window = new BrowserWindow({
        width: 800,
        height: 600
    });

    // 配置空菜单
    const menu = Menu.buildFromTemplate([]);
    window.setMenu(menu);

    // 加载HTML文件
    window.loadFile('index.html');
};

实际上，使用窗体标准菜单的Electron程序确实比较少见，很多程序都没有采用这种传统的窗体设计，而是使用HTML页面模拟了一组顶部菜单。

创建无边框窗体

Electron中，无边框窗体即没有系统默认的边框、标题栏、菜单栏的窗体。代码中，我们可以在创建窗体时指定frame: false创建一个无边框窗体。

const window = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false
});

这里需要注意的是无边框窗体默认是不可拖拽的，这通常不是我们想要的效果。拖拽可以通过-webkit-app-region: drag这一CSS属性告知Electron窗体中允许拖拽的部分。如果需要整个窗体可拖拽，我们可以使用类似如下的CSS：

body {
    -webkit-app-region: drag;
}

button {
    -webkit-app-region: no-drag;
}

这里我们对body整体设置了-webkit-app-region: drag使其可拖拽（前提是<body>已经充满窗体），但这会导致<body>中的按钮无法点击，因此我们还需要给所有的按钮单独设置-webkit-app-region: no-drag。

假如我们有一个HTML编写的模拟标题栏，且希望只有模拟标题栏可以拖拽，此时也是类似的，我们为标题栏指定drag，为其中所有按钮指定no-drag即可。

创建透明窗体

透明窗体可以实现一些炫酷的窗体效果，比如桌面特效、悬浮窗等。Electron中设置透明窗体很简单，我们需要设置使用无边框窗体，然后配置transparent: true即可。

const window = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    transparent: true
});

透明窗体有很多局限性：

  • 默认无法点击穿透透明区域
  • 透明窗体不能调整大小
  • CSS的blur滤镜仅适用于网页，无法作用于透明窗体下方的内容
  • 打开开发者工具时，透明窗体将不再透明
  • Windows下DWM禁用时，透明将失效
  • 透明窗口不能通过Windows系统菜单或双击标题栏实现最大化

此外，我们也可以设置window.setIgnoreMouseEvents(true)，这样可以让窗体忽略所有鼠标事件，实现全局的点击穿透。在实现一些特效时，可能会用到该属性。

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap