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

效果

相关推荐
江公望7 小时前
CSS variable 10分钟讲清楚
前端·css
YAY_tyy7 小时前
基于矩形区域的相机自动定位与飞行控制实现
前端·javascript·3d·cesium
国服第二切图仔7 小时前
Electron for 鸿蒙PC项目实战案例之散点图数据可视化应用
信息可视化·electron·鸿蒙pc
随风一样自由7 小时前
React中实现iframe嵌套登录页面:跨域与状态同步解决方案探讨
javascript·react.js·ecmascript
Chicheng_MA7 小时前
OpenWrt WebUI 交互架构深度解析
javascript·lua·openwrt
pale_moonlight7 小时前
九、Spark基础环境实战(下)
大数据·javascript·spark
|晴 天|7 小时前
前端安全入门:XSS 与 CSRF 的攻与防
前端·安全·xss
黛色正浓7 小时前
【React】ReactRouter记账本案例实现
前端·react.js·前端框架
可爱又迷人的反派角色“yang”7 小时前
Mysql数据库(一)
运维·服务器·前端·网络·数据库·mysql·nginx
Aerelin7 小时前
爬虫图片采集(自动化)
开发语言·前端·javascript·爬虫·python·html