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

Electron学习笔记（五）

news 2026/4/3 10:58:29

文章目录

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

CSS 网格容器：全面解析与最佳实践

CSS 网格容器：全面解析与最佳实践 引言 CSS 网格布局（CSS Grid Layout）是 CSS3 中的一项重要特性，它允许开发者以更加灵活和高效的方式对页面布局进行设计。相较于传统的布局方式，CSS 网格布局提供了更为丰富的布局选项和更好的兼容性。本文将全面解析 CSS 网格容器，并…...

编程新知 2026/4/3 9:34:46

Windows Defender Remover终极指南：深度解析系统安全组件移除技术

Windows Defender Remover终极指南&#xff1a;深度解析系统安全组件移除技术 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/4/3 9:14:04

JetBrains IDE试用期重置终极指南：3种简单方法快速延长30天免费使用

JetBrains IDE试用期重置终极指南&#xff1a;3种简单方法快速延长30天免费使用 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一款专门…...

编程新知 2026/4/3 9:10:02

网站纠错页面对 SEO 有什么作用_网站图片和视频优化对 SEO 有什么技巧

网站纠错页面对 SEO 有什么作用 在网站管理和搜索引擎优化&#xff08;SEO&#xff09;方面&#xff0c;纠错页面的作用常常被忽视。网站纠错页面实际上对 SEO 有着重要的影响。当用户访问一个网站时&#xff0c;如果遇到 404 错误&#xff08;页面未找到&#xff09;或其他错…...

编程新知 2026/4/3 6:51:55

Phi-4-mini-reasoning镜像免配置：预置Prometheus监控指标暴露配置

Phi-4-mini-reasoning镜像免配置&#xff1a;预置Prometheus监控指标暴露配置 1. 模型简介与部署概述 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员&#xff0c;它特别针对数学推…...

编程新知 2026/4/3 5:44:50

基于Quansar的双自由度直升机离散时间控制器的设计与仿真分析

基于Quansar的双自由度直升机离散时间控制器 简介&#xff1a;基于Quansar的双自由度直升机&#xff0c;它有两个直流电机驱动器&#xff0c;俯仰角0和偏航角中 离散时间控制器是为这两个螺旋桨使用根轨迹法设计的 分别使用Matlab对所设计的两个控制器进行仿真&#xff0c;分析…...

编程新知 2026/4/3 2:58:23

成为数据科学家之路，第一部分：数学

原文&#xff1a;towardsdatascience.com/roadmap-to-becoming-a-data-scientist-part-1-maths-2dc9beb69b27 https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/492ae0fb35397ff6690bc9518f937530.png 简介 数据科学无疑是当今最迷人的领域…...

编程新知 2026/4/3 2:56:22

Axios 近期安全版本

在执行 npm i 的时候最好执行指定版本&#xff1a;影响版本axios (npm) 0.30.4axios (npm) 1.14.1plain-crypto-js (npm) 4.2.1安全版本axios (npm) < 0.30.3axios (npm) < 1.14.0axios (npm) > 0.30.4axios (npm) > 1.14.1plain-crypto-js (npm) 恶意包已被 np…...

编程新知 2026/4/3 2:13:41

10分钟零成本搭建KIMI AI免费API：个人智能助手完整指南

10分钟零成本搭建KIMI AI免费API&#xff1a;个人智能助手完整指南 【免费下载链接】kimi-free-api &#x1f680; KIMI AI 长文本大模型逆向API【特长&#xff1a;长文本解读整理】&#xff0c;支持高速流式输出、智能体对话、联网搜索、探索版、K1思考模型、长文档解读、图像…...

编程新知 2026/4/3 0:52:36

我在 Mac 写了个服务，硬要它在 18 岁高龄的 Windows 服务器上跑，结果…

前言 事情是这样的。 我有个朋友&#xff08;以下称他为"怨种朋友"&#xff09;&#xff0c;找到我说&#xff1a; "帮我写个 Go 服务&#xff0c;在你自己 Mac 上开发&#xff0c;最后要能跑在咱们公司那台快入土的 Windows 2008 服务器上。" 我当时的…...

编程新知 2026/4/2 21:24:49