客户端开发（Electron）发送通知
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
本篇说明：
在windows，macOS，linux操作系统均为开发者提供了向用户发送通知的API，也是客户端开发标配的功能之一，在Electron中主进程和渲染进程显示的方式不太一样，我们用实际的案例来演示一下。
环境说明：
- 设备环境Windows；
- 代码环境：快速入门
在渲染进程中显示通知：
- 准备
index.html内容，提供两个操作按钮和加载渲染脚本。
<body>
<button id="clickme">渲染进程发送通知</button>
<button id="clickme2">主进程发送通知</button>
<script src="renderer.js"></script>
</body>
复制代码- 渲染进程中绑定第一个button用来在渲染进程发送通知
- 主要用到Notification模块，并且点击后可以获的反馈
document.getElementById("clickme").addEventListener("click", () => {
new Notification("今日更文：客户端开发（Electron）主题切换", {
body: "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。",
}).onclick = () => {
console.log("[ 通知被点击了 ]");
};
});
复制代码在主进程中发送通知：
- 主进程发送通知我们还是要在渲染脚本来触发
document.getElementById("clickme2").addEventListener("click", () => {
window.send.notice(
"客户端开发（Electron）URL远程启动",
"「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。"
);
});
复制代码- 可以看到有一个
send.notice函数（桥接），我们还是在preload脚本中定义：
const { contextBridge } = require("electron");
const { ipcRenderer } = require("electron/renderer");
contextBridge.exposeInMainWorld("send", {
notice: (title, content) => ipcRenderer.send("send:notice", title, content),
});
复制代码- 在主进程实现监听并发送通知：
ipcMain.on("send:notice", (event, ...args) => {
new Notification({
title: args[0],
body: args[1],
}).show();
});
复制代码总结：
本篇涉及到两个知识点：
- 渲染进程=>主进程通信
- 通知发送模块使用
- 桥接函数定义并传参
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
