你创建了一个使用Electron框架的应用程序,并希望它在以下情况下始终保持可见:
- 在切换工作区(桌面)时可见
- 在其他应用程序之上显示
- 当其他应用程序全屏显示时,它也显示在顶部
- 当Keynote处于演示模式时,它也能显示在顶部
特别是当Keynote处于演示模式时,要实现这一点比较困难。这是最终的解决方案。
你在main.js
中添加了设置,这是在package.json
中定义的main部分。
javascript
const { app, BrowserWindow } = require("electron");
const is_mac = process.platform==='darwin'
if(is_mac) {
app.dock.hide() // - 1 -
}
const MAIN_WINDOWS_WIDTH = 300;
const MAIN_WINDOWS_HEIGHT = 350;
function createClapWindow() {
// 创建浏览器窗口。
const mainWindow = new BrowserWindow({
width: MAIN_WINDOWS_WIDTH,
height: MAIN_WINDOWS_HEIGHT,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
}
})
mainWindow.setAlwaysOnTop(true, "screen-saver") // - 2 -
mainWindow.setVisibleOnAllWorkspaces(true) // - 3 -
mainWindow.loadFile('public/reaction.html')
}
app.whenReady().then(() => {
createClapWindow()
})
-
app.dock.hide()
这个设置允许macOS在全屏模式下显示在顶部。由于Windows操作系统没有这个设置,所以在设置之前要检查是否是macOS。这个设置只适用于macOS。
-
mainWindow.setAlwaysOnTop(true, "screen-saver")
这个设置允许在Keynote演示模式下显示在顶部。BrowserWindow中有一项
alwaysOnTop
。当我设置为true
时,其他应用程序会被覆盖在顶部,但Keynote演示模式下不行。所以我需要设置mainWindow.setAlwaysOnTop(true, "screen-saver")
。 -
mainWindow.setVisibleOnAllWorkspaces(true)
这个设置允许在切换到其他工作区时显示。
代码:
function alwaysOnTop(app, win) {
const is_mac = process.platform==='darwin'
if(is_mac) {
app.dock.hide() // - 1 -
}
win.setAlwaysOnTop(true, "screen-saver") // - 2 -
win.setVisibleOnAllWorkspaces(true)
}