使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用(Electron/node)

const {app, BrowserWindow} = require('electron'),
    path = require('path'),
    electron = require('electron'),
//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上.
    Menu = electron.Menu,
    Tray = electron.Tray;

//托盘对象
let appTray = null, win;

function createWindow() {
    //创建浏览器窗口
    win = new BrowserWindow({
        width: 1360,
        height: 800,
        // autoHideMenuBar: true//关闭菜单栏,Alt 还可以打开
        // frame: false//整个菜单栏关闭,包括可关闭窗口的按钮
    });

    //然后加载应用的index.html
    win.loadURL(path.join('file://', __dirname, '/index.html'));

    //打开开发者工具
    // win.webContents.openDevTools();

    win.setMenu(null);//只关闭菜单栏

    //系统托盘右键菜单
    let trayMenuTemplate = [
        {
            label: '退出',
            click: function () {
                app.quit();
                app.quit();//因为程序设定关闭为最小化,所以调用两次关闭,防止最大化时一次不能关闭的情况
            }
        }
    ];

    //系统托盘图标目录
    trayIcon = path.join(__dirname, './');//app是选取的目录

    appTray = new Tray(path.join(trayIcon, './images/icon.ico'));//app.ico是app目录下的ico文件

    //系统托盘图标闪烁
    /*let count = 0,timer=null;
    timer=setInterval(function() {
        count++;
        if (count%2 == 0) {
            appTray.setImage(path.join(trayIcon, './images/empty.ico'))
        } else {
            appTray.setImage(path.join(trayIcon, './images/icon.ico'))
        }
    }, 500);*/

    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);

    //设置此托盘图标的悬停提示内容
    appTray.setToolTip('我的托盘图标');

    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);
    //单击右下角小图标显示应用
    appTray.on('click', function () {
        win.show();
    })

    //当window被关闭,这个事件会被触发
    win.on('closed', () => {
        // 取消引用 window 对象,如果你的应用支持多窗口的话,
        // 通常会把多个 window 对象存放在一个数组里面,
        // 与此同时,你应该删除相应的元素。
        win = null;
    })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin')
        app.quit()
});

app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
    if (win === null)
        createWindow()
});
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。
//加入未读的音频
function playAudio(){
    var audio = new Audio(__dirname + '/tray/app.wav');
    audio.play();
    setTimeout(function(){
        console.log("暂停播放....");
        audio.pause();// 暂停
    }, 800)
}
playAudio();



Electron 系统托盘图标/任务通知栏图标/右下角图标

electron应用任务栏图标闪烁提醒

Electron 如何通信,把消息发送到main.js

猜你喜欢

转载自blog.csdn.net/qq_35792483/article/details/81000596