[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()
  }
})

效果

相关推荐
十五_在努力10 分钟前
Tailwind Css 中使用 Element Plus 主题系统的方案与实现
前端·vue.js
learning_tom10 分钟前
微信小程序重要知识点
前端·apache
江城开朗的豌豆21 分钟前
React的onClick:你以为懂了,其实可能用错了!
前端·javascript·react.js
yinuo1 小时前
纯CSS实现进度完成动画效果
前端
前端小巷子1 小时前
高性能 Vue 应用运行时策略
前端·vue.js·面试
小磊哥er1 小时前
【办公自动化】日常工作中如何使用Python自动化整理文件?
前端
前端加油站1 小时前
使用 pnpm patch 修改第三方依赖
前端·vue.js
姑苏洛言1 小时前
餐饮店数字化转型指南:一个小程序搞定全流程运营
前端·javascript·后端
Catfood_Eason1 小时前
通用代码自用
java·服务器·前端
江城开朗的豌豆1 小时前
Element UI表格组件的秘密武器:key属性的妙用与全属性解析
前端·javascript·vue.js