消息提示

在Electron平台下没有可用的消息通知组件，而HTML5附带的notification在Windows 7无法正常显示，所以我们需要做一个能够在Windows 7 平台下能够显示的消息提示组件。

erayt-elnotifier组件

erayt-elnotifier组件能够正常在Electron支持的平台上运行的，增加了消息提示音和多条提示信息垂直显示的功能，在接收到多条提示消息程序自动加入到队列中，在下次桌面有空间显示的时候，弹出队列里面的消息提示框。

安装

  1. npm install erayt-elnotifier

使用

  • 调用模块
  1. const notifier = require('erayt-elnotifier')
  • 基本消息配置
    在基本的设置中，使用默认的提示图标，和默认的提示音，默认五秒自动关闭提示框。
  1. // Just title and content
  2. const notification = notifier.notify('Notification', //标题
  3.     {message: 'Event begins in 10 minutes3'}//内容
  4. );

消息提示组件 - 图1

  • 完整选项配置
    可以根据需要对提示的图标、提示的内容和提示音做出配置，同时还可以对自动关闭的时间和提示按钮做出配置。
  1. const notification = notifier.notify('Calendar', //标题
  2. {
  3.   message: 'Event begins in 10 minutes',//内容
  4.   icon: 'http://cl.ly/J49B/3951818241085781941.png',//左侧图标
  5.   buttons: ['close', 'cancel'],//右侧垂直按钮
  6.   audio:__dirname+'/error.wav',//提示音
  7.   duration:10000//自动关闭的时间
  8. })

消息提示组件 - 图2

  • Clicked事件
    当提示通知区域被点击，触发clicked事件，经常使用关闭操作。
  1. notification.on('clicked', () => {
  2.   notification.close()
  3. })
  • buttonClicked事件
    当配置的按钮中的任意一个触发了点击事件，我们就能够得到buttonClicked事件，在回调函数中以按钮的文本名称也能传进来。
  1. notification.on('buttonClicked', (text) => {
  2.   alert(text)//按钮的名称文本
  3. })