electron实现托盘右键菜单和进程间的ipc通信

忙活了几天，终于把自己的播放器做出个样子了，看看效果

播放器效果

想做桌面应用但是下载包不成功的可以去看看我之前打包详细过程
electron生成桌面应用程序
之前实现最小化最大化和退去使用了渲染进程向主进程发起通信
vite+vue3+electron踩坑记录ipcRenderer通信，vue-router打包白屏问题
现在为了实现托盘右键菜单的停止和播放及上一首下一首的功能需要主进程向渲染进程发起通信，使用webContents
webContents 是一个事件发出者.它负责渲染并控制网页，也是 BrowserWindow 对象的属性
webContents.send(channel[, arg1][, arg2][, …])
通过 channel 发送异步消息给渲染进程，你也可发送任意的参数.参数应该在 JSON 内部序列化，并且此后没有函数或原形链被包括了.
渲染进程可以通过使用 ipcRenderer 监听 channel 来处理消息.

let win = new BrowserWindow({
    width: 1200,
    height: 900,
    minWidth: 800,
    minHeight: 600,
    transparent: true,
    webPreferences: {
      nodeIntegration: true, // 允许在页面中使用节点js
      contextIsolation: true, // 启用上下文隔离
      enableRemoteModule: true, // 允许使用 remote 模块
      preload: path.join(__dirname, "preload.js")
    },
    frame: false,
  });
  const contextMenu = [
    { label: '播放/暂停', click:()=>{win.webContents.send('pauseOrPlay')} },
    { label: '上一首', click:()=>{win.webContents.send('next', -1);} },
    { label: '下一首', click:()=>{win.webContents.send('next', 1);} },
    {type: "separator"},
    { label: '播放方式', submenu:[
      { label: `顺序播放`, click:()=>{win.webContents.send('setplayState',0);updateTrayMenu(0)}},
      { label: '随机播放', click:()=>{win.webContents.send('setplayState',1);updateTrayMenu(1)} },
      { label: '单曲循环', click:()=>{win.webContents.send('setplayState',2);updateTrayMenu(2)} },//改变播放方式 发起通信改变前端组件参数
    ] },
    {type: "separator"},
    { label: '退出', role: 'quit' }
  ];
    function createTray() {
    const tray = new Tray(trayIcon);
    tray.setToolTip('私人订制');
    tray.on('click', () => {
      win.show();
      // 在这里添加你想要的点击事件逻辑
    });
    tray.setContextMenu(Menu.buildFromTemplate(contextMenu));
    app.on('before-quit', () => {
        tray.destroy();
    });
    return tray;
  }
  const tray = createTray()
    /**
   * 设置托盘菜单
   * 这里是改变播放方式 在托盘菜单选型前面加个点
   */
  ipcMain.on('setplayState', (event,args) => {
    updateTrayMenu(args);
  });
  function updateTrayMenu(index){
    for (let i = 0; i < contextMenu[4].submenu.length; i++) {
      if(i == index){
        contextMenu[4].submenu[i].label = `${String.fromCharCode(8226)} `+ contextMenu[4].submenu[i].label
      }else{
        let pattern = `${String.fromCharCode(8226)}`;
        const regexVariable = new RegExp(pattern);
        contextMenu[4].submenu[i].label =  contextMenu[4].submenu[i].label.replace(regexVariable,'');
      }
    }
    tray.setContextMenu(Menu.buildFromTemplate(contextMenu));
  }

preload.js

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['toggle-full-screen','minimum','closeProgram','miusic-name','setplayState'] // 配置合法消息名
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['next','pauseOrPlay','setplayState']// 配置合法监听事件名称
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})

bottom.vue 播放组件

//收到播放方式改变 设置pinia全局状态的数据 这里TS使用window可能会报错windwo没有ipcRenderer 在上面加上
declare const window :{
  ipcRenderer:{
    receive:Function,
    send:Function,
  }
} & Window

window.ipcRenderer.receive('setplayState',(idx:number)=>{
  store.setStates(idx)
});

接下来继续做桌面歌词 打包双页面