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

