Electron限制只启动一个实例、系统托盘实现

最新推荐文章于 2024-09-02 12:48:08 发布
最新推荐文章于 2024-09-02 12:48:08 发布
阅读量2k 收藏 27
点赞数 24
分类专栏： Electron桌面应用 文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136851181
版权
本文介绍了如何在Electron应用中限制只能启动一个实例，并在关闭窗口时将其隐藏到系统托盘，以及处理托盘图标路径问题和点击图标唤起/隐藏窗口的解决方案。
摘要由CSDN通过智能技术生成

文章目录

需求说明

在使用electron打包的应用程序的时候，点击应用图标会打开多个实例，想要限制只启动一个应实例，并且点击应用的叉号，不关闭应用而是隐藏到系统托盘，右键托盘图标点击退出，才真正退出应用。

一、只启动一个实例实现

在主进程background.js中添加代码，在Electron的主进程中，可以使用app.requestSingleInstanceLock()方法来请求单一实例锁。如果该方法返回false，则表示已经有一个实例在运行，可以通过app.quit()方法退出当前实例。

1.1. 核心代码

/**
 *  请求单一实例锁，
 *  如果该方法返回false，
 *  则表示已经有一个实例在运行，
 *  可以通过app.quit()方法退出当前实例。
 */
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  // 已经有一个实例在运行，退出当前实例
  app.quit();
} else {
  // 监听第二个实例被运行时
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    // 当有第二个实例被运行时，激活之前的实例并将焦点置于其窗口
    if (win) {
      if (win.isMinimized()) win.restore();
      win.focus();
    }
  });
}

1.2. 完整代码

"use strict";

import { app, protocol, BrowserWindow } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
const isDevelopment = process.env.NODE_ENV !== "production";
let win = null;
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

/**
 *  请求单一实例锁，
 *  如果该方法返回false，
 *  则表示已经有一个实例在运行，
 *  可以通过app.quit()方法退出当前实例。
 */
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  // 已经有一个实例在运行，退出当前实例
  app.quit();
} else {
  // 监听第二个实例被运行时
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    // 当有第二个实例被运行时，激活之前的实例并将焦点置于其窗口
    if (win) {
      if (win.isMinimized()) win.restore();
      win.focus();
    }
  });
  app.on("ready", async () => {
    createWindow();
  });
  // Quit when all windows are closed.
  app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
      app.quit();
    }
  });

  app.on("activate", () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });

}

二、系统托盘实现

2.1. 打包后托盘图标路径找不到的问题

// 打包后托盘图标路径找不到
tray = new Tray("./assets/icon/tray.png");

2.2. 解决办法

将tray.png图片配置为额外资源

相关文章： electron的extraFiles和extraResources的配置和使用

  • 根目录新建lib文件夹，放入tray.png图片
    在这里插入图片描述

  • vue.config.js中配置extraFiles

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // 额外文件配置
        extraFiles: ["./lib"],
      },
    },
  },
});

打包后lib文件夹会被复制到打包后应用程序的根目录下(Windows/Linux)，或者Content目录下(MacOS)

  • 如图（我是Windows系统）
    在这里插入图片描述

  • 获取图标文件路径方法如下

path.join(process.cwd(), "/lib/tray.png")

2.3. 系统托盘实现核心代码

app.on("ready", async () => {
  createWindow();
  tray = new Tray(path.join(process.cwd(), "/lib/tray.png"));
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        win.destroy();
      },
    }, //我们需要在这里有一个真正的退出（这里直接强制退出）
  ]);
  tray.setToolTip("This is my application.");
  tray.setContextMenu(contextMenu);
  tray.on("click", () => {
    //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能
    win.isVisible() ? win.hide() : win.show();
    win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
  });
  // 点击关闭按钮
  win.on("close", (event) => {
    // 隐藏页面
    win.hide();
    // 将应用从任务栏移出
    win.setSkipTaskbar(true);
    event.preventDefault();
  });
});

2.4. 解决添加系统托盘后，点击应用图标无法唤起窗口的问题

