内容简介:在做前端项目时,需要将 Web 项目打包成 Win 应用,使用 Electron 相关技术。这个系列是整理 Electron 学习中遇到的问题和常见知识点,留做记录方便后续复习。本篇介绍:在 Electron 中提供了系统托盘的 API - [Tray],参考后面的链接。所有需要引入
在做前端项目时,需要将 Web 项目打包成 Win 应用,使用 Electron 相关技术。这个系列是整理 Electron 学习中遇到的问题和常见知识点,留做记录方便后续复习。
本篇介绍:
- Electron 系统托盘实现
- Electron 开机自动启动
系统托盘 && 开机自启
在 Electron 中提供了系统托盘的 API - [Tray],参考后面的链接。所有需要引入 Tray
和 Menu
。
// main.js import { Menu, Tray } from 'electron' // 定义全局托盘 let tray = null // 局部的会销毁。《=== 如果不定义成全局的,应用启动后托盘一闪就没了,^_^
目标系统是 win ,其他的平台限制请参考文档。 通过 process.platform
限制系统。
// 创建托盘 function createTray() { // 系统托盘: window 系统 if (process.platform === 'win32') { const icon = process.env.NODE_ENV === 'development' ? path.join(__dirname, 'bundled/favicon.ico') : path.join(__dirname, 'favicon.ico') // 指定托盘图标,推荐使用 ico 图标。 // 创建托盘实例 tray = new Tray(icon) // 上面托盘实例创建了,需要定义托盘中的 Menu 选项。 // 这里使用 buildFromTemplate 静态方法。 // 第一个:开机自启动 // 第二个:退出 let menu = Menu.buildFromTemplate([ { label: '开机启动', checked: app.getLoginItemSettings().openAtLogin, // 获取当前自启动状态 type: 'checkbox', click: () => { // 点击事件:切换自启动 if (!app.isPackaged) { // 生成环境 app.setLoginItemSettings({ openAtLogin: !app.getLoginItemSettings().openAtLogin, path: process.execPath }) } else { app.setLoginItemSettings({ openAtLogin: !app.getLoginItemSettings().openAtLogin }) } } }, { label: '退出', click: function() { app.quit() app.quit() } } ]) // 鼠标悬停时显示的文本 tray.setToolTip('微笑榆山') // 设置上下文菜单 tray.setContextMenu(menu) // 绑定点击事件:控制 窗口显示和隐藏。 tray.on('click', () => { win.isVisible() ? win.hide() : win.show() }) } }
上面代码示例中完成对系统托盘和自启动的配置
注意:在配置图标时,需要区分开发环境。开发环境中加载根目录 .ico
图标,而生成环境中需要加载前端打包后所在的目录中的 .ico
图标。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 我想快速给WPF程序添加托盘菜单
- 如何使用Multipass系统托盘工具来管理虚拟机?
- CentOS6开机启动过程详解
- Linux设置Oracle开机自启动
- Centos7设置服务开机自启动
- Holer 1.2.0 发布,支持设置开机启动
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。