Electron Notification动态消息通知

Notification通知使用

Notification通知的使用方法有多种，在此介绍三种使用方式

---

一、Notification是什么？

对于渲染进程，Electron 方便地允许开发者使用 HTML5 通知 API 发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。

二、使用步骤

1.引入Notification模块

const { Notification } = require('electron')

2. 第一种使用方式

代码如下（示例）：

const { app, BrowserWindow, Notification } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

let option = {
     title: "创建通知",   // 通知标题
     body: "创建通知成功",  // 内容
     icon: path.join(__dirname,"./logo.png")                                // 图标
     href: 'https://www.cnblogs.com/binglicheng/' // 地址
};        
 // 创建通知并保存
  new Notification({title:option.title, body:option.body, icon: option.icon}).show();

app.whenReady().then(createWindow).then(showNotification)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

3. 第二种使用方式

代码如下（示例）：

const NOTIFICATION_TITLE = '增强加密'
const NOTIFICATION_BODY = '开启增强加密成功'
const NOTIFICATION_ICON =path.join(__dirname,"./logo.png"); 
new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY1, icon: NOTIFICATION_ICON }).show(); 

4. 第三种使用方式

代码如下（示例）：

new Notification({
   title:"增强加密",
   body:"开启加密成功",
   icon: path.join(__static,"./logo.png")
}).show();

5. 实现效果

三、动态消息通知

以根据复选框的状态不同显示不同的消息为例，分析：
可以配合click点击次数来代替获取复选框的状态来设置消息内容，点击次数为奇数代表复选框未选中，点击次数为偶数表示复选框被选中

代码如下（示例）：

import { app, BrowserWindow, ipcMain, dialog, Tray, Menu, Notification } from 'electron'
import { version } from 'os'
import '../renderer/store'
const path = require('path')

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
let appTray = null; // 在外面创建 tray ，防止被自动删除，导致图标消失
// 设置开发模式
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 620,
    width: 400,
    useContentSize: true,
    // frame: false,//添加后自定义标题//自定义边框
    // movable: true,//可否移动
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: false,
      webSecurity: false,
    },
    
  })
  mainWindow.loadURL(winURL)

  ipcMain.on('add-item',() =>{
    taryMoudle.addItemWindow();
  })
  
  // 系统托盘
  //系统托盘右键菜单
  const taryMoudle = require('../renderer/store/taryMoudle')
  var trayMenuTemplate = [
    {
        label: "显示主窗口",        
        click: function() {
            mainWindow.show();         
        } //打开相应页面
    },
    {
        label: "增强加密",
        type:'checkbox',
        checked: true,
        click: function() {
          //右下角弹出消息弹框                 
          const NOTIFICATION_TITLE = '增强加密'
          const NOTIFICATION_BODY = '开启增强加密成功'
          const NOTIFICATION_BODY1 = '关闭增强加密成功'        
          const NOTIFICATION_ICON = path.join(__static,"./zero.ico"); 
          
          count = count + 1;
          console.log(count)
          if (count % 2 == 0) {
            new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY, icon: NOTIFICATION_ICON }).show();
          } else {
            new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY1, icon: NOTIFICATION_ICON }).show();
          }                                       
        } 
    },
    {
        label: "退出客户端",
        click: function() {
            //ipc.send('close-main-window');
            app.quit();
        }
    },
    ];
    //系统托盘图标目录
    let iconPath;
    //根据开发环境与线上环境调节图标调用路径，防止打包后图标不显示
    if(process.env.NODE_ENV !== 'development'){
      iconPath = path.join(__static, "./zero.ico");
    }else{
      iconPath = path.join(__dirname, "./zero.ico");
    }
    let appTray = new Tray(iconPath);
    console.log(iconPath);
    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    //设置此托盘图标的悬停提示内容
    appTray.setToolTip("xxxx");
    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);

    // 设置click点击次数计数
    let count = 0; 

    //单点击 1.主窗口显示隐藏切换 2.清除闪烁
    // 单击显示主窗口，再单击隐藏主窗口
    appTray.on("click", function() {
      if (!!timer) {
          appTray.setImage(iconPath);
          //主窗口显示隐藏切换
          mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
          // 关闭托盘显示
          // appTray.destroy();
      }
    });
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

实现效果：