資訊專欄INFORMATION COLUMN
摘要：使用將應(yīng)用程序放入托盤此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運行查看歡迎使用模塊允許您在操作系統(tǒng)的通知區(qū)域中創(chuàng)建圖標(biāo)此圖標(biāo)還可以附加上下文菜單在瀏覽器中查看完整文檔托盤支持進程示例按鈕使用模塊向主進程發(fā)送消息在主進程中應(yīng)用程序會被告
使用 Electron 將應(yīng)用程序放入托盤
此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運行查看. 歡迎 Star .
使用 tray 模塊允許您在操作系統(tǒng)的通知區(qū)域中創(chuàng)建圖標(biāo).
此圖標(biāo)還可以附加上下文菜單.
在瀏覽器中查看 完整 API 文檔 .
托盤支持: Win, macOS, Linux | 進程: Main
示例按鈕使用 ipc 模塊向主進程發(fā)送消息. 在主進程中, 應(yīng)用程序會被告知在托盤中放置一個帶有上下文菜單的圖標(biāo).
在此示例中, 可以通過單擊托盤圖標(biāo)上下文菜單中的 "移除" 或再次點擊示例按鈕來刪除托盤圖標(biāo).
主進程
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")
}
})
// 從圖標(biāo)上下文菜單中刪除托盤
ipc.on("tray-removed", function () {
ipc.send("remove-tray")
trayOn = false
document.getElementById("tray-countdown").innerHTML = ""
})
高級技巧
Linux中的托盤支持.
在只有應(yīng)用程序指示器支持的 Linux 發(fā)行版上，用戶需要安裝 libappindicator1 來使托盤圖標(biāo)正常工作. 有關(guān)在 Linux 上使用托盤的更多詳細信息請查看 完整 API 文檔 .
如果這邊文章對您有幫助, 感謝 下方點贊 或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81827.html
摘要：當(dāng)設(shè)置了參數(shù)時，將作為命令行參數(shù)傳遞。托盤關(guān)閉向和微信一樣，有的時候我們并不想讓用戶通過點關(guān)閉按鈕的時候就關(guān)閉程序，而是把程序最小化到托盤，在托盤上做真正的退出操作。首先要監(jiān)聽窗口的關(guān)閉事件，阻止用戶關(guān)閉操作的默認(rèn)行為。 showImg(https://segmentfault.com/img/remote/1460000016933565?w=960&h=640); 在某種情況下，我...
摘要：調(diào)試集成環(huán)境選擇模塊，簡單分離開發(fā)，測試，線上環(huán)境。程序保護開機自啟托盤最小化崩潰監(jiān)控升級一行代碼接入升級平臺，實現(xiàn)客戶端升級功能打包構(gòu)建一個指令搞定打包項目地址 項目地址 ： https://github.com/ConardLi/electron-react electron-react electron + react + react-router + mobx + webpac...
摘要：關(guān)于這是一個基于的圖片壓縮上傳工具，壓縮過程主要通過調(diào)用提供的完成。因為是桌面端，所以很方便我們將圖片拖拽到任務(wù)托盤進行壓縮上傳，極大地提升了前端的工作效率，可以讓我們更專注于業(yè)務(wù)開發(fā)。 地址 項目地址：tinypng-upload 有興趣的可以玩一玩，因為平時經(jīng)常會用到圖片壓縮，上傳，如果你也覺得很繁瑣的話，這個將會解決你的痛點。 關(guān)于 tinypng-upload 這是一個基于 e...
摘要：是一個使用和等技術(shù)創(chuàng)建原生程序的框架，它負責(zé)比較難搞的部分，你只需把精力放在你的應(yīng)用的核心上即可。談?wù)劶夹g(shù)選型使用去做底層的繪制，大項目首選狀態(tài)管理的最佳實踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經(jīng)快要跟React-nativ...
閱讀 2002·2023-04-25 16:19
閱讀 3116·2021-11-24 09:39
閱讀 837·2021-11-16 11:44
閱讀 1699·2019-08-29 12:52
閱讀 1147·2019-08-26 13:33
閱讀 1081·2019-08-26 10:26
閱讀 2209·2019-08-23 16:42
閱讀 2574·2019-08-23 14:37
