使用 Electron 將應用程序放入托盤

XGBCCC 發布于2019-08-20 14:40 / 3514人閱讀

摘要：使用將應用程序放入托盤此系列文章的應用示例已發布于可以或下載后運行查看歡迎使用模塊允許您在操作系統的通知區域中創建圖標此圖標還可以附加上下文菜單在瀏覽器中查看完整文檔托盤支持進程示例按鈕使用模塊向主進程發送消息在主進程中應用程序會被告

使用 Electron 將應用程序放入托盤

此系列文章的應用示例已發布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運行查看. 歡迎 Star .

使用 tray 模塊允許您在操作系統的通知區域中創建圖標.

此圖標還可以附加上下文菜單.

在瀏覽器中查看完整 API 文檔 .

托盤

支持: Win, macOS, Linux | 進程: Main

示例按鈕使用 ipc 模塊向主進程發送消息. 在主進程中, 應用程序會被告知在托盤中放置一個帶有上下文菜單的圖標.

在此示例中, 可以通過單擊托盤圖標上下文菜單中的 "移除" 或再次點擊示例按鈕來刪除托盤圖標.

主進程

const path = require("path")
const electron = require("electron")
const ipc = electron.ipcMain
const app = electron.app
const Menu = electron.Menu
const Tray = electron.Tray

let appIcon = null

ipc.on("put-in-tray", function (event) {
  const iconName = process.platform === "win32" ? "windows-icon.png" : "iconTemplate.png"
  const iconPath = path.join(__dirname, iconName)
  appIcon = new Tray(iconPath)
  const contextMenu = Menu.buildFromTemplate([{
    label: "移除",
    click: function () {
      event.sender.send("tray-removed")
    }
  }])
  appIcon.setToolTip("在托盤中的 Electron 示例.")
  appIcon.setContextMenu(contextMenu)
})

ipc.on("remove-tray", function () {
  appIcon.destroy()
})

app.on("window-all-closed", function () {
  if (appIcon) appIcon.destroy()
})

渲染器進程

const ipc = require("electron").ipcRenderer

const trayBtn = document.getElementById("put-in-tray")
let trayOn = false

trayBtn.addEventListener("click", function (event) {
  if (trayOn) {
    trayOn = false
    document.getElementById("tray-countdown").innerHTML = ""
    ipc.send("remove-tray")
  } else {
    trayOn = true
    const message = "再次點擊示例按鈕移除托盤."
    document.getElementById("tray-countdown").innerHTML = message
    ipc.send("put-in-tray")
  }
})
// 從圖標上下文菜單中刪除托盤
ipc.on("tray-removed", function () {
  ipc.send("remove-tray")
  trayOn = false
  document.getElementById("tray-countdown").innerHTML = ""
})

高級技巧

Linux中的托盤支持.

在只有應用程序指示器支持的 Linux 發行版上，用戶需要安裝 libappindicator1 來使托盤圖標正常工作. 有關在 Linux 上使用托盤的更多詳細信息請查看完整 API 文檔 .

如果這邊文章對您有幫助, 感謝下方點贊或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.

云服務器 GPU云服務器 js將數據放入數組 js將數據放入cookie js 將數據放入 div js 將數據放入 div中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81827.html

electron程序保護措施（崩潰監控，開機自啟，托盤關閉）

摘要：當設置了參數時，將作為命令行參數傳遞。托盤關閉向和微信一樣，有的時候我們并不想讓用戶通過點關閉按鈕的時候就關閉程序，而是把程序最小化到托盤，在托盤上做真正的退出操作。首先要監聽窗口的關閉事件，阻止用戶關閉操作的默認行為。 showImg(https://segmentfault.com/img/remote/1460000016933565?w=960&h=640); 在某種情況下，我...

2i18ns 2019-08-23 12:52 評論0 收藏0
electron + react + react-router + mobx + webpack 搭

摘要：調試集成環境選擇模塊，簡單分離開發，測試，線上環境。程序保護開機自啟托盤最小化崩潰監控升級一行代碼接入升級平臺，實現客戶端升級功能打包構建一個指令搞定打包項目地址項目地址： https://github.com/ConardLi/electron-react electron-react electron + react + react-router + mobx + webpac...

pingan8787 2019-08-23 13:40 評論0 收藏0
tinypng upload一鍵壓縮上傳工具

摘要：關于這是一個基于的圖片壓縮上傳工具，壓縮過程主要通過調用提供的完成。因為是桌面端，所以很方便我們將圖片拖拽到任務托盤進行壓縮上傳，極大地提升了前端的工作效率，可以讓我們更專注于業務開發。地址項目地址：tinypng-upload 有興趣的可以玩一玩，因為平時經常會用到圖片壓縮，上傳，如果你也覺得很繁瑣的話，這個將會解決你的痛點。關于 tinypng-upload 這是一個基于 e...

hlcc 2019-08-22 18:18 評論0 收藏0
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建

摘要：是一個使用和等技術創建原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。談談技術選型使用去做底層的繪制，大項目首選狀態管理的最佳實踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經快要跟React-nativ...

Caicloud 2019-08-30 11:01 評論0 收藏0