electron最小化托盤設置
眾所眾知桌面app都是有小托盤的,我們可以退去登錄;也可以實現(xiàn)一些其他的功能,比如音樂播放器就可以切換下一首歌曲以及一些設置等等。那么electron中怎么實現(xiàn)呢?
官方文檔
以下示列是官方文檔的示列,是一個單選的選擇器;大家也可以根據(jù)文檔一步一步去測試出來 elctron托盤文檔地址
注意
- icon地址一定要正確,否則托盤出不來,要報錯
- icon地址需要絕對路徑
報錯:
Error: Failed to load image from path './assets/json.png'
官網(wǎng)示列代碼:
const { app, Menu, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})修改后的托盤
我在ready周期中對托盤進行設置,大家可以在網(wǎng)上去下載一些圖標,我是在iconfont網(wǎng)站去下載的,尺寸選擇的是16;感覺剛剛好。
- 啟動服務器是在服務器執(zhí)行以后顯示屏幕
- 退出登錄是直接關(guān)閉應用
- 當用戶點擊圖標的時候展示應用
這兒需要注意一個點:圖標路徑不能直接寫死需要通過path引入;
static指的是 public 文件下的static(將圖標放置到該文件夾即可)
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
// await installExtension(VUEJS_DEVTOOLS)
session.defaultSession.loadExtension(path.resolve(__dirname, "../devTools/chrome"));
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow();
tray = new Tray(path.join(__static, './static/json.png'))
const contextMenu = Menu.buildFromTemplate([
{
label: '啟動服務器',
icon: path.join(__static, './static/start.png'),
click:()=>{
win.webContents.send('start-server');
win.show();
}
},
{
label: '退出登錄',
icon: path.join(__static, './static/quit.png'),
click:()=>{
win.close();
}
},
])
// 點擊圖標展示
tray.on('click',() => {
win.show();
});
// 鼠標放置上去顯示的文本
tray.setToolTip('PDF管理工具');
tray.setContextMenu(contextMenu);
})到此這篇關(guān)于electron最小化托盤設置的文章就介紹到這了,更多相關(guān)electron最小化托盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值,監(jiān)聽源必須是一個getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
VUE+node(express)實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實例內(nèi)容,有需要的朋友們參考下。2019-10-10
element-ui 表格數(shù)據(jù)時間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時間格式化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

