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