electron_vue—实现托盘以及托盘闪烁

最新推荐文章于 2024-10-28 09:32:10 发布

根正苗红小少年

最新推荐文章于 2024-10-28 09:32:10 发布

阅读量829

点赞数 1

分类专栏：前端_electron 文章标签： vue.js electron javascript

本文链接：https://blog.csdn.net/gzmhxsn/article/details/129305522

版权

本文介绍了如何在electron_vue项目中创建和实现托盘功能，包括基本托盘的创建以及托盘消息的闪烁效果。通过在main进程中的操作，配合.vue文件的页面结构和主程序src/main/index.js的逻辑，实现了当页面按钮触发事件时，托盘图标闪烁的效果。同时，文中提到了防止重复触发导致的定时器管理问题，通过控制变量确保只有一个定时器在运行。

摘要由CSDN通过智能技术生成

electron_vue框架—实现托盘以及托盘闪烁

实现基本托盘
- 实现托盘消息闪烁
- - 页面结构：.vue文件
  - 主程序：src/main/index.js

实现基本托盘

实现托盘主要需要的是 Tary 模块，托盘只能在 ready 函数里面实现,在 ready 函数外就会报错。以下为实现基本托盘的代码内容

import {
   Tray} from 'electron'
...
app.on('ready', async() => {
   
   //设置系统托盘
    let tray = new Tray(path.join(__dirname, '../renderer/assets/logo2.png'))
  //设置托盘菜单
    const trayContextMenu = Menu.buildFromTemplate([{
   
        label: '打开',
        click: () => {
   
            mainWindow.show()  //mainWindow 为自己定义的窗口
        }
    }, {
   
        label: "退出",
        click: () => {
   
            mainWindow.hidden()  
        }
    }])
    tray.setToolTip('myapp')  //悬停时显示的内容
    tray