渲染器进程未接收到从主进程启动的电子通道消息

Question

我正在构建一个带有操作系统托盘菜单的电子应用程序。

在主进程中，我希望听到对“About”菜单项的单击，然后通知渲染器进程，以便它可以相应地更新窗口的视图。

以下是渲染窗口和任务栏菜单时的主要流程部分：

const {app, BrowserWindow, Menu, Tray} = require('electron')
const appConfig = require('./appConfig')
const ipc = require('electron').ipcMain
const path = require('path')
const config = require('../config')

let win, tray

function createWindow(){
    win = new BrowserWindow({
        height: appConfig.window.height,
        width: appConfig.window.width
    })

    win.loadURL(`file://${__dirname}/client/index.html`)

    if(appConfig.debugMode){
        win.webContents.openDevTools()
    }

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

function setTrayIcon(){
    tray = new Tray(path.resolve(__dirname, './assets/rocketTemplate.png'))
    tray.setToolTip('Launch applications by group')

    let menuitems = config.groups.map(group => {
        return {label: `Launch group: ${group.name}`}
    })
    win.webContents.send('ShowAboutPage' , {msg:'hello from main process'});
    win.webContents.send('ShowAboutPage')

    menuitems.unshift({type: 'separator'})

    // Here where I add the "About" menu item that has the click event listener
    menuitems.unshift({
        label: 'About AppLauncher',
        click(menuitem, browserWin, event){
            // sending a log to the console to confirm that the click listener did indeed hear the click
            console.log('about menu clicked')
            win.webContents.send('ShowAboutPage')
        }
    })
    menuitems.push({type: 'separator'})
    menuitems.push({label: 'Quit AppLauncher'})

    const contextMenu = Menu.buildFromTemplate(menuitems)
    tray.setContextMenu(contextMenu)
}

app.on('ready', () => {
    createWindow()
    setTrayIcon()
})

下面是应该侦听通道消息的渲染器脚本：

const Vue = require('vue')
const App = require('./App.vue')
const ipc = require('electron').ipcRenderer

ipc.on('ShowAboutPage', () => {
    console.log('show about fired in store')
    alert('show about fired in store')
    this.notificationMessage = 'Show about page'
})


require('./style/base.sass')

new Vue({
    el: '#app',
    render: h => h(App)
})

当我点击托盘中的“关于”菜单时，我从主进程中获得console.log输出，但我从未在渲染器进程中收到console.log或警报。

我的应用程序只有一个窗口（窗口关闭时win变量无效证明了这一点），因此我不会将消息发送到错误的渲染器进程。

我查看了使用webContents向渲染器实例发送消息的电子留档，看起来我的代码结构正确，但显然我错过了一些东西。

有什么想法吗？

Answer 1

尝试将渲染器脚本重写为

const { ipcRenderer } = require("electron");
ipcRenderer.on("ShowAboutPage", () => {
    //etc
});