Electron学习笔记（五）
文章目录
- 相关笔记
- 笔记说明
- 七、系统
- 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)、监听网页按键事件 （窗口需处于激活状态）(2)、监听全局按键事件 （窗口无需处于激活状态）(3)、补充：自定义窗口菜单快捷…...
【jest 调试 - vscode debug】
jest 测试typescript，如果想对测试文件本身断点调试。 安装jest相关依赖 # jest本体 npm install --save-dev jest # jest的类型声明 npm install --save-dev types/jest # typescript中使用 npm install --save-dev ts-jestlaunch.json 配置参考 {"type&qu…...
华为OD机试【分奖金】(java)(100分)
1、题目描述 公司老板做了一笔大生意，想要给每位员工分配一些奖金，想通过游戏的方式来决定每个人分多少钱。按照员工的工号顺序，每个人随机抽取一个数字。按照工号的顺序往后排列，遇到第一个数字比自己数字大的，那么&…...
27- ESP32-S3 USB虚拟串口（USB-OTG 外设介绍）
ESP32-S3 USB虚拟串口详解 USB-OTG 外设介绍 USB-OTG： USB-OTG是一种USB规范，允许嵌入式系统（如手机、平板电脑、单片机系统等）在没有主机（如个人电脑）的情况下直接相互通信，同时也能够作为传…...
PostgreSQL查看sql的执行计划
PostgreSQL查看sql的执行计划 基础信息 OS版本：Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本：16.2 pg软件目录：/home/pg16/soft pg数据目录：/home/pg16/data 端口：5777在PostgreSQL中，查看…...
macOS Ventura 13如何设置定时重启(命令行)
文章目录 macOS Ventura 13如何设置定时重启(命令行)前言具体设置步骤及命令解释其他 macOS Ventura 13如何设置定时重启(命令行) 前言 由于升级 macOS 13 Ventura 之后，之前在节能里面通过鼠标点击设置开机关机的方法不能用了，现在只能用命令设置开机…...
【sass简介以及如何安装使用】
Sass（Syntactically Awesome Stylesheets）是一个层叠样式表（CSS）预处理器，它扩展了CSS的语法，并增加了许多有用的功能，如变量、嵌套、混合（Mixin）、继承以及模块化的结构…...
Git版本控制工具的原理及应用详解（四）
本系列文章简介： 随着软件开发的复杂性不断增加，版本控制成为了开发团队中不可或缺的工具之一。在过去的几十年里，版本控制工具经历了各种发展和演变，其中Git无疑是目前最受欢迎和广泛应用的版本控制工具之一。 Git的出现为开发者…...
AI图书推荐：ChatGPT全面指南—用AI帮你更健康、更富有、更智慧
你是否在努力改善你的健康？ 你是否长期遭受财务困难？ 你想丰富你的思想、身体和灵魂吗？ 如果是这样，那么这本书就是为你准备的。 《ChatGPT全面指南—用AI帮你更健康、更富有、更智慧》（CHATGPT Chronicles AQuick…...
C++ | Leetcode C++题解之第92题反转链表II
题目： 题解： 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…...
【管理咨询宝藏99】离散制造智能工厂战略规划方案
本报告首发于公号“管理咨询宝藏”，如需阅读完整版报告内容，请查阅公号“管理咨询宝藏”。 【管理咨询宝藏99】离散制造智能工厂战略规划方案 【格式】PDF版本 【关键词】智能制造、先进制造业转型、数字化转型 【核心观点】 - 推进EHS、品质一致性、生…...
java8 Stream使用中的一些实践
文章目录 使用Stream将List转换为Map时key冲突问题使用Stream时得到List的size为不为0，元素Object为null问题 使用Stream将List转换为Map时key冲突问题 如下： 把userList转换为userMap id为key user 为value 由于user2和user3的id相同，所以会…...
入门篇：Kafka基础知识·
目录 一、Kafka简介 二、Kafka核心组件 三、Kafka安装与配置 1.下载与解压 2.配置环境变量 3.配置server.properties 4.启动Kafka服务 四、Kafka基本操作 1.创建Topic 2.查看Topic列表 3.发送消息 4.接收消息 五、Kafka进阶使用 1.消息持久化与存储 2.消息顺序与…...
SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析
原文链接：SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247604401&idx4&snd2d39846dce07bee765c820de1cf92f3&chksmfa821956cdf5904…...
每日一题——力扣206. 反转链表（举一反三、思想解读）
一个认为一切根源都是“自己不够强”的INTJ 个人主页：用哲学编程-CSDN博客专栏：每日一题——举一反三题目链接 目录 菜鸡写法编辑 代码点评 代码分析 时间复杂度 空间复杂度 专业点评 另一种方法编辑 代码点评 代码逻辑 时间复杂度 空间…...
【qt】纯代码界面设计
界面设计目录 一.界面设计的三种方式1.使用界面设计器2.纯代码界面设计3.混合界面设计 二.纯代码进行界面设计1.代码界面设计的总思路2.创建项目3.设计草图4.添加组件指针5.初始化组件指针6.添加组件到窗口①水平布局②垂直布局③细节点 7.定义槽函数8.初始化信号槽9.实现槽函数…...
【深度学习】SDXL中的Offset Noise，Diffusion with Offset Noise，带偏移噪声的扩散
https://www.crosslabs.org//blog/diffusion-with-offset-noise 带有偏移噪声的扩散 针对修改后的噪声进行微调，使得稳定扩散能够轻松生成非常暗或非常亮的图像。 作者：尼古拉斯古藤伯格 | 2023年1月30日 马里奥兄弟使用稳定扩散挖掘隧道。左图显示了未…...
开发属于自己的Spring Boot Starter-18
为什么要开发专用的Spring Boot Starter Spring在通常使用时，一般是通过pom.xml文件中引入相关的jar包，然后再通过application.yml文件配置初始化bean的配置，但随着项目越来越复杂或是项目组中的应用数量越来越多，可能会带来几个…...
C中Mysql的基本api接口
一、初始化参数返回值 二、链接服务器三、执行SQL语句注意事项 四、获取结果集4.1mysql_affected_rows和mysql_num_rows4.2mysql_store_result与mysql_free_result注意事项注意事项整体的工作流程 4.3mysql_use_result（）4.4mysql_field_count（…...
grafana10.x报错 Failed to upgrade legacy queries Datasource x was not found
问题 grafana 从6.x升级到10.x后，导入json文件后报错，数据源x查询不到，grafana不显示数据； Templating Failed to upgrade legacy queries Datasource x was not found解决方法 可能grafana升级后数据源找不到，在面板…...
项目管理-案例重点知识(干系人管理)
项目管理：每天进步一点点~ 活到老，学到老 ヾ(◍∇◍)ﾉﾞ 何时学习都不晚，加油 四、干系人管理 案例重点知识 干系人管理 案例 重点内容： （1）权力利益方格、权力影响方格ÿ…...
微信小程序踩坑,skyline模式下,scroll-view下面的一级元素设置margin中的auto无效,具体数据有效
开发工具版本 基础库 开启skyline渲染调试 问题描述 skyline模式下,scroll-view下面的一级元素的margin写auto的值是没有效果的(二级元素margin写auto是有效果的),关闭这个模式就正常显示 演示效果图 父元素的宽度和高度效果(宽度是750rpx,宽度占满的) 一级元素宽度和css效果…...
jspXMl标记语言基础
1.打开命令框进入数据库 打开eclipse创建需要连接的项目 粘贴驱动程序 查看驱动器 使用sql的包 int代表个 conlm代表列名 <%page import"java.sql.ResultSet"%> <%page import"java.sql.Statement"%> <%page import"java.sql.Connect…...
【DevOps】Linux 与虚拟局域网 (VLAN) 详解
目录 一、什么是VLAN？ 二、VLAN的工作原理 三、Linux中的VLAN支持 四、内核模块 五、用户空间工具 六、创建VLAN 七、配置VLAN 八、管理VLAN 九、VLAN的应用 1、 网络隔离 2、网络管理 3、网络扩展 十、VLAN的优点和限制 十一、结论 虚拟局域网&#…...
《表格新视界：从罗列到洞察的飞跃》
在信息爆炸的当下，表格宛如一位低调的英雄，默默支撑着无数的数据世界。 曾经，我们只把表格当作简单的记录工具，一行行、一列列地填着数字与文字。但如今，表格已华丽转身，成为了展现数据魅力的舞台。 它不…...
风电功率预测 | 基于GRU门控循环单元的风电功率预测（附matlab完整源码)
风电功率预测 风电功率预测 | 基于GRU门控循环单元的风电功率预测（附matlab完整源码)完整代码风电功率预测 | 基于GRU门控循环单元的风电功率预测（附matlab完整源码) 完整代码 clc; clear close allX = xlsread(风电场预测.xlsx)...
0基础安装 composer
解决： composer 不是内部或外部命令，也不是可运行的程序 或批处理文件。 php composer.phar可以运行 安装环境：系统w11 官网地址：Composer 1.安装composer 1.1打开命令行窗口 在命令行窗口里，右键是粘贴࿰…...
MYSQL-9.问题排查
问题排查的思路与方向 问题排查思路 分析问题：根据理论知识经验分析问题，判断问题可能出现的位置或可能引起问题的原因，将目标缩小到一定范围；排查问题：基于上一步的结果，从引发问题的“可疑性”角度出发…...
制造企业数据管理：从数据到价值的转化
在数字化浪潮席卷全球的今天，制造企业面临着前所未有的机遇与挑战。如何从海量的数据中提取有价值的信息，将其转化为企业的核心竞争力，成为了每一个制造企业必须面对的问题。而数据管理，正是实现这一转化的关键所在。制造企业数据…...
单例模式介绍
【一】为什么要单例模式 单例设计模式： 一个类只允许创建一个对象（或者实例），那这个类就是一个单例类，这种设计模式就叫作单例设计模式，简称单例模式。 当一个类的功能比较单一，只需要一个实例…...