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'
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/328778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ModuleNotFoundError: No module named ‘sklearn‘

ModuleNotFoundError: No module named sklearn 解决办法&#xff1a; pip install scikit-learn

Qt---信号和槽

一、信号和槽机制 所谓信号槽&#xff0c;实际就是观察者模式。当某个事件发生之后&#xff0c;比如&#xff0c;按钮检测到自己被点击了一下&#xff0c;它就会发出一个信号&#xff08;signal&#xff09;。这种发出是没有目的的&#xff0c;类似广播。如果有对象对这个信号…

Python爬虫从入门到精通:一篇涵盖所有细节的高质量教程

目录 第一部分&#xff1a;Python爬虫基础 1.1 爬虫原理 1.2 Python爬虫常用库 1.3 爬虫实战案例 1.4 注意事项 第二部分&#xff1a;爬虫进阶技巧 2.1 处理动态加载的内容 2.2 登录认证 2.3 分布式爬取 2.4 反爬虫策略 第三部分&#xff1a;爬虫实战项目 3.1 豆瓣…

党务政务服务热线|基于SSM的党务政务服务热线平台(源码+数据库+文档)

目录 基于SprinBootvue的党务政务服务热线平台 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2部门功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; …

开源的图形化Windows软件安装升级方案:WingetUI

WingetUI&#xff1a;简化数字生活&#xff0c;WingetUI让软件管理轻松便捷- 精选真开源&#xff0c;释放新价值。 概览 WingetUI是在GitHub上开发的一个实用工具&#xff0c;专为Windows用户设计&#xff0c;旨在为常见的命令行包管理工具&#xff08;如Winget、Scoop、Pip、…

爬虫入门经典(七) | 采集淘宝电场相关信息

大家好&#xff0c;我是不温卜火&#xff0c;昵称来源于成语—不温不火&#xff0c;本意是希望自己性情温和。 PS&#xff1a;由于现在越来越多的人未经本人同意直接爬取博主本人文章&#xff0c;博主在此特别声明&#xff1a;未经本人允许&#xff0c;禁止转载&#xff01;&a…

【Leetcode每日一题】 动态规划 - 简单多状态 dp 问题 - 删除并获得点数(难度⭐⭐)(76)

1. 题目解析 题目链接&#xff1a;LCR 091. 粉刷房子 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 1. 状态定义 在解决这类问题时&#xff0c;我们首先需要根据题目的具体要求来定义状态。针对房屋粉刷问题&#…

C语言 | Leetcode C语言题解之第85题最大矩形

题目&#xff1a; 题解&#xff1a; int maximalRectangle(char** matrix, int matrixSize, int* matrixColSize) {int m matrixSize;if (m 0) {return 0;}int n matrixColSize[0];int left[m][n];memset(left, 0, sizeof(left));for (int i 0; i < m; i) {for (int j …

AI图书推荐:ChatGPT 和Power BI驱动未来金融投资变革

《ChatGPT 和Power BI驱动未来金融变革》&#xff08;The Future of Finance with ChatGPT and Power BI&#xff09;由James Bryant和Aloke Mukherjee撰写&#xff0c;探讨了ChatGPT和Power BI在金融领域的应用。 主要特点&#xff1a; - 使用ChatGPT自动化Power BI&#xff…

01 | 为什么需要消息队列?

哪些问题适合使用消息队列来解决&#xff1f; 1. 异步处理 2. 流量控制 使用消息队列隔离网关和后端服务&#xff0c;以达到流量控制和保护后端服务的目的。 3. 服务解耦 无论增加、减少下游系统或是下游系统需求如何变化&#xff0c;订单服务都无需做任何更改&#xff0c…

Linux上编译安装和卸载软件

在maven官网下载maven时候&#xff0c;看到maven-3.9.5这个版本有2份安装包&#xff0c;一个是binaries&#xff0c;一个是source binaries是已编译好的文件&#xff0c;可以直接使用的版本&#xff1b;source是源代码版本&#xff0c;需要自己编译 源码的安装一般由这三个步…

Python函数之旅专栏(导航)

Python内置函数(参考版本:3.11.8)AELRabs( )enumerate( )len( )range( )aiter( )eval( )list( )repr( )all( )exec( )locals( )reversed( )anext( )round( )any( ) ascii( )FM  filter( )map( )S float( )max( )set( )Bformat( )memoryview( )setattr( )bin( )frozenset( )…

Foxmail使用经验总结

目录 1.概述 2.版本历史 3.使用方法 3.1.安装和设置账户 3.2.收取和阅读邮件 ​​​​​​​3.3.发送邮件 ​​​​​​​3.4.管理联系人 ​​​​​​​3.5.日程安排和任务管理 ​​​​​​​3.6.定制设置和插件 ​​​​​​​3.7.跨平台同步 4.小结 1.概述 Fox…

QT:QML制作线形图

目录 一.介绍 二.引入库 三.自定义属性 四.悬停处理函数 五.设置X轴 六.设置Y轴 七.画线 八.测试点坐标 九.设置值 十.效果演示 十一.代码演示 1.LineGraph.qml 2.main.qml 一.介绍 线形图&#xff08;也称为折线图&#xff09;是一种常用的数据可视化工具&#…

Springboot开发 -- Postman 调试 session 验证 接口

当我们在开发Spring Boot应用时&#xff0c;经常会遇到带有Session验证的接口&#xff0c;这些接口需要用户先登录并获取到Session ID&#xff08;或称为cookie中的JSESSIONID&#xff09;&#xff0c;然后在后续的请求中携带这个Session ID来保持会话状态。下面我将以一个实际…

Java 插入数据到Elasticsearch中进行各种类型文档的内容检索

源码下载&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1D3yszkTzjwQz0vFRozQl2g?pwdz6kb 提取码&#xff1a;z6kb 实现思路 1.搭建一个新的springboot项目&#xff0c;不会的请看我这篇博客&#xff1a;springboot项目搭建 2.添加maven依赖 <dependency><…

信息系统项目管理师0602:项目立项管理 — 历年考题(详细分析与讲解)

点击查看专栏目录 1、2017年11月第31题 题干: 项目经理小李依据当前技术发展趋势和所掌握的技术能否支撑该项目的开发,进行可行性研究。小李进行的可行性研究属于( )。 选项: A. 经济可行性分析 B. 技术可行性分析 C. 运行环境可行性分析 D. 其他方面的可行性分析 答案…

远程桌面如何配置?使用快解析远程访问

远程桌面如何设置&#xff1f; 远程桌面作为windows系统内置的一个组件&#xff0c;多年来深受用户喜爱。使用此功能&#xff0c;我们能够轻而易举的控制我们想要控制的电脑。下面我就简单的介绍一下远程桌面的设置方法。 在讲具体设置方法之前&#xff0c;首先应该给大家普及…

6大部分,20 个机器学习算法全面汇总!!建议收藏!(上篇)

前两天有小伙伴说想要把常见算法的原理 公式汇集起来。 这样非常非常方便查看&#xff01;分为上下两篇&#xff0c;下篇地址&#xff1a; 本次文章分别从下面6个方面&#xff0c;涉及到20个算法知识点&#xff1a; 监督学习算法 无监督学习算法 半监督学习算法 强化学习…

PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来

日前&#xff0c;第十二期 CCF 秀湖会议在苏州 CCF 业务总部 & 学术交流中心成功举办。本次会议以“开源教育&#xff1a;使命、挑战与发展”为主题&#xff0c;汇聚了来自学术界、工业界的二十余位专家&#xff0c;共同探讨开源教育的现状与未来。 PingCAP 联合创始人兼 C…