Electron Notification动态消息通知
Notification通知使用
Notification通知的使用方法有多种，在此介绍三种使用方式
文章目录
- Notification通知使用
- 一、Notification是什么？
- 二、使用步骤
- 1.引入Notification模块
- 2. 第一种使用方式
- 3. 第二种使用方式
- 4. 第三种使用方式
- 5. 实现效果
- 三、动态消息通知
一、Notification是什么？
对于渲染进程，Electron 方便地允许开发者使用 HTML5 通知 API 发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。
二、使用步骤
1.引入Notification模块
const { Notification } = require('electron')
2. 第一种使用方式
代码如下（示例）：
const { app, BrowserWindow, Notification } = require('electron')function createWindow () {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')
}let option = {title: "创建通知", // 通知标题body: "创建通知成功", // 内容icon: path.join(__dirname,"./logo.png") // 图标href: 'https://www.cnblogs.com/binglicheng/' // 地址
}; // 创建通知并保存new Notification({title:option.title, body:option.body, icon: option.icon}).show();app.whenReady().then(createWindow).then(showNotification)app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}
})
3. 第二种使用方式
代码如下（示例）：
const NOTIFICATION_TITLE = '增强加密'
const NOTIFICATION_BODY = '开启增强加密成功'
const NOTIFICATION_ICON =path.join(__dirname,"./logo.png");
new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY1, icon: NOTIFICATION_ICON }).show();
4. 第三种使用方式
代码如下（示例）：
new Notification({title:"增强加密",body:"开启加密成功",icon: path.join(__static,"./logo.png")
}).show();
5. 实现效果
三、动态消息通知
以根据复选框的状态不同显示不同的消息为例，分析：
可以配合click点击次数来代替获取复选框的状态来设置消息内容，点击次数为奇数代表复选框未选中，点击次数为偶数表示复选框被选中
代码如下（示例）：
import { app, BrowserWindow, ipcMain, dialog, Tray, Menu, Notification } from 'electron'
import { version } from 'os'
import '../renderer/store'
const path = require('path')/*** Set `__static` path to static files in production* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html*/
if (process.env.NODE_ENV !== 'development') {global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}let mainWindow
let appTray = null; // 在外面创建 tray ，防止被自动删除，导致图标消失
// 设置开发模式
const winURL = process.env.NODE_ENV === 'development'? `http://localhost:9080`: `file://${__dirname}/index.html`function createWindow () {/*** Initial window options*/mainWindow = new BrowserWindow({height: 620,width: 400,useContentSize: true,// frame: false,//添加后自定义标题//自定义边框// movable: true,//可否移动webPreferences:{nodeIntegration:true,contextIsolation: false,webSecurity: false,},})mainWindow.loadURL(winURL)ipcMain.on('add-item',() =>{taryMoudle.addItemWindow();})// 系统托盘//系统托盘右键菜单const taryMoudle = require('../renderer/store/taryMoudle')var trayMenuTemplate = [{label: "显示主窗口", click: function() {mainWindow.show(); } //打开相应页面},{label: "增强加密",type:'checkbox',checked: true,click: function() {//右下角弹出消息弹框 const NOTIFICATION_TITLE = '增强加密'const NOTIFICATION_BODY = '开启增强加密成功'const NOTIFICATION_BODY1 = '关闭增强加密成功' const NOTIFICATION_ICON = path.join(__static,"./zero.ico"); count = count + 1;console.log(count)if (count % 2 == 0) {new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY, icon: NOTIFICATION_ICON }).show();} else {new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY1, icon: NOTIFICATION_ICON }).show();} } },{label: "退出客户端",click: function() {//ipc.send('close-main-window');app.quit();}},];//系统托盘图标目录let iconPath;//根据开发环境与线上环境调节图标调用路径，防止打包后图标不显示if(process.env.NODE_ENV !== 'development'){iconPath = path.join(__static, "./zero.ico");}else{iconPath = path.join(__dirname, "./zero.ico");}let appTray = new Tray(iconPath);console.log(iconPath);//图标的上下文菜单const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);//设置此托盘图标的悬停提示内容appTray.setToolTip("xxxx");//设置此图标的上下文菜单appTray.setContextMenu(contextMenu);// 设置click点击次数计数let count = 0; //单点击 1.主窗口显示隐藏切换 2.清除闪烁// 单击显示主窗口，再单击隐藏主窗口appTray.on("click", function() {if (!!timer) {appTray.setImage(iconPath);//主窗口显示隐藏切换mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();// 关闭托盘显示// appTray.destroy();}});
}app.on('ready', createWindow)app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {if (mainWindow === null) {createWindow()}
})实现效果：
Electron Notification动态消息通知相关推荐
- Electron中的消息通知
Electron中的消息通知是基于H5的Notification来实现的,比较常见的使用场景是用于监听网络变化然后进行消息提示. 1. 消息提示: var option = {title: '温馨提示 ...
- electron，win10，消息通知
electron官网地址 https://www.electronjs.org/docs/tutorial/notifications 按照文档操作,之后,会发现,无法出现通知的情况,无论是win10 ...
- html 消息通知功能,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快 我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
- Android学习—Notification消息通知
最近在项目中需要使用消息通知,自己把它封装成了一个方法,需要的时候方便调用, 下面对Notification类中的一些常量,字段,方法简单介绍一下: 常量: DEFAULT_ALL 使用所有默认 ...
- html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快 我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
- 通知与服务——消息通知——通知推送Notification
手机通知栏存放的是App主动推给用户的提醒消息,每条消息包括消息图标.消息标题.消息内容等,这些消息元素由通知建造器Notification.Builder设定. 常用方法如下: setSmallIc ...
- Android篇 --Notification(消息通知)
Android篇 --Notification(消息通知) 消息通知(Notification)是Android系统中比较有特色的一个功能,当某个应用程序希望用户发出一些提示信息,而该应用又不在前台运 ...
- 如何通过企业微信、飞书、钉钉消息通知接收双因子认证动态密码？
使用宁盾双因子认证H5令牌的用户每次登录时要切回到企业微信.飞书.钉钉工作台中,找到H5令牌小程序,点进去看动态码.记住或复制动态码后再切回登录界面输入验证. 路径合理,但实际使用场景下不够便捷.用户 ...
- android activity 被notification启动,Android通知Notification全面剖析
原标题:Android通知Notification全面剖析 通知 通知是您可以在应用的常规 UI 外部向用户显示的消息.当您告知系统发出通知时,它将先以图标的形式显示在通知区域中.用户可以打开抽屉式通 ...
最新文章
- 2020年，5种将死的编程语言
- wifiphisher 钓鱼工具的使用
- 模型可解释性-树结构可视化
- J2EE Java泛型的好处
- Ehcache配置的overflowToDisk属性
- web 页面传值乱码问题
- 单行、多行文本超出显示省略号
- 微信小程序开发——超链接或按钮点击跳转到其他页面失效
- HTML5 Web 存储（localStorage和sessionStorage）
- 20170706xlVBA城中村改造汇总
- 化工计算机软件基础考试题,2013年化工工程师基础知识网友版真题（下午卷）...
- en55032最新标准下载_施工升降机事故案例ppt（可下载）
- ENVI大气校正后遥感图像颜色变了及编辑头文件
- JQuery插件：JQuery.Slidebox.JS
- 聚合广告SDK文档(Kotlin)
- span之间的空隙怎样解决？
- 电子商务订单处理及发货流程
- 车间和仓库可以一起吗_正确认识生产车间和仓库“五距”
- 基于用户协同过滤算法的电影打分与推荐
- 如何将PDF转为Word使用？安利3个可以转换的软件