|
electron实现电脑右下脚弹出一个窗口,窗口使用browerwindow创建,并3秒后自动关闭
在 Electron 中,你可以使用 `BrowserWindow` 创建一个窗口,并在 3 秒后自动关闭它。以下是一个简单的示例,展示如何实现这个功能:
### 1. 在 `main.js` 中创建窗口
首先,你需要在 `main.js` 中创建一个新的 `BrowserWindow` 实例,并设置它的显示内容和自动关闭的逻辑。
- const { app, BrowserWindow } = require('electron');
- const path = require('path');
- function createWindow() {
- // 创建一个新的窗口
- const win = new BrowserWindow({
- width: 300, // 窗口宽度
- height: 200, // 窗口高度
- alwaysOnTop: true, // 窗口总在最上层
- webPreferences: {
- contextIsolation: true,
- preload: path.join(__dirname, 'preload.js') // 使用 preload.js 进行安全通信
- }
- });
- // 加载窗口的 HTML 文件
- win.loadFile('notification.html');
- // 3秒后自动关闭窗口
- setTimeout(() => {
- win.close(); // 关闭窗口
- }, 3000);
- }
- // 当应用准备好时创建窗口
- app.whenReady().then(createWindow);
- // 处理关闭事件
- app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit(); // 退出应用
- }
- });
- app.on('activate', () => {
- if (BrowserWindow.getAllWindows().length === 0) {
- createWindow(); // 如果没有窗口打开,则重新创建一个窗口
- }
- });
复制代码
### 2. 创建 `notification.html` 文件
接下来,你需要创建一个名为 `notification.html` 的文件,用于显示在窗口中的内容。
**notification.html**
- html
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>通知窗口</title>
- <style>
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- background-color: #f0f0f0;
- font-family: Arial, sans-serif;
- }
- </style>
- </head>
- <body>
- <h1>这是一个通知窗口</h1>
- <p>窗口将在3秒后自动关闭。</p>
- </body>
- </html>
复制代码
### 3. 启动应用
确保你的项目结构正确,然后运行 Electron 应用。你应该能看到一个窗口弹出,并且它将在 3 秒后自动关闭。
### 总结
- 使用 `BrowserWindow` 创建一个新的窗口。
- 加载一个 HTML 文件以显示内容。
- 使用 `setTimeout` 来设置延迟,自动关闭窗口。
- 这种方法可以在 Electron 应用中实现简单的通知窗口功能。
|
|