应用常见设置

• 快捷键
• 托盘图标
• 剪切板
• 系统通知

快捷键

在 Electron 中，页面级别的快捷键直接使用 DOM 技术就可以实现。

例如，我们在渲染进程对应的 JS 中书写如下的代码：

// 设置一个页面级别的快捷键
window.onkeydown = function (e) {
  if ((e.ctrlKey || e.metaKey) && e.key === "q") {
    // 用户按的键是 ctrl + q
    // 我们可以执行对应的快捷键操作
    console.log("您按下了 ctrl + q 键");
  }
};

有些时候我们还有注册全局快捷键的需求。所谓全局快捷键，指的是操作系统级别的快捷键，也就是说，即便当前的应用并非处于焦点状态，这些快捷键也能够触发相应的动作。

在 Electron 中想要注册一个全局的快捷键，可以通过 globalShortcut 模块来实现。

例如：

const { globalShortcut, app, dialog } = require("electron");
app.on("ready", () => {
  // 需要注意，在注册全局快捷键的时候，需要在 app 模块的 ready 事件触发之后
  // 使用 globalShortcut.register 方法注册之后会有一个返回值
  // 这个返回值是一个布尔值，如果为 true 则表示注册成功，否则表示注册失败
  const ret = globalShortcut.register("ctrl+e", () => {
    dialog.showMessageBox({
      message: "全局快捷键 ctrl+e 被触发了",
      buttons: ["好的"],
    });
  });

  if (!ret) {
    console.log("注册失败");
  }

  console.log(
    globalShortcut.isRegistered("ctrl+e")
      ? "全局快捷键注册成功"
      : "全局快捷键注册失败"
  );
});

// 当我们注册了全局快捷键之后，当应用程序退出的时候，也需要注销这个快捷键
app.on("will-quit", function () {
  globalShortcut.unregister("ctrl+e");
  globalShortcut.unregisterAll();
});

几个核心的点：

• 需要在应用 ready 之后才能注册全局快捷键
• 使用 globalShortcut.register 来进行注册
• 通过 globalShortcut.isRegistered 可以检查某个全局快捷键是否已经被注册
• 当应用退出的时候，需要注销所注册的全局快捷键，使用 globalShortcut.unregister 进行注销

托盘图标

有些时候，我们需要将应用的图标显示在托盘上面，当应用最小化的时候，能够通过点击图标来让应用显示出来。

例如 Mac 下面：

在 Electron 里面为我们提供了 Tray 这个模块来配置托盘图标。

例如：

function createTray() {
  // 构建托盘图标的路径
  const iconPath = path.join(__dirname, "assets/tray.jpg");
  tray = new Tray(iconPath);

  // 我们的图标需要有一定的功能
  tray.on("click", function () {
    win.isVisible() ? win.hide() : win.show();
  });

  // 还可以设置托盘图标对应的菜单
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "显示/隐藏",
      click: () => {
        win.isVisible() ? win.hide() : win.show();
      },
    },
    {
      label: "退出",
      click: () => {
        app.quit();
      },
    },
  ]);
  tray.setContextMenu(contextMenu);
}

在上面的代码中，我们就创建了一个托盘图标。几个比较核心的点：

• 图片要选择合适，特别是大小，一般在 20x20 左右
• 创建 tray 实例对象，之后托盘图标就有了
• 之后就可以为托盘图标设置对应的功能
  • 点击功能
  • 菜单目录

剪切板

这个在 Electron 里面也是提供了相应的模块，有一个 clipboard 的模块专门用于实现剪切板的相关功能。

大致的使用方式如下：

const { clipboard } = require("electron");
clipboard.writeText("你好"); // 向剪切板写入文本
clipboard.writeHTML("<b>你好HTML</b>"); // 向剪切板写入 HTML

系统通知

这也是一个非常常见的需求，有些时候，我们需要给用户发送系统通知。

在 Electron 中，可以让系统发送相应的应用通知，不过这个和 Electron 没有太大的关系，这是通过 HTML5 里面的 notification API 来实现的。

例如：

const notifyBtn = document.getElementById("notifyBtn");
notifyBtn.addEventListener("click", function () {
  const option = {
    title: "您有一条新的消息，请及时查看",
    body: "这是一条测试消息，技术支持来源于 HTML5 的 notificationAPI",
  };
  const myNotify = new Notification(option.title, option);
  myNotify.onclick = function () {
    console.log("用户点击了通知");
  };
});

核心的点有：

• 使用 HTML5 所提供的 Notification 来创建系统通知
• new Notification 之后能够拿到一个返回值，针对该返回值可以绑定一个点击事件，该点击事件会在用户点击了通知消息后触发