客户端开发（Electron）发送通知

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

本篇说明：

在windows，macOS，linux操作系统均为开发者提供了向用户发送通知的API，也是客户端开发标配的功能之一，在Electron中主进程和渲染进程显示的方式不太一样，我们用实际的案例来演示一下。

环境说明：

设备环境Windows；
代码环境：快速入门

在渲染进程中显示通知：

准备index.html内容，提供两个操作按钮和加载渲染脚本。

代码语言：javascript复制

<body>
    <button id="clickme">渲染进程发送通知</button>
    <button id="clickme2">主进程发送通知</button>
    <script src="renderer.js"></script>
</body>
复制代码

渲染进程中绑定第一个button用来在渲染进程发送通知
主要用到Notification模块，并且点击后可以获的反馈

代码语言：javascript复制

document.getElementById("clickme").addEventListener("click", () => {
  new Notification("今日更文：客户端开发（Electron）主题切换", {
    body: "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。",
  }).onclick = () => {
    console.log("[ 通知被点击了 ]");
  };
});
复制代码

在主进程中发送通知：

主进程发送通知我们还是要在渲染脚本来触发

代码语言：javascript复制

document.getElementById("clickme2").addEventListener("click", () => {
  window.send.notice(
    "客户端开发（Electron）URL远程启动",
    "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。"
  );
});
复制代码

可以看到有一个send.notice函数（桥接），我们还是在preload脚本中定义：

代码语言：javascript复制

const { contextBridge } = require("electron");
const { ipcRenderer } = require("electron/renderer");

contextBridge.exposeInMainWorld("send", {
  notice: (title, content) => ipcRenderer.send("send:notice", title, content),
});
复制代码

在主进程实现监听并发送通知：

代码语言：javascript复制

ipcMain.on("send:notice", (event, ...args) => {
  new Notification({
    title: args[0],
    body: args[1],
  }).show();
});
复制代码

总结：

本篇涉及到两个知识点：

渲染进程=>主进程通信
通知发送模块使用
桥接函数定义并传参

渲染 electron javascript macos windows

0 人点赞