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

Electron学习笔记（五）

news 2026/2/10 20:56:27

文章目录

      • 相关笔记
      • 笔记说明
    • 七、系统
      • 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

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24