Electron 底部系统消息通知

最新推荐文章于 2024-05-25 09:55:31 发布

梅子酱~

最新推荐文章于 2024-05-25 09:55:31 发布

阅读量1.6k

点赞数

文章标签： electron 前端 javascript

本文链接：https://blog.csdn.net/mm_0123456789/article/details/122718442

版权

系统消息通知

Notification 模块使用

文章目录

系统消息通知
一、代码实现

一、代码实现

1.html页面

index.html 代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息通知</title>
</head>
<body>
    <button id="notifyBtn">通知消息</button>    
</body>
</html>

2. 渲染进程

render.js 代码如下（示例）：

let notifyBtn = document.querySelector("#notifyBtn")
let option = {
     title: "消息通知",
     body: "electron消息通知弹出"
  }
notifyBtn.onclick = ()=>{
    new window.Notification(option.title,option)
  }

3. 主进程

main.js 代码如下（示例）：

// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut

// 声明要打开的窗口
let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences:{
            nodeIntegration:true, //开启node接口
            contextIsolation:false,
        }
    });

    // 打开新窗口 BrosweWindow 初始化
    require('@electron/remote/main').initialize();
    require("@electron/remote/main").enable(mainWindow.webContents);
        
   // 打开调试工具
    mainWindow.webContents.openDevTools();
    mainWindow.loadFile("index.html");
})

app.on('will-quit',()=>{
})

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
});

4. 实现效果

在这里插入图片描述
可以自定义给消息添加图标
如下所示：

梅子酱~

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Electron 底部系统消息通知

系统消息通知Notification 模块使用文章目录系统消息通知一、代码实现1.html页面2. 渲染进程3. 主进程4. 实现效果一、代码实现1.html页面index.html 代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
复制链接

扫一扫