内容简介：在做前端项目时，需要将 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
图标。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
