electron最小化托盤設(shè)置
眾所眾知桌面app都是有小托盤的,我們可以退去登錄;也可以實(shí)現(xiàn)一些其他的功能,比如音樂播放器就可以切換下一首歌曲以及一些設(shè)置等等。那么electron中怎么實(shí)現(xiàn)呢?
官方文檔
以下示列是官方文檔的示列,是一個(gè)單選的選擇器;大家也可以根據(jù)文檔一步一步去測(cè)試出來 elctron托盤文檔地址
注意
- icon地址一定要正確,否則托盤出不來,要報(bào)錯(cuò)
- icon地址需要絕對(duì)路徑
報(bào)錯(cuò):
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周期中對(duì)托盤進(jìn)行設(shè)置,大家可以在網(wǎng)上去下載一些圖標(biāo),我是在iconfont網(wǎng)站去下載的,尺寸選擇的是16;感覺剛剛好。
- 啟動(dòng)服務(wù)器是在服務(wù)器執(zhí)行以后顯示屏幕
- 退出登錄是直接關(guān)閉應(yīng)用
- 當(dāng)用戶點(diǎn)擊圖標(biāo)的時(shí)候展示應(yīng)用
這兒需要注意一個(gè)點(diǎn):圖標(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: '啟動(dòng)服務(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(); } }, ]) // 點(diǎn)擊圖標(biāo)展示 tray.on('click',() => { win.show(); }); // 鼠標(biāo)放置上去顯示的文本 tray.setToolTip('PDF管理工具'); tray.setContextMenu(contextMenu); })
到此這篇關(guān)于electron最小化托盤設(shè)置的文章就介紹到這了,更多相關(guān)electron最小化托盤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue3中watch監(jiān)聽對(duì)象的屬性值(監(jiān)聽源必須是一個(gè)getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對(duì)象的屬性值,監(jiān)聽源必須是一個(gè)getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12vue中el-table多層級(jí)嵌套的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table多層級(jí)嵌套的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05VUE+node(express)實(shí)現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實(shí)例內(nèi)容,有需要的朋友們參考下。2019-10-10vue中post請(qǐng)求以a=a&b=b 的格式寫遇到的問題
這篇文章主要介紹了vue中post請(qǐng)求以a=a&b=b 的格式寫遇到的問題,需要的朋友可以參考下2018-04-04element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08