知识 分享 互助 懒人建站

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

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

    electron程序显示在右下角托盘

    作者:bbin视讯真人娱乐平台登入 来源:云计算 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://bbinsxzrylptdr.xsb868.com/zjf-1992/p/7534944.html?utm_medium=referral&utm_source=debugrun
    QQ登录框的例子:http://bbinsxzrylptdr.xsb868.com/Starts_2000/p/electron-qqlogin-demo.html

    ↓ 查看全文

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

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

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

    网站地图 ag旗舰厅app下载登入 ag旗舰厅平台注册登入 gp视讯官方网登入
    太阳城集团 申博官方网站 老虎机游戏下载 sunbet
    大运彩票游戏平台 淘金盈手机怎么登入 ag国际馆游戏直营网 金宝博提款
    gp视讯游戏登入 ag视讯线路检测登入 ag旗舰厅游戏开户登入 ag旗舰厅现金网登入
    bbin视讯bbin视讯娱乐ag8820登入 ag视讯官方网址登入 bbin视讯平台官网登入 ag旗舰厅网站登入
    758sunbet.com XSB438.COM 8HBS.COM 44TGP.COM S618B.COM
    305SUN.COM DC738.COM 598jbs.com XSB577.COM XSB595.COM
    101ib.com 868XTD.COM 987jbs.com 167psb.com 38XTD.COM
    177TGP.COM 888xsb.com 508XTD.COM 578sj.com 967SUN.COM