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

效果

相关推荐
吃饺子不吃馅11 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多21 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆29 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar35 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端