当前位置： 首页 > news >正文

Electron学习笔记（五）

news 2026/5/18 18:05:11

文章目录

      • 相关笔记
      • 笔记说明
    • 七、系统
      • 1、系统对话框
      • 2、自定义窗口菜单
      • 3、系统右键菜单
      • 4、快捷键
        • (1)、监听网页按键事件 （窗口需处于激活状态）
        • (2)、监听全局按键事件 （窗口无需处于激活状态）
        • (3)、补充：自定义窗口菜单快捷键设置

相关笔记

  • Electron学习笔记（一）
  • Electron学习笔记（二）
  • Electron学习笔记（三）
  • Electron学习笔记（四）
  • Electron学习笔记（五）
  • Electron学习笔记（六）
  • 使用 electron-vite-vue 构建 electron + vue3 项目并打包

笔记说明

文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍，针对原理部分并无相关记录。笔记记录于 2023年9月。

七、系统

在搭建完基本的环境后

安装 remote 模块：

yarn add @electron/remote

1、系统对话框

修改 index.js 文件内容如下：

const {app,BrowserWindow} = require('electron');
let win = null;app.on('ready', function() {win = new BrowserWindow({// 为页面集成Node.js环境webPreferences: {nodeIntegration: true,contextIsolation: false,enableRemoteModule: true,}});require("@electron/remote/main").initialize();require("@electron/remote/main").enable(win.webContents);// 访问资源文件win.loadFile('index.html');// 程序启动后开启 开发者工具win.webContents.openDevTools();win.on('close',function() {win = null;})
});app.on('window-all-closed',function() {app.quit();
})

修改 index.html 文件内容如下：

<body><button id="open_dialog_btn">选择文件</button><script>const { dialog, app } = require('@electron/remote');function openDialog() {dialog.showOpenDialog({title: "选择文件",buttonLabel: "打开文件",defaultPath: app.getPath('desktop'),properties: ['multiSelections'],filters: [{ name: "图片", extensions: ["jpg", "png", "gif"] },{ name: "视频", extensions: ["mkv", "avi", "mp4"] }]}).then((result) => {console.log(result);}).catch((err) => {console.log(err);});}// 点击按钮 弹出文件选择对话框let open_dialog_btn = document.querySelector('#open_dialog_btn');open_dialog_btn.addEventListener('click',function() {openDialog();})</script>
</body>

配置对象参数说明：

title：对话框标题
buttonLabel：确认按钮显示的文本
defaultPath：对话框打开后默认显示的路径
properties：设置 multiSelections，表示允许多选
filters：允许打开的文件类型

点击按钮后，效果如下：

效果展示

canceled：如若关闭了文件选择对话框，则为 true
filePaths：选择后的文件的路径

效果展示

更多对话框详情参见(Electron官网)：https://www.electronjs.org/zh/docs/latest/api/dialog

2、自定义窗口菜单

新建一个文件 MyMenu.js 用于保存自定义菜单规则：

let { Menu } = require('electron');let templateArr = [{label: "菜单1",submenu: [{label: "菜单1-1",type: 'checkbox'},// 添加分隔条{ type: 'separator' },{label: "菜单1-2",tyep: 'radio'}]
}, {label: "菜单2",click() {console.log('hello menu')},
},
{label: "菜单3",// 为菜单设置 role 属性// role 属性可选值：undo、redo、cut、copy、delete、selectAll、paste、minimize、// close、quit等，一个菜单项只能设置一个role值。role: 'reload'
},
{ label: "菜单4" }
];let menu = Menu.buildFromTemplate(templateArr);module.exports = menu;

在 index.js 文件中进行设置：

const {app,BrowserWindow} = require('electron');const {Menu} = require('electron');
// 导入自定义菜单规则
const menu = require('./MyMenu');
// 应用自定义菜单
Menu.setApplicationMenu(menu);let win = null;app.on('ready', function() {win = new BrowserWindow({// 为页面集成Node.js环境webPreferences: {nodeIntegration: true,contextIsolation: false,},// 隐藏系统菜单，但是按 Alt 键依然可以显示// autoHideMenuBar: true});// 访问资源文件win.loadFile('index.html');// 程序启动后开启 开发者工具win.webContents.openDevTools();win.on('close',function() {win = null;})
});app.on('window-all-closed',function() {app.quit();
})

效果展示：

效果展示

3、系统右键菜单

右键菜单的内容我们沿用上面窗口菜单的内容，只需修改一下导入的模块即可 MyMenu.js 文件内容如下：

// 修改导入的模块 因为现在需要在渲染进程中使用
let { Menu } = require('@electron/remote');let templateArr = [// 右键菜单内容// ...
];let menu = Menu.buildFromTemplate(templateArr);module.exports = menu;

index.html 文件内容如下：

<body><script>const menu = require('./MyMenu');window.oncontextmenu = function(e) {e.preventDefault();menu.popup();}</script>
</body>

index.js 文件内容如下：

const {app,BrowserWindow} = require('electron');let win = null;app.on('ready', function() {win = new BrowserWindow({// 为页面集成Node.js环境webPreferences: {nodeIntegration: true,contextIsolation: false,enableRemoteModule: true,},// autoHideMenuBar: true});require("@electron/remote/main").initialize();require("@electron/remote/main").enable(win.webContents);// 访问资源文件win.loadFile('index.html');// 程序启动后开启 开发者工具win.webContents.openDevTools();win.on('close',function() {win = null;})
});app.on('window-all-closed',function() {app.quit();
})

运行结果：

运行结果

4、快捷键

(1)、监听网页按键事件 （窗口需处于激活状态）

index.html 文件内容如下：

方法一：

<body><script>window.onkeydown = function(e) {// 监听 ctrl+s 组合键if(e.ctrlKey && e.keyCode == 83) {console.log('保存文件');}}</script>
</body>

方法二：使用 mousetrap 作为按键事件监听库来监听网页按键事件

安装：yarn add mousetrap

<body><script>let Mousetrap = require('mousetrap');Mousetrap.bind('ctrl+s',function() {console.log('--保存文件--');});Mousetrap.bind('ctrl+a',function() {console.log('--全选--');})</script>
</body>

mousetrap 更多详情参见：

  • https://github.com/ccampbell/mousetrap
  • https://www.npmjs.com/package/mousetrap?activeTab=readme
(2)、监听全局按键事件 （窗口无需处于激活状态）

更新 index.js 文件如下：

const { globalShortcut } = require('electron');app.on('ready', function() {win = new BrowserWindow({// ...});globalShortcut.register('CommandOrControl+K', () => {console.log('abc');})// ...
});
(3)、补充：自定义窗口菜单快捷键设置

在自定义菜单文件 MyMenu.js 中利用 accelerator 属性设置快捷键：

{label: 'Dev Tools',role: 'toggleDevTools',// 设置快捷键 accelerator: 'Alt+R'
}

相关文章：

Electron学习笔记（五）

文章目录 相关笔记笔记说明 七、系统1、系统对话框2、自定义窗口菜单3、系统右键菜单4、快捷键(1)、监听网页按键事件 &#xff08;窗口需处于激活状态&#xff09;(2)、监听全局按键事件 &#xff08;窗口无需处于激活状态&#xff09;(3)、补充&#xff1a;自定义窗口菜单快捷…...

编程日记 2024/5/16 9:01:05

【jest 调试 - vscode debug】

jest 测试typescript&#xff0c;如果想对测试文件本身断点调试。 安装jest相关依赖 # jest本体 npm install --save-dev jest # jest的类型声明 npm install --save-dev types/jest # typescript中使用 npm install --save-dev ts-jestlaunch.json 配置参考 {"type&qu…...

编程日记 2024/5/16 9:00:04

华为OD机试【分奖金】(java)(100分)

1、题目描述 公司老板做了一笔大生意&#xff0c;想要给每位员工分配一些奖金&#xff0c;想通过游戏的方式来决定每个人分多少钱。按照员工的工号顺序&#xff0c;每个人随机抽取一个数字。按照工号的顺序往后排列&#xff0c;遇到第一个数字比自己数字大的&#xff0c;那么&…...

编程日记 2024/5/16 8:59:02

27- ESP32-S3 USB虚拟串口（USB-OTG 外设介绍）

ESP32-S3 USB虚拟串口详解 USB-OTG 外设介绍 USB-OTG&#xff1a; USB-OTG是一种USB规范&#xff0c;允许嵌入式系统&#xff08;如手机、平板电脑、单片机系统等&#xff09;在没有主机&#xff08;如个人电脑&#xff09;的情况下直接相互通信&#xff0c;同时也能够作为传…...

编程日记 2024/5/16 8:57:00

PostgreSQL查看sql的执行计划

PostgreSQL查看sql的执行计划 基础信息 OS版本&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a;16.2 pg软件目录&#xff1a;/home/pg16/soft pg数据目录&#xff1a;/home/pg16/data 端口&#xff1a;5777在PostgreSQL中&#xff0c;查看…...

编程日记 2024/5/16 8:54:58

macOS Ventura 13如何设置定时重启(命令行)

文章目录 macOS Ventura 13如何设置定时重启(命令行)前言具体设置步骤及命令解释其他 macOS Ventura 13如何设置定时重启(命令行) 前言 由于升级 macOS 13 Ventura 之后&#xff0c;之前在节能里面通过鼠标点击设置开机关机的方法不能用了&#xff0c;现在只能用命令设置开机…...

编程日记 2024/5/16 8:52:56

【sass简介以及如何安装使用】

Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;是一个层叠样式表&#xff08;CSS&#xff09;预处理器&#xff0c;它扩展了CSS的语法&#xff0c;并增加了许多有用的功能&#xff0c;如变量、嵌套、混合&#xff08;Mixin&#xff09;、继承以及模块化的结构…...

编程日记 2024/5/16 8:50:53

Git版本控制工具的原理及应用详解（四）

本系列文章简介&#xff1a; 随着软件开发的复杂性不断增加&#xff0c;版本控制成为了开发团队中不可或缺的工具之一。在过去的几十年里&#xff0c;版本控制工具经历了各种发展和演变&#xff0c;其中Git无疑是目前最受欢迎和广泛应用的版本控制工具之一。 Git的出现为开发者…...

编程日记 2024/5/16 8:48:52

AI图书推荐：ChatGPT全面指南—用AI帮你更健康、更富有、更智慧

你是否在努力改善你的健康&#xff1f; 你是否长期遭受财务困难&#xff1f; 你想丰富你的思想、身体和灵魂吗&#xff1f; 如果是这样&#xff0c;那么这本书就是为你准备的。 《ChatGPT全面指南—用AI帮你更健康、更富有、更智慧》&#xff08;CHATGPT Chronicles AQuick…...

编程日记 2024/5/16 8:47:50

C++ | Leetcode C++题解之第92题反转链表II

题目&#xff1a; 题解&#xff1a; class Solution { public:ListNode *reverseBetween(ListNode *head, int left, int right) {// 设置 dummyNode 是这一类问题的一般做法ListNode *dummyNode new ListNode(-1);dummyNode->next head;ListNode *pre dummyNode;for (i…...

编程日记 2024/5/16 8:46:49

【管理咨询宝藏99】离散制造智能工厂战略规划方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏99】离散制造智能工厂战略规划方案 【格式】PDF版本 【关键词】智能制造、先进制造业转型、数字化转型 【核心观点】 - 推进EHS、品质一致性、生…...

编程日记 2024/5/16 8:44:47

java8 Stream使用中的一些实践

文章目录 使用Stream将List转换为Map时key冲突问题使用Stream时得到List的size为不为0&#xff0c;元素Object为null问题 使用Stream将List转换为Map时key冲突问题 如下&#xff1a; 把userList转换为userMap id为key user 为value 由于user2和user3的id相同&#xff0c;所以会…...

编程日记 2024/5/16 8:41:44

入门篇：Kafka基础知识·

目录 一、Kafka简介 二、Kafka核心组件 三、Kafka安装与配置 1.下载与解压 2.配置环境变量 3.配置server.properties 4.启动Kafka服务 四、Kafka基本操作 1.创建Topic 2.查看Topic列表 3.发送消息 4.接收消息 五、Kafka进阶使用 1.消息持久化与存储 2.消息顺序与…...

编程日记 2024/5/16 8:39:41

SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析

原文链接&#xff1a;SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247604401&idx4&snd2d39846dce07bee765c820de1cf92f3&chksmfa821956cdf5904…...

编程日记 2024/5/16 8:38:40

每日一题——力扣206. 反转链表（举一反三、思想解读）

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三题目链接 目录 菜鸡写法​编辑 代码点评 代码分析 时间复杂度 空间复杂度 专业点评 另一种方法​编辑 代码点评 代码逻辑 时间复杂度 空间…...

编程日记 2024/5/16 8:36:37

【qt】纯代码界面设计

界面设计目录 一.界面设计的三种方式1.使用界面设计器2.纯代码界面设计3.混合界面设计 二.纯代码进行界面设计1.代码界面设计的总思路2.创建项目3.设计草图4.添加组件指针5.初始化组件指针6.添加组件到窗口①水平布局②垂直布局③细节点 7.定义槽函数8.初始化信号槽9.实现槽函数…...

编程日记 2024/5/16 8:33:33

【深度学习】SDXL中的Offset Noise，Diffusion with Offset Noise，带偏移噪声的扩散

https://www.crosslabs.org//blog/diffusion-with-offset-noise 带有偏移噪声的扩散 针对修改后的噪声进行微调&#xff0c;使得稳定扩散能够轻松生成非常暗或非常亮的图像。 作者&#xff1a;尼古拉斯古藤伯格 | 2023年1月30日 马里奥兄弟使用稳定扩散挖掘隧道。左图显示了未…...

编程日记 2024/5/16 8:32:32

开发属于自己的Spring Boot Starter-18

为什么要开发专用的Spring Boot Starter Spring在通常使用时&#xff0c;一般是通过pom.xml文件中引入相关的jar包&#xff0c;然后再通过application.yml文件配置初始化bean的配置&#xff0c;但随着项目越来越复杂或是项目组中的应用数量越来越多&#xff0c;可能会带来几个…...

编程日记 2024/5/16 8:30:29

C中Mysql的基本api接口

一、初始化参数返回值 二、链接服务器三、执行SQL语句注意事项 四、获取结果集4.1mysql_affected_rows和mysql_num_rows4.2mysql_store_result与mysql_free_result注意事项注意事项整体的工作流程 4.3mysql_use_result&#xff08;&#xff09;4.4mysql_field_count&#xff08…...

编程日记 2024/5/16 8:29:28

grafana10.x报错 Failed to upgrade legacy queries Datasource x was not found

问题 grafana 从6.x升级到10.x后&#xff0c;导入json文件后报错&#xff0c;数据源x查询不到&#xff0c;grafana不显示数据&#xff1b; Templating Failed to upgrade legacy queries Datasource x was not found解决方法 可能grafana升级后数据源找不到&#xff0c;在面板…...

编程日记 2024/5/16 8:27:25

5种高效集成方案：Bilibili视频解析API的终极实用指南

5种高效集成方案&#xff1a;Bilibili视频解析API的终极实用指南 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse bilibili-parse是一款基于PHP实现的B站视频解析API工具&#xff0c;通过简洁优雅的技…...

编程新知 2026/5/18 17:58:38

共享茶室智能系统与运营全解析：从空间设计到自动化管理

1. 项目概述&#xff1a;为什么“共享茶室”正在重塑传统茶饮消费如果你最近留意过城市里的新业态&#xff0c;可能会发现一种名为“共享茶室”的空间正在悄然兴起。它不像传统的茶馆那样需要高昂的消费和复杂的社交礼仪&#xff0c;也不像奶茶店那样主打快节奏的“即买即走”。…...

编程新知 2026/5/18 16:29:06

企业如何借助Taotoken实现多模型API的容灾与智能路由保障业务连续性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业如何借助Taotoken实现多模型API的容灾与智能路由保障业务连续性 当企业的核心业务系统深度集成大模型能力时&#xff0c;API服…...

编程新知 2026/5/18 16:25:03

联想拯救者工具箱：开源替代方案实现笔记本性能优化与硬件控制

联想拯救者工具箱&#xff1a;开源替代方案实现笔记本性能优化与硬件控制 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionToolkit 联…...

编程新知 2026/5/18 15:48:33

英雄联盟内存换肤神器：R3nzSkin全攻略

英雄联盟内存换肤神器&#xff1a;R3nzSkin全攻略 【免费下载链接】R3nzSkin Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3n/R3nzSkin 想要在英雄联盟中体验所有皮肤却担心账号安全&#xff1f;R3nzSkin为你提供了一种安全可…...

编程新知 2026/5/18 14:42:47

终极风扇控制解决方案：3步实现Windows系统智能温控管理

终极风扇控制解决方案&#xff1a;3步实现Windows系统智能温控管理 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/f…...

编程新知 2026/5/18 13:36:52

Obsidian Image Toolkit：终极图像管理解决方案

Obsidian Image Toolkit&#xff1a;终极图像管理解决方案 【免费下载链接】obsidian-image-toolkit An Obsidian plugin for viewing an image. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-image-toolkit Obsidian Image Toolkit 是一款专为 Obsidian 用户…...

编程新知 2026/5/18 12:28:47

企业内网应用安全调用外部大模型的Taotoken接入方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业内网应用安全调用外部大模型的Taotoken接入方案 应用场景类&#xff0c;探讨具有安全合规要求的企业如何安全地引入AI能力&…...

编程新知 2026/5/18 12:16:35

基于WPF开发桌面AI助手：架构设计与实现详解

1. 项目概述&#xff1a;一个开源的WPF桌面AI助手 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“MayDay-wpf/AIBotPublic”。光看名字&#xff0c;可能有点摸不着头脑&#xff0c;但点进去研究一下&#xff0c;你会发现这其实是一个用WPF&#xff08;Windows Present…...

编程新知 2026/5/18 17:45:16

CentOS8实战：ZeroTier构建安全异地虚拟局域网

1. 为什么选择ZeroTier替代传统内网穿透方案 最近在帮朋友搭建远程办公环境时&#xff0c;遇到了一个典型问题&#xff1a;分布在三个不同物理位置的服务器需要像在同一个办公室内网那样互相访问。最初考虑使用FRP方案&#xff0c;但实测下来发现几个痛点&#xff1a;首先是带宽…...

编程新知 2026/5/18 11:04:55