<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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://www.cnblogs.com/zjf-1992/p/7534944.html?utm_medium=referral&utm_source=debugrun
      QQ登錄框的例子:http://www.cnblogs.com/Starts_2000/p/electron-qqlogin-demo.html

      ↓ 查看全文

      electron程序顯示在右下角托盤由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

      懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

      electron程序顯示在右下角托盤-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>