electron最小化托盤設(shè)置
眾所眾知桌面app都是有小托盤的，我們可以退去登錄；也可以實(shí)現(xiàn)一些其他的功能，比如音樂(lè)播放器就可以切換下一首歌曲以及一些設(shè)置等等。那么electron中怎么實(shí)現(xiàn)呢？
官方文檔
以下示列是官方文檔的示列，是一個(gè)單選的選擇器；大家也可以根據(jù)文檔一步一步去測(cè)試出來(lái) elctron托盤文檔地址
注意
- icon地址一定要正確，否則托盤出不來(lái)，要報(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；感覺(jué)剛剛好。
- 啟動(dòng)服務(wù)器是在服務(wù)器執(zhí)行以后顯示屏幕
- 退出登錄是直接關(guān)閉應(yīng)用
- 當(dāng)用戶點(diǎn)擊圖標(biāo)的時(shí)候展示應(yīng)用
這兒需要注意一個(gè)點(diǎn)：圖標(biāo)路徑不能直接寫死需要通過(guò)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+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例
這篇文章主要介紹了vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
springboot?vue測(cè)試平臺(tái)前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測(cè)試平臺(tái)前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue3動(dòng)態(tài)路由addRoute實(shí)例詳解
這篇文章主要介紹了vue3動(dòng)態(tài)路由addRoute的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁(yè)面橫向滑動(dòng)效果
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁(yè)面橫向滑動(dòng)效果,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),它通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
Vue 實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(只有css+js沒(méi)有后臺(tái)驗(yàn)證步驟)
這篇文章給大家介紹了基于vue實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能，代碼引用css與js都是線上的，將代碼全部復(fù)制到一個(gè)html中可以直接打開(kāi)，超級(jí)簡(jiǎn)單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
vsCode安裝配置創(chuàng)建Vue3項(xiàng)目全過(guò)程
本文介紹了如何在Windows系統(tǒng)上安裝和配置Vue.js開(kāi)發(fā)環(huán)境,包括安裝VS Code、Node.js、Vue CLI以及創(chuàng)建和啟動(dòng)一個(gè)Vue項(xiàng)目2025-01-01