我想创建一个始终位于操作系统顶部并控制 Electron 应用程序中的功能的按钮。我想出了如何使用 alwaysOnTop 对整个应用程序执行此操作选项，但这显然不是我正在寻找的解决方案。我是否必须开始第二个 Electron 过程才能实现类似的目标？当然，我希望它连接到原始应用程序。我是针对 windows 和 osx 的，我正在使用带有 typescript 的 vue，如果这会有所不同的话。
我设法启动了第二个进程，但它也在新窗口中呈现相同的应用程序，如下所示:
我通过在 background.ts 中启动一个新窗口来实现这一点。 ，但我不知道如何为这个新窗口使用不同的入口点，即使我指向不同的 index.html ，我称之为 fab.html .例如。:
fab = new BrowserWindow({
width: 100,
height: 100,
alwaysOnTop: true,
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
fab.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
if (!process.env.IS_TEST) fab.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
fab.loadURL('app://./fab.html')
}
main.ts启动 Vue App 并没有注入(inject) Vue Stuff，所以我不能使用我的 vuex 和我正在使用的所有其他东西。我尝试只导入 Electron 并使用 Electron 中的 ipc 东西与我的实际应用程序进行通信，但由于某种原因我无法导入 ipcmain 并且根据文档，我需要 ipcmain 将消息发送到渲染过程。这是它的样子:
<html lang="en">
<style>
...
</style>
<body>
<div id="fabApp" class="hotkeys-inactive fab" onclick="sendToMain();"></div>
</body>
<script>
const { ipcRenderer } = require('electron')
const fab = document.getElementById("fabApp");
console.log(fab);
ipcRenderer.on('fab-clicks', (event, arg) => {
if (arg === "on") {
fab.classList.remove("hotkeys-inactive")
fab.classList.add("hotkeys-active")
console.log("turn ON")
} else {
fab.classList.add("hotkeys-inactive")
fab.classList.remove("hotkeys-active")
console.log("turn OFF")
}
})
function sendToMain() {
ipcRenderer.send('fab-clicks', 'clicked');
console.log(`sent`)
}
</script>
</html>
最佳答案
打开具有不同端点的子窗口(您已经这样做了)
然后使用消息获取/更新 vuex 存储
在父窗口中，使用 postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
您可以将它与例如绑定(bind)到来自 vuex 的值的组件的 watch 方法结合使用
在 child 身上听
window.addEventListener("message", msg => {
...
}, false)
关于vue.js - 如何为 Electron 应用程序创建 "always on top Component"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64909207/