（十）electron使用托盘tray

前言：在上一篇中介绍了Notification模块， 这种通知可能会被用户屏蔽掉，而且样式不好修改，可以用tray来实现更多的功能

主进程 定义托盘

新建tray/右键菜单/设置tray tooltip/消息闪烁

//background.js
// 右键菜单
var trayMenu = Menu.buildFromTemplate([
  {
    label: "设置",
    click: function () {
      console.log("setting");
    },
  },
  {
    label: "升级",
    click: function () {
      console.log("update");
    },
  },
  {
    label: "退出",
    click: function () {
      if (process.platform !== "darwin") {
        app.quit();
      }
    },
  },
]);
// 托盘
const iconTray = new Tray(path.resolve(__dirname, "./assets/car.png"));
// 鼠标移到到图标上面显示
iconTray.setToolTip("This is my application");
// 绑定右键菜单到托盘
iconTray.setContextMenu(trayMenu); 
//双机，弹出应用
iconTray.on("double-click", () => {
    mainWindow.show();
    clearInterval(timer);
    timer = null;
});

// 消息提示
var count = 0;
var timer = setInterval(function () {
    count++;
    if (count % 2 == 0) {
      iconTray.setImage(path.resolve(__dirname, "./assets/car.png"));
    } else {
      iconTray.setImage(path.resolve(__dirname, "./assets/empty.png"));
    }
}, 500);

渲染进程 发消息，托盘闪烁

// app.vue
<el-button @click="showTray" type="primary">显示托盘消息</el-button>

<script setup>
const ipcRenderer = window.ipcRenderer;

const showTray = () => {
  ipcRenderer.send("showTray");
};

</script>

// background.js
ipcMain.on("showTray", (event, args) => {
    console.log("showTray");
    // 消息提示
    var count = 0;
    trayTimer = setInterval(function () {
      count++;
      if (count % 2 == 0) {
        iconTray.setImage(path.resolve(__dirname, "./assets/car.png"));
      } else {
        iconTray.setImage(path.resolve(__dirname, "./assets/empty.png"));
      }
    }, 500);
});

// preload.js
const { contextBridge, ipcRenderer } = require("electron");

// Expose ipcRenderer to the client
contextBridge.exposeInMainWorld("ipcRenderer", {
  //渲染进程->主进程
  send: (channel, data) => {
    let validChannels = ["topIcon", "showTray"]; // <-- Array of all ipcRenderer Channels used in the client
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  // 主进程->渲染进程
  receive: (channel, func) => {
    let validChannels = ["set-maxminicon"]; // <-- Array of all ipcMain Channels used in the electron
    if (validChannels.includes(channel)) {
      // Deliberately strip event as it includes `sender`
      ipcRenderer.on(channel, (event, ...args) => {
        console.log(args);
        func(...args);
      });
    }
  },
});