知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    electron程序显示在右下角托盘

    作者:速博娱乐是什么 来源:云计算 2017-10-28 人气:
    electron程序显示在右下角托盘的方法,使用electron实现将应用程序加入系统托盘demo,完整demo演示

    electron程序显示在右下角托盘的方法,使用electron实现将应用程序加入系统托盘demo

    一、将应用程序加入系统托盘

    回到正文, 微信启动时,系统托盘中会自动添加一个微信启动程序图标使用electron如何实现这种效果昵?

    以下是使用electron实现将应用程序加入系统托盘demo

    //electron
    const electron = require('electron');
    const app = electron.app;
    
    const path = require('path');
    
    //用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上.
    const Menu = electron.Menu;
    const Tray = electron.Tray;
    
    //托盘对象
    var appTray = null;
    
    function createWindow() {
        // Create the browser window.
        mainWindow = new BrowserWindow({
            width: 1000,
            height: 600,
            resizable: true,
            title: '将应用程序添加至系统托盘',
            skipTaskbar:false
        })
        //系统托盘右键菜单
        var trayMenuTemplate = [
            {
                label: '设置',
                click: function () {} //打开相应页面
            },
             {
                label: '意见反馈',
                click: function () {}
            },
            {
                label: '帮助',
                click: function () {}
            },
            {
                label: '关于微信',
                click: function () {}
            },
            {
                label: '退出微信',
                click: function () {
                    //ipc.send('close-main-window');
                     app.quit();
                }
            }
        ];
    
        //系统托盘图标目录
        trayIcon = path.join(__dirname, 'tray');
    
        appTray = new Tray(path.join(trayIcon, 'app.ico'));
    
        //图标的上下文菜单
        const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    
        //设置此托盘图标的悬停提示内容
        appTray.setToolTip('This is my application.');
    
        //设置此图标的上下文菜单
        appTray.setContextMenu(contextMenu);
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow);
    
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function() {
        // On OS X it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        if (process.platform !== 'darwin') {
            app.quit()
        }
    })
    

    二、系统托盘程序右键菜单

    就是步骤一声明 trayMenuTemplate 对象,加入托盘上下文菜单 //设置此图标的上下文菜单 appTray.setContextMenu(contextMenu); 即可,

    而进入右键菜单相应页面就要涉及主线程与渲染线程交互.对线程不了解的可参考之前写的博客主线程与渲染线程之间通信

    三、托盘来电消息的闪烁

    像微信一样,推送一条未读新消息闪烁,其原理不同时刻图标切换,一张透明与不透明图标切换。

    //系统托盘图标闪烁
    var count = 0,timer = null;
        timer=setInterval(function() {
            count++;
            if (count%2 == 0) {
                tray.setImage(path.join(trayIcon, 'app.ico'))
            } else {
                tray.setImage(path.join(trayIcon, 'appa.ico'))
            }
        }, 600);
    
        //单点击 1.主窗口显示隐藏切换 2.清除闪烁
        tray.on("click", function(){
            if(!!timer){
                tray.setImage(path.join(appTray, 'app.ico'))
                //主窗口显示隐藏切换
                mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
            }
    })
    

    四、加入未读的音频

    若对方发送一条未读消息,提示用户滴滴滴声音

    //playAudio
    function playAudio(){
        var audio = new Audio(__dirname + '/tray/app.wav');
        audio.play();
        setTimeout(function(){
            console.log("暂停播放....");
            audio.pause();// 暂停
        }, 800)
    }
    playAudio();
    

    完整代码demo

    //electron
    const electron = require('electron');
    const app = electron.app;
    
    const path = require('path');
    
    //用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上.
    const Menu = electron.Menu;
    const Tray = electron.Tray;
    
    //托盘对象
    var appTray = null;
    
    //createWindow
    function createWindow() {
        // Create the browser window.
        mainWindow = new BrowserWindow({
            width: 1000,
            height: 600,
            resizable: true,
            title: '将应用程序添加至系统托盘',
            skipTaskbar:false
        })
        //系统托盘右键菜单
        var trayMenuTemplate = [
            {
                label: '设置',
                click: function () {} //打开相应页面
            },
             {
                label: '意见反馈',
                click: function () {}
            },
            {
                label: '帮助',
                click: function () {}
            },
            {
                label: '关于微信',
                click: function () {}
            },
            {
                label: '退出微信',
                click: function () {
                    //ipc.send('close-main-window');
                     app.quit();
                }
            }
        ];
    
        //系统托盘图标目录
        trayIcon = path.join(__dirname, 'tray');
        appTray = new Tray(path.join(trayIcon, 'app.ico'));
        //图标的上下文菜单
        const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
        //设置此托盘图标的悬停提示内容
        appTray.setToolTip('This is my application.');
        //设置此图标的上下文菜单
        appTray.setContextMenu(contextMenu);
    
    
    
        //系统托盘图标闪烁
        var count = 0,timer = null;
        timer=setInterval(function() {
            count++;
            if (count%2 == 0) {
                tray.setImage(path.join(trayIcon, 'app.ico'))
            } else {
                tray.setImage(path.join(trayIcon, 'appa.ico'))
            }
        }, 600);
    
        //单点击 1.主窗口显示隐藏切换 2.清除闪烁
        tray.on("click", function(){
            if(!!timer){
                tray.setImage(path.join(appTray, 'app.ico'))
                //主窗口显示隐藏切换
                mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
            }
        })
    }
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow);
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function() {
        // On OS X it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        if (process.platform !== 'darwin') {
            app.quit()
        }
    })
    

    转载:http://sbylssm.985sunbet.com/zjf-1992/p/7534944.html?utm_medium=referral&utm_source=debugrun
    QQ登录框的例子:http://sbylssm.985sunbet.com/Starts_2000/p/electron-qqlogin-demo.html

    ↓ 查看全文

    electron程序显示在右下角托盘由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    electron程序显示在右下角托盘-最新评论

    网站地图 圣淘沙娱乐官网 威尼斯人真人娱乐场 永利娱乐是真的
    申博娱乐0559 太阳城集团官方 太阳城开户网 申博代理登录
    彩票在线app下载 澳门太阳城网址多少 真人澳门百家乐网站下载 雀彩网官网
    星河娱乐场 英皇国际在线娱乐 时时博娱乐bc2013 新世纪娱乐不违法吗
    皇城国际官方网站 伟博娱乐备用网址 新世纪娱乐最新网址 博狗博彩
    797psb.com 3454111.COM 701SUN.COM 729tt.com 151ib.com
    XSB798.COM 998PT.COM XSB438.COM 44sbib.com 175psb.com
    165sun.com 300xsb.com XSB595.COM 4444ib.com 688XTD.COM
    1112939.COM 8QZS.COM 998PT.COM 1112898.COM 8WJS.COM