electron-vue跨平台桌面应用开发实战教程(五)——系统通知&托盘

David1025
前几篇文章,我们介绍了一些开发中经常用到的功能,这篇文章我们主要是讲解下怎么发送系统通知,设置托盘

1.系统通知

其实Electron的系统通知比较简单,是用HTML5的Notification实现的,但是在这儿需要注意的是,windows平台发送通知是需要为程序设置appId(下一篇文章我们讲解下Electron怎么打包,怎么设置应用程序图标)。

通知一共有两种调用方式

  • HTML5 Notification API(渲染进程中使用)
  • Notification模块(主进程中使用)

接下来,我们新建一个页面,来测试下渲染进程中怎么使用系统通知。

<template>
  <div>
    <el-button @click="sendNotification">发送系统通知</el-button>
  </div>
</template>
<script>
export default {
  name: 'DemoTest',
  methods: {
    sendNotification () {
      const myNotification = new Notification('标题', {
        body: '通知正文内容'
      })
      myNotification.onclick = () => {
        console.log('通知被点击')
      }
    }
  }
}
</script>

系统通知

2.设置托盘

托盘属于系统级的操作,所有这个也是在主进程中设置的。在这个需要注意的是,设置托盘必须在程序ready之后。

我们为程序设置了托盘图标和菜单。点击托盘图标重新展示主窗口。

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  // 设置托盘
  const tray = new Tray('./src/assets/icon_tray.png')
  // 设置托盘菜单
  const trayContextMenu = Menu.buildFromTemplate([
    {
      label: '打开',
      click: () => {
        win.show()
      }
    }, {
      label: '退出',
      click: () => {
        app.quit()
      }
    }
  ])
  tray.setToolTip('myApp')
  tray.on('click', () => {
    win.show()
  })
  tray.on('right-click', () => {
    tray.popUpContextMenu(trayContextMenu)
  })
  // 创建渲染窗口
  createWindow()
})

还有一点需要注意的是,我们之前的文章中,点击自定义的关闭图标,调用的方法是

app.close()

这样会导致我们直接关闭程序,点击托盘也会报错,所以我们这儿需要改为

app.hide()

好了,本篇文章的所有内容就讲完了,下一篇文档来教大家怎么打包应用和设置应用图标

更多内容请关注公众号

在这里插入图片描述

阅读 2.6k

一个小小的程序,喜欢研究新技术,喜欢数码产品

58 声望
8 粉丝
0 条评论

一个小小的程序,喜欢研究新技术,喜欢数码产品

58 声望
8 粉丝
文章目录
宣传栏