Question

我现有基于Electron的远程桌面控制应用程序，它在Mac，Windows上作为桌面应用程序运行，并在Chrome和Firefox上作为webapp运行。

现在，我想开发一个始终位于顶部的粘性组件，而不管活动窗口如何。例如，即使用户最小化我的应用程序并将其他应用程序放在最顶层，工具栏也将始终可见。

有人可以建议我使用这个可以实现的库或技术（例如Electron / ReactJS等）吗？

谢谢，加亚特里讷

Answer 1

这是一个快速的例子，我将如何做到这一点。（使用电子快速启动创建）

等待mainWindow's最小化事件，并使用BrowserWindow创建新的alwaysOnTop: true。

文档：https://github.com/electron/electron/blob/master/docs/api/browser-window.md

<强>的index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>

<body>
    Index
</body>

</html>

<强> toolbar.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
</head>

<body>
    toolbar
</body>

</html>

<强> renderer.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

let mainWindow = null;
let toolbarWindow = null;

const createWindow = () => {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

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

    const onCloseMainWindow = (event) => {
        toolbarWindow = new BrowserWindow({
            width: 300,
            x: 20,
            y: 40,
            height: 70,
            resize: false,
            type: 'toolbar',
            alwaysOnTop: true
        })

        toolbarWindow.loadURL(url.format({
            pathname: path.join(__dirname, 'toolbar.html'),
            protocol: 'file:',
            slashes: true
        }));

        toolbarWindow.on('minimize', (event) => {
            if (mainWindow) {
                mainWindow.show();
            }
            toolbarWindow.destroy();
        });
    };

    mainWindow.on('minimize', onCloseMainWindow);
    mainWindow.on('close', onCloseMainWindow);
};

app.on('ready', createWindow);

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

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

开发一个粘性组件，它将始终位于Electron或JS

1 个答案: