electron最小化托盤設(shè)置
眾所眾知桌面app都是有小托盤的,我們可以退去登錄;也可以實現(xiàn)一些其他的功能,比如音樂播放器就可以切換下一首歌曲以及一些設(shè)置等等。那么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周期中對托盤進(jìn)行設(shè)置,大家可以在網(wǎng)上去下載一些圖標(biāo),我是在iconfont網(wǎng)站去下載的,尺寸選擇的是16;感覺剛剛好。
- 啟動服務(wù)器是在服務(wù)器執(zhí)行以后顯示屏幕
- 退出登錄是直接關(guān)閉應(yīng)用
- 當(dāng)用戶點擊圖標(biāo)的時候展示應(yīng)用
這兒需要注意一個點:圖標(biāo)路徑不能直接寫死需要通過path引入;
static指的是 public 文件下的static(將圖標(biāo)放置到該文件夾即可)
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: '啟動服務(wù)器', 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(); } }, ]) // 點擊圖標(biāo)展示 tray.on('click',() => { win.show(); }); // 鼠標(biāo)放置上去顯示的文本 tray.setToolTip('PDF管理工具'); tray.setContextMenu(contextMenu); })
到此這篇關(guān)于electron最小化托盤設(shè)置的文章就介紹到這了,更多相關(guān)electron最小化托盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧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ù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05VUE+node(express)實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實例內(nèi)容,有需要的朋友們參考下。2019-10-10element-ui 表格數(shù)據(jù)時間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時間格式化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08