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í)行以后顯示屏幕
- 退出登錄是直接關閉應用
- 當用戶點擊圖標的時候展示應用
這兒需要注意一個點:圖標路徑不能直接寫死需要通過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); })
到此這篇關于electron最小化托盤設置的文章就介紹到這了,更多相關electron最小化托盤內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07antd Select下拉菜單動態(tài)添加option里的內容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內容操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值,監(jiān)聽源必須是一個getter函數(shù),本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12VUE+node(express)實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關于VUE+node(express)前后端分離實例內容,有需要的朋友們參考下。2019-10-10element-ui 表格數(shù)據(jù)時間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時間格式化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08