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

Question

我正在构建一个具有OS托盘菜单的电子应用程序。

在主过程中，我要听就点击“关于”菜单项，然后通知渲染过程，以便它可以相应地更新窗口的视图。

这是我的主要过程的组成部分时，我渲染窗口和托盘菜单：

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或alert。

我的应用程序只有一个窗口（窗口关闭的win变量的无效证明），所以它看起来不像是我将消息发送到错误的渲染器进程的问题。

我翻遍了electron documentation on using webContents to send messages to renderer instances，看起来我的代码结构正确，但显然我错过了一些东西。

任何想法？

Answer 1

尝试重写你的渲染器脚本

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