if (!gotTheLock) {
  // 已经有一个实例在运行，退出当前实例
  app.quit();
} else {
  // 创建窗口
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    // 当有第二个实例被运行时，激活之前的实例并将焦点置于其窗口
    if (win) {
      if (win.isMinimized()) win.restore();
      win.focus();
      // ************解决添加系统托盘后，点击应用图标无法唤起窗口的问题
      if (!win.isVisible()) {
        win.show();
        win.setSkipTaskbar(true);
      }
    }
  });
}

三、全部完整代码

"use strict";

import { app, protocol, BrowserWindow } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
const { Menu, Tray } = require("electron");
const path = require("path");
// 定义托盘实例
let tray = null;
// 定义窗口实例
let win = null;
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

// 创建窗口方法
async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

/**
 *  单应用启动实现
 *  请求单一实例锁，
 *  如果该方法返回`false`，
 *  则表示已经有一个实例在运行，
 *  可以通过`app.quit()`方法退出当前实例。
 */
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  // 已经有一个实例在运行，退出当前实例
  app.quit();
} else {
  // 监听第二个实例被运行时
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    // 当有第二个实例被运行时，激活之前的实例并将焦点置于其窗口
    if (win) {
      if (win.isMinimized()) win.restore();
      win.focus();
      // 解决添加系统托盘后，点击应用图标无法唤起窗口的问题
      if (!win.isVisible()) {
        win.show();
        win.setSkipTaskbar(true);
      }
    }
  });
  app.on("ready", async () => {
    createWindow();
    tray = new Tray(path.join(process.cwd(), "/lib/tray.png"));
    const contextMenu = Menu.buildFromTemplate([
      {
        label: "退出",
        click: () => {
          win.destroy();
        },
      }, //我们需要在这里有一个真正的退出（这里直接强制退出）
    ]);
    tray.setToolTip("This is my application.");
    tray.setContextMenu(contextMenu);
    tray.on("click", () => {
      //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能
      win.isVisible() ? win.hide() : win.show();
      win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
    });
    // 点击关闭按钮
    win.on("close", (event) => {
      // 隐藏页面
      win.hide();
      // 将应用从任务栏移出
      win.setSkipTaskbar(true);
      event.preventDefault();
    });
  });
  // Quit when all windows are closed.
  app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
      app.quit();
    }
  });

  app.on("activate", () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
}
扶苏1002
关注
专栏目录
Electron中单例模式运行app的相关代码
白起的博客
02-11 1791
参考官方文档https://www.electronjs.org/docs/api/app?#apprequestsingleinstancelock 其中例举了代码如下: const { app } = require('electron') let myWindow = null const gotTheLock = app.requestSingleInstanceLock() if...
Electron 自定义托盘实战——桌面计算器
小王的技术库
03-16 1316
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
【ELECTRON】应用多开，限制只启动一个应用，防止多个实例
weixin_44450506的博客
12-31 6785
通过app.requestSingleInstanceLock来控制应用的多开，返回值为boolean。此方法的返回值表示你的应用程序实例是否成功取得了锁。如果它取得锁失败，你可以假设另一个应用实例已经取得了锁并且仍旧在运行，并立即退出。
electron打包桌面端（多端）
最新发布
z10026393的博客
09-02 526
的dependencies配置里，要手动放到devDependencies配置里，重新npm install。与src同级electron-builder.json。与src同级：electron文件->main.js。总结：以上仅个人整理。
解决electron限制只能启动一个应用，不能重复启动问题
陆之沂的博客
04-15 1349
用于确保当前应用以单实例运行。
electron点击桌面图标只打开一个应用
weixin_41521961的博客
04-30 463
【代码】electron点击桌面图标只打开一个应用。
electron单实例
溟镜凪水的博客
02-08 810
这里的单实例不是指只有一个窗口，而是只运行一个主进程 win端 在win端，双击应用图标即可开启应用，但是这种打开方式每次都会新建一个实力，即完整跑一次入口文件的代码，对于某些业务逻辑，多实例可能会对某些业务逻辑或使用模块造成bug，例如electron-localstorage模块，每个实例都会分别使用各自实例化出来的存储对象。在win端控制单一实例可以使用如下代码： if (app.req...
electron 单个实例控制以及日志输出
weixin_43777074的博客
07-05 1260
判断当前程序的实例是否为当前取得锁， 或者说， 当前实例是否为单一的固定实例， 如果当前实例没有取到锁， 返回 false,说明当前实例应该被关闭。这是在网上能查出来的答案，这么写也能满足基本的功能，但是有缺陷，必须我将程序设置到了后台隐藏起来，通过。在使用electron打包的应用程序的时候，点击应用图标会打开多个实例，要想控制单个实例，需要通过。能够将程序唤醒后的页面没办法输入和点击，会出现一个卡死的状态？关闭程序的时候，会造成页面闪一下（就是程序可能 已经运行起来，突然一下关闭的）
electron封装html开发实例
02-26
3. **系统托盘图标**：在 Electron 应用中，可以通过`tray`模块创建系统托盘图标。这使得应用可以在任务栏或通知区域中显示，即使主窗口被最小化或关闭，用户仍能通过托盘图标访问应用。 4. **图标闪烁提醒**：当有...
使用Electron实现跨平台的系统托盘应用
# 1. 简介 ## 1.1 什么是Electron？ Electron是一个开源的框架，用于使用Web技术构建跨平台的桌面应用程序。... Electron基于Chromium和Node.js，提供了一...Electron具有以下几个优点，使得它成为实现系统托盘应用的理
react + electron 最小化到系统托盘 功能实现
05-24
实现 React + Electron 应用最小化到系统托盘需要以下几个步骤： 1. 引入 electron 模块 在 React 组件中引入 electron 模块，以便在渲染进程中调用 electron 的 API。 ```javascript const electron = window....
electron开发完整案例
11-15
electron开发完整案例 源码在 resources下的app中 详细使用electron的各种技术
flowerpasswordelectron是一个使用Electron构建的现代花密实现
08-08
【标题】：“flowerpasswordelectron是一个使用Electron构建的现代花密实现”指的是一个基于Electron框架的项目，该项目致力于实现一个现代化的密码管理工具，名为“花密”。花密，可能是对加密和安全存储密码的一种...
electron实现单个实例应用程序
程序员Link
08-14 6540
一 方案 在electron的官方Docs中的app模块中，app.makeSingleInstance可以实现单实例。 函数原型： app.makeSingleInstance(callback) callback Function // 第二个实例启动时，第一个实例会调用callback argv String[] - 第二个实例的命令行参数数组 workingDirector...
electron限制只启动一个应用
ASP.NET
08-28 1547
electron限制只启动一个应用 // ========================================================== // 限制只可以打开一个应用,2.x的文档 // const isSecondInstance = app.makeSingleInstance((commandLine, workingDirectory) => { // // Someone tried to run a second instance, we should foc
electron vue 运行单个实例
小蔷强大的博客
02-18 437
网上很多资料针对的是老版本或者太啰嗦，只需要在头部加入以下代码即可 const appLock = app.requestSingleInstanceLock() if (!appLock) { app.quit() } 以下是相关api的介绍 // 请求单一实例锁 app.requestSingleInstanceLock() // 此方法返回你的应用实例当前是否持有单例锁 app.hasSingleInstanceLock() // 释放所有由 requestSingleInstanceLo
限制electron应用只能启动一次
陌子曦的专栏
07-15 1685
防止electron应用多次启动
electron 创建单例应用
HRM2454的博客
08-25 1519
本文是为了解决多次双击应用图标时创建多个应用实例的问题 达到的效果：每次双击应用或打开应用时，不会创建多个实例，而是激活已经打开的主窗体。 实际上这种方案并不是只创建一个实例，而是在窗体打开时判断如果已经存在实例，则激活已经打开的示例并退出当前打开的示例，效果上就是只有一个实例 上代码 // 实现单例，在启动第二个实例后，激活主窗口，然后退出第二个实例 const shouldQuit = app.makeSingleInstance(() => { if (mainWindow)
使用QtSingleApplication，实现应用只启动一个实例
小白菜
11-03 4597
站在巨人的肩上： 　　　　　http://blog.csdn.net/gaowenboms/article/details/5850602 　　　　　http://www.cppblog.com/biao/archive/2011/10/11/158014.html 　　　　　http://blog.csdn.net/tingsking18/article/details/5610123
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值