Electron 中如何创建和显示通知？

推荐答案

在 Electron 中，可以使用 Notification 模块来创建和显示通知。以下是一个简单的示例代码：

const { Notification } = require('electron');

function showNotification(title, body) {
  new Notification({ title, body }).show();
}

// 示例：显示一个通知
showNotification('Hello', 'This is a notification from Electron!');

本题详细解读

1. 引入 Notification 模块

首先，需要从 electron 模块中引入 Notification 类：

const { Notification } = require('electron');

2. 创建通知对象

使用 new Notification(options) 创建一个通知对象。options 是一个对象，包含以下常用属性：

• title：通知的标题。
• body：通知的内容。
• icon：通知的图标（可选）。

例如：

const notification = new Notification({
  title: 'Hello',
  body: 'This is a notification from Electron!',
  icon: 'path/to/icon.png'
});

3. 显示通知

创建通知对象后，调用 show() 方法来显示通知：

notification.show();

4. 处理通知事件

Notification 对象还支持一些事件，例如 click、close 等，可以通过监听这些事件来处理用户与通知的交互：

notification.on('click', () => {
  console.log('Notification clicked');
});

notification.on('close', () => {
  console.log('Notification closed');
});

5. 注意事项

• 在 macOS 上，通知会显示在屏幕的右上角。
• 在 Windows 和 Linux 上，通知会显示在任务栏的通知区域。
• 如果应用没有获得焦点，通知可能会显示在系统托盘中。

6. 完整示例

以下是一个完整的示例，展示了如何创建、显示和处理通知：

// www.javascriptcn.com code example
const { Notification } = require('electron');

function showNotification(title, body) {
  const notification = new Notification({ title, body });

  notification.on('click', () => {
    console.log('Notification clicked');
  });

  notification.on('close', () => {
    console.log('Notification closed');
  });

  notification.show();
}

// 示例：显示一个通知
showNotification('Hello', 'This is a notification from Electron!');

通过以上步骤，你可以在 Electron 应用中轻松创建和显示通知。