electron托盘有一些方法,可以动态创建托盘图标、设置图标、移除图标等
例子如下:
html页面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>托盘方法</title>
<script src="event.js"></script>
</head>
<body >
<h1>托盘方法</h1>
<textarea id="log" style="width: 500px;height:400px"></textarea>
<button onclick="onClick_AddTray()">添加托盘图标</button>
<p/>
<button onclick="onClick_SetIcon()">设置托盘图标</button>
<p/>
<button onclick="onClick_SetTitle()">设置托盘标题(Only Mac)</button>
<p/>
<button onclick="onClick_SetPressedImage()">设置托盘按下显示的图标(Only Mac)</button>
<p/>
<button onclick="onClick_SetTooltip()">设置托盘的提示文本</button>
<p/>
<button onclick="onClick_RemoveTray()">移除托盘图标</button>
<p/>
<button onclick="onClick_DisplayBalloon()">显示气泡(Only Windows)</button>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>托盘方法</title>
<script src="event.js"></script>
</head>
<body >
<h1>托盘方法</h1>
<textarea id="log" style="width: 500px;height:400px"></textarea>
<button onclick="onClick_AddTray()">添加托盘图标</button>
<p/>
<button onclick="onClick_SetIcon()">设置托盘图标</button>
<p/>
<button onclick="onClick_SetTitle()">设置托盘标题(Only Mac)</button>
<p/>
<button onclick="onClick_SetPressedImage()">设置托盘按下显示的图标(Only Mac)</button>
<p/>
<button onclick="onClick_SetTooltip()">设置托盘的提示文本</button>
<p/>
<button onclick="onClick_RemoveTray()">移除托盘图标</button>
<p/>
<button onclick="onClick_DisplayBalloon()">显示气泡(Only Windows)</button>
</body>
</html>
event.js代码:
const remote = require('electron').remote;
const Menu = remote.Menu;
const Tray = remote.Tray;
let tray;
let contextMenu;
function onClick_AddTray()
{
if(tray != undefined) {
return;
}
// 添加托盘图标
tray = new Tray('./images/icon.png');
// 为托盘图标添加上下文菜单
contextMenu = Menu.buildFromTemplate([
{label:'复制',role:'copy'},
{label:'粘贴',role:'paste'},
{label:'剪切',role:'cut'}
])
tray.setToolTip('这是一个托盘应用');
//气泡消息(仅针对于Windows)
// 气泡消息显示事件
tray.on('balloon-show',()=>{
log.value += 'balloon-show\r\n';
})
// 气泡消息单击事件
tray.on('balloon-click',()=>{
log.value += 'balloon-click\r\n';
});
// 气泡消息关闭事件
tray.on('balloon-closed',()=>{
log.value += 'balloon-closed\r\n';
});
// 气泡的click和closed事件是互斥的,单击气泡只会触发click事件,只有当气泡自己关闭后,才会触发closed事件
}
// 设置托盘图标
function onClick_SetIcon() {
if(tray != undefined) {
tray.setImage('./images/note1.png')
}
}
// 设置托盘标题(Only Mac)
function onClick_SetTitle() {
if(tray != undefined) {
tray.setTitle('hello world');
}
}
// 设置托盘按下显示的图标(Only Mac)
function onClick_SetPressedImage() {
if(tray != undefined) {
tray.setPressedImage('./images/abc.png');
}
}
// 设置托盘的提示文本
function onClick_SetTooltip() {
if(tray != undefined) {
tray.setToolTip('This is a tray');
}
}
// 移除托盘图标
function onClick_RemoveTray() {
if(tray != undefined) {
tray.destroy();
tray = undefined;
}
}
// 显示气泡(Only Windows)
function onClick_DisplayBalloon() {
if(tray != undefined) {
tray.displayBalloon({title:'有消息了',icon:'./images/note.png',content:'软件更新了,\r\n请尽快下载!'});
}
}
const Menu = remote.Menu;
const Tray = remote.Tray;
let tray;
let contextMenu;
function onClick_AddTray()
{
if(tray != undefined) {
return;
}
// 添加托盘图标
tray = new Tray('./images/icon.png');
// 为托盘图标添加上下文菜单
contextMenu = Menu.buildFromTemplate([
{label:'复制',role:'copy'},
{label:'粘贴',role:'paste'},
{label:'剪切',role:'cut'}
])
tray.setToolTip('这是一个托盘应用');
//气泡消息(仅针对于Windows)
// 气泡消息显示事件
tray.on('balloon-show',()=>{
log.value += 'balloon-show\r\n';
})
// 气泡消息单击事件
tray.on('balloon-click',()=>{
log.value += 'balloon-click\r\n';
});
// 气泡消息关闭事件
tray.on('balloon-closed',()=>{
log.value += 'balloon-closed\r\n';
});
// 气泡的click和closed事件是互斥的,单击气泡只会触发click事件,只有当气泡自己关闭后,才会触发closed事件
}
// 设置托盘图标
function onClick_SetIcon() {
if(tray != undefined) {
tray.setImage('./images/note1.png')
}
}
// 设置托盘标题(Only Mac)
function onClick_SetTitle() {
if(tray != undefined) {
tray.setTitle('hello world');
}
}
// 设置托盘按下显示的图标(Only Mac)
function onClick_SetPressedImage() {
if(tray != undefined) {
tray.setPressedImage('./images/abc.png');
}
}
// 设置托盘的提示文本
function onClick_SetTooltip() {
if(tray != undefined) {
tray.setToolTip('This is a tray');
}
}
// 移除托盘图标
function onClick_RemoveTray() {
if(tray != undefined) {
tray.destroy();
tray = undefined;
}
}
// 显示气泡(Only Windows)
function onClick_DisplayBalloon() {
if(tray != undefined) {
tray.displayBalloon({title:'有消息了',icon:'./images/note.png',content:'软件更新了,\r\n请尽快下载!'});
}
}