Electron学习笔记(五)

news2024/11/24 18:52:17

文章目录

      • 相关笔记
      • 笔记说明
    • 七、系统
      • 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.coloradmin.cn/o/1666662.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Three.js基础练习——渲染一个立方体

1.学习内容参考了 three.js入门教程--零基础也能学会_threejs菜鸟教程-CSDN博客 本章内容包含渲染立方体&#xff0c;并配合ui工具食用~ 2.效果图 import * as THREE from three import * as dat from dat.gui import { OrbitControls } from three/addons/controls/OrbitC…

【网站项目】SpringBoot803房屋租赁管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【Golang】VSCode进行GO的调试

原来的launch.json {"version": "0.2.0","configurations": [{"name": "Golang","type": "go","request": "launch","program": "${workspaceFolder}","…

Linux技术---部署PXE服务器实现批量安装操作系统

部署PXE服务器实现批量安装操作系统 部署PXE服务器实现批量安装操作系统 部署PXE服务器实现批量安装操作系统1.安装相关服务组件1.1 安装tftp和xinetd1.2 安装DHCP服务1.3 准备 Linux 内核、初始化镜像文件、 PXE 引导程序、安装FTP服务并准备安装源1.4 配置启动菜单文件1.5 验…

JVM之运行时数据区

Java虚拟机在运行时管理的内存区域被称为运行时数据区。 程序计数器&#xff1a; 也叫pc寄存器&#xff0c;每个线程会通过程序计数器记录当前要执行的字节码指令的地址。程序计数器在运行时是不会发生内存溢出的&#xff0c;因为每个线程只存储一个固定长度的内存地址。 JAVA虚…

[蓝桥杯 2021 国 ABC] 123(java)——前缀和,思维

目录 题目 解析 代码 这么久了&#xff0c;我终于能不看别人代码完整写出来了&#xff0c;呜呜呜。虽然过程也是很曲折。 题目 解析 这个题&#xff0c;找其中数列的规律&#xff0c;1,1,2,1,2,3,1,2,3,4&#xff0c;...&#xff0c;因此我们把拆分成行列&#xff0c;如下…

Qt---信号和槽

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

车载测试和传统测试有什么区别

搞清楚车载测试和传统应用测试的区别,就可以大胆冲冲冲! 车载测试随着市场的需求量增加又火来一波,一直’遥遥领先’的我们一定要告诉大家一个事实:车载测试和传统的应用测试是有很大区别的. 测试对象不一样 传统测试:测试的对象无非就是各种应用,比如电脑端的web系统(使用浏…

Git系列:git tag 使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

FANUC机器人坐标系的分类和简介

1、概述 坐标系是为了确定机器人的位置和姿势而在机器人或空间上定义的位置指标系统&#xff0c;坐标系分为关节坐标系和直角坐标系&#xff0c;直角坐标系遵循右手定则&#xff0c;而关节坐标系则是以机器人每个轴所转动的角度来表示机器人当前的位置。 2、坐标系的分类及简…

weblogic 反序列化 CVE-2018-2628

这个漏洞因为java版本问题一直下载不了ysoserial反序列化工具&#xff0c;没办法生成payload。这里记录一下漏洞原理。 一、漏洞简介 Weblogic Server中的RMI 通信使用T3协议在Weblogic Server和其它Java程序&#xff08;客户端或者其它Weblogic Server实例&#xff09;之间传…

团结引擎+OpenHarmony 3 通信

团结引擎和鸿蒙之间通信 因为 ts 并没有像 JAVA 有反射的调用&#xff0c;所以我们必须要像 Web GL 平台一样通过导出的行为告诉引擎到底哪些 ts 的接口可以给 C# 来调用。 1 在 Tuanjie 引擎里 需要一个tsllib文件&#xff0c;用于设置给导出对象 C#使用。就可以直接创建以 …

Unity基础

概述 基础知识 3D教学 数学计算公共类Mathf 练习: 三角函数 练习&#xff1a; Unity中的坐标系 Vector3向量 向量模长和单位向量 向量加减乘除 练习&#xff1a; 向量点乘 向量叉乘 向量插值运算 Quaternion四元数 为何要使用四元数 四元数是什么 四元数常用方法 四元数计算 练…

GeoServer安装以及部署

GeoServer介绍 GeoServer是一个开源的服务器软件&#xff0c;用于共享和编辑地理空间数据。它支持多种地理空间数据格式&#xff0c;并且可以发布为多种服务格式&#xff0c;如Web Feature Service (WFS)、Web Map Service (WMS)、Web Coverage Service (WCS)&#xff0c;以及…

十二、Redis主从复制

与其他的中间件存在同样的问题&#xff0c;在单机的情况&#xff0c;随着业务的增长&#xff0c;会面临着灾备、性能方面的压力。Redis在这方面提供了一主一从、一主多从的结构。这种结构同时也是实现读写分离功能的基础。即主节点提供写能力&#xff0c;从节点提供读能力。为了…

【C/C++】C/C++ 车票售票系统设计与实现(源码+课件)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

初识C语言——第十八天

循环while/do while while 语法结构 while(表达式) 循环语句; break:在while循环中&#xff0c;break用于永久的终止循环 continue:在while循环中&#xff0c;continue的作用是跳过本次循环continue后面的代码 直接去判断部分&#xff0c;看是否进行下一次循环。 注意事项…

射频识别技术RFID

射频识别技术RFID RFID介绍 射频识别&#xff1a; 英文名称是(Radio Frequency Identification)&#xff0c; 简称是“ RFID” 又称 无线射频识别&#xff0c; RFID是物联网的其中一种终端技术。 RFID是一种通信技术&#xff0c; 可通过无线电讯号耦合识别特定目标并读写相关…

保研机试之【二叉树后序】--1道题

参考&#xff1a;东哥带你刷二叉树&#xff08;后序篇&#xff09; | labuladong 的算法笔记 建议先过一遍&#xff1a;今天是二叉树~-CSDN博客&#xff0c;very重要&#xff01; 然后再过一遍&#xff08;理解怎么应用方法&#xff09;&#xff1a;保研机试之[三道二叉树习题…

简单易懂的Java Queue入门教程!

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…