[Electron]中的Notification通知

Electron中的Notification

Notification 用来创建OS(操作系统)桌面通知

静态方法

复制代码
Notification.isSupported()

返回 boolean - 当前系统是否支持桌面通知

复制代码
const notification = new Notification([options])

实例方法

复制代码
notification.show()

显示通知

复制代码
notification.close()

忽略这条通知

实例属性

notification.title string 属性,用于确定通知的标题。notification.subtitle string 属性,用于确定通知的子标题。notification.body string 属性,用于确定通知的内容。notification.replyPlaceholder string 属性,用于确定通知的回复提示信息。notification.sound string 属性,用于确定通知的声音。notification.closeButtonText string 属性,用于确定通知关闭按钮文本。notification.silent boolean 属性代表通知是否静音。notification.hasReply boolean 属性表示通知是否有回复操作。notification.urgency Linux string 属性,用于确定通知的紧急级别 可以是 'normal', 'critical', 或者 'low'notification.timeoutType string 属性代表通知的超时持续时间。 可以是 'default' 或 'never'.notification.actions 属性代表通知的动作notification.toastXml Windows string 通过windows的 toastXML 自定义通知

实例

  • 菜单栏,通知下有两个子菜单

    • 1.显示通知

    • 2.关闭通知

代码

复制代码
const { app, BrowserWindow, Menu, Notification,dialog} = require('electron')
const path = require('node:path')
​
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
​
  win.loadFile('index.html')
​
}
​
app.whenReady().then(() => {
  createWindow()
  const notification = new Notification();
  const template = [
    {
      label: '通知',
      role: 'common',
      submenu: [
        {
          label: '1.显示通知',
          click() {
            if(Notification.isSupported()){
              // 支持Notification
              
              notification.title = "自定义通知--title";
              notification.body = "自定义通知--body";
              notification.show();
            }else{
              dialog.showErrorBox("报错!","不支持Notification")
            }
          }
        },
        {
          label: '2.关闭通知',
          click() {
            if(notification){
              notification.close();
            }
          }
        }
      ]
​
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
​
​
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
​
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

效果

相关推荐
ahhdfjfdf几秒前
最全的`Map` 和 `WeakMap`的区别
前端
LAM LAB4 分钟前
【VBA】WPS/PPT设置标题字体
javascript·powerpoint·vba·wps
JYeontu5 分钟前
实现一个带@功能的输入框组件
前端·javascript·vue.js
一颗奇趣蛋21 分钟前
vue-router的query和params的区别(附实际用法)
前端·vue.js
孤城28626 分钟前
MAC电脑常用操作
前端·macos·快捷键·新手·电脑使用
木亦Sam27 分钟前
Vue DevTools逆向工程:自己实现一个组件热更新调试器
前端
酷酷的阿云27 分钟前
动画与过渡效果:UnoCSS内置动画库的实战应用
前端·css·typescript
dleei27 分钟前
使用docker创建gitlab仓库
前端·docker·gitlab
勤劳的代码小蜜蜂28 分钟前
大文件上传:告别传统传输瓶颈,让数据流转更高效
前端
前端大卫28 分钟前
Echarts 饼图的创新绘制技巧(附 Demo 和源码)
前端·javascript·echarts