如何为电子应用程序创建一个“始终位于顶部的组件”答案

【问题标题】：How to create an "always on top Component" for an electron app如何为电子应用程序创建一个“始终位于顶部的组件”
【发布时间】：2020-11-25 16:24:20
【问题描述】：

我想创建一个始终位于操作系统顶部并控制电子应用程序中的功能的按钮。我想出了如何使用 alwaysOnTop 选项对整个应用程序执行此操作，但这显然不是我正在寻找的解决方案。我是否必须开始第二个电子过程才能实现类似的目标？当然，我希望它连接到原始应用程序。我是针对 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')
}

然后我遇到的问题是，启动 Vue 应用程序的main.ts 没有注入 Vue Stuff，所以我不能使用我的 vuex 和我正在使用的所有其他东西。我尝试只导入电子并使用电子中的 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>

Appart 它不起作用，我也想使用 vue，而不是在这里做所有这些原生 js 的东西：/ 看起来很老套。

【问题讨论】：

不同入口点有什么问题？
我想在那里运行一个不同的应用程序，基本上只是一个按钮。但是在这个配置中，我只渲染了整个应用程序两次。我需要的是，在另一个 index.html 中呈现不同的 vue 入口点。我设法在第二个 BrowserWindow 中运行了“fab.html”，但是我无法访问电子、我的 node_modules 或我的应用程序的其余部分（如 vuex 和其他东西）。如果您想了解我的意思，这是回购协议。感觉超级hacky，也不起作用^^github.com/w3champions/w3champions-launcher/tree/hotkey-fab
@EstusFlask 我在问题中添加了更多细节

标签： vue.js electron

【解决方案1】：

用不同的端点打开子窗口（你已经这样做了）然后使用消息获取/更新 vuex 存储

在父窗口中，使用 postMessage

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

您可以将它与绑定到 vuex 值的组件的 watch 方法结合起来

在孩子身上听

window.addEventListener("message", msg => {
   ...
}, false)

【讨论】：