使用 Electron 将应用程序放入托盘

XGBCCC 发布于2019-08-20 14:40 / 3509人阅读

摘要：使用将应用程序放入托盘此系列文章的应用示例已发布于可以或下载后运行查看欢迎使用模块允许您在操作系统的通知区域中创建图标此图标还可以附加上下文菜单在浏览器中查看完整文档托盘支持进程示例按钮使用模块向主进程发送消息在主进程中应用程序会被告

使用 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中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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