vue3+electron开发桌面软件（5）—— electron托盘、软件内右键菜单

系列文章目录

1. vue3+electron开发桌面软件入门与实战（0）——创建electron应用
2. vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目
3. vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3项目级集成
4. vue3+electron开发桌面软件入门与实战（3）—— electron模块化改造+窗口位置工具+合并命令行工具
5. vue3+electron开发桌面软件（4）—— 吃透electron进程通信
6. 后续文章请关注专栏

---

---

前言

前面文章介绍了electron的基础知识，如果一路跟着学习的同学，现在应该已经可以搭建一个自己的基础项目demo了。本文涉及的知识点包括electron托盘、软件右键功能。

---

一、electron托盘

其实我是不想写关于electron托盘和软件内右键功能的，因为在我的项目里用的不多，也写不出什么心得，所以这里就把最简单的使用方式介绍一下：

1. 创建菜单，如下图所示：
   
   Item1和Exit就是我们的菜单项，右键点击托盘时弹出，代码：

 let trayMenu = Menu.buildFromTemplate([
            {label: 'Item 1'},
            {role: 'quit'}
        ])

2. 实例化托盘对象：

let tray =new Tray( path.resolve(__dirname, '../log.ico')) //实例化的同时，设置托盘图标

实例化后得到的对象里，包含托盘的所有属性和方法，我们可以通过tray.on(‘click’, e => { })、tray.setToolTip(‘Tray details’)之类的方法定制一些托盘操作，使用起来就是这么简单，就好比electron封装了一个类Tray，里面定义了一些属性和方法，实例化类后可调用。
具体api请查阅官网。
3. 将菜单项放到托盘里：
用到的也是实例化托盘对象后的一个方法：

tray.setContextMenu(trayMenu)

二、软件内右键菜单

在软件中点击右键，会弹出一个对话框，里面是软件的一些基础操作功能。

1. 和托盘一样，我们需要先创建一个菜单：

let contextMenu = Menu.buildFromTemplate([
            {label: 'Item 1'},
            {role: 'editMenu'}
        ])

2. 将菜单和鼠标右键关联：

……省略代码
let contents = this.win.webContents //windows对象的webContents属性
……省略代码
 contents.on('context-menu', (e, params) => {
            contextMenu.popup()
        })

总结

本文的讲解比较简单，下一篇文章讲解系统级右键功能，点击后，通过软件注册的功能，实现文件的上传，属于我这次项目的一个重点。