electron托盘的一些方法

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>

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请尽快下载!'});
    }
}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: