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(); }); 复制代码
总结：
本篇涉及到两个知识点：
- 渲染进程=>主进程通信
- 通知发送模块使用
- 桥接函数定义并传参
