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

效果

相关推荐
a濯4 小时前
element plus el-table多选框跨页多选保留
javascript·vue.js
蓝婷儿4 小时前
前端面试每日三题 - Day 32
前端·面试·职场和发展
星空寻流年5 小时前
CSS3(BFC)
前端·microsoft·css3
九月TTS5 小时前
开源分享:TTS-Web-Vue系列:Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
H309195 小时前
vue3+dhtmlx-gantt实现甘特图展示
android·javascript·甘特图
CodeCraft Studio5 小时前
数据透视表控件DHTMLX Pivot v2.1发布,新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程6 小时前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹6 小时前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS6 小时前
TTS-Web-Vue系列:移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js
曾经的你d6 小时前
【electron+vue】常见功能之——调用打开/关闭系统软键盘,解决打包后键盘无法关闭问题
vue.js·electron·计算机外设