electron最小化托盤設(shè)置

更新時(shí)間：2023年04月18日 08:53:13 作者：霧戀

本文主要介紹了electron最小化托盤設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

官方文檔

以下示列是官方文檔的示列，是一個(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；感覺剛剛好。

啟動(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)容請搜索腳本之家以前的文章或繼續(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)證的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動(dòng)畫示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動(dòng)畫示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
springboot?vue測試平臺前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測試平臺前端項(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í)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對大家的學(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à)值，希望對大家有所幫助。如有錯(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的開源可視化圖表庫,它通過簡單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下
2023-11-11
Vue?privide?和inject?依賴注入的使用詳解
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
Vue 實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(只有css+js沒有后臺驗(yàn)證步驟)
這篇文章給大家介紹了基于vue實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能，代碼引用css與js都是線上的，將代碼全部復(fù)制到一個(gè)html中可以直接打開，超級簡單，感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
vsCode安裝配置創(chuàng)建Vue3項(xiàng)目全過程
本文介紹了如何在Windows系統(tǒng)上安裝和配置Vue.js開發(fā)環(huán)境,包括安裝VS Code、Node.js、Vue CLI以及創(chuàng)建和啟動(dòng)一個(gè)Vue項(xiàng)目
2025-01-01