从零开始学Electron笔记（四）
在之前的文章我们介绍了一下Electron的这个remote模块，接下来我们继续说一下Electron的右键菜单的制作。
在我们日常我们使用的软件中都会存在右键菜单的情况，比如我们用到的浏览器，开发所用到的代码编辑器都有右键菜单，可以方便我们的日常操作，接下来我们就来看一下用Electron如何实现右键菜单，接上一章的目录：
接下来我们要在idnex.html 中使用右键菜单，右键菜单其实和我们之前所说过的顶部菜单栏其实是差不多的，所以我就引用了一下在介绍菜单栏时的一些代码并进行了改进，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div>
<button id="btn">点我打开其他页面</button>
<script> const {remote} = require('electron');
const pjson = require('./package.json'); let rightTemplate = [{
label: '设置',
submenu: [
{label: '快捷键设置'},
{label: '系统设置'}
]
}, {
label: '关于',
submenu: [
{
label: '关于Electron',
// 快捷键设置
accelerator: 'command+e',
// 绑定click方法
click: () => {
remote.dialog.showMessageBox({
message: '当前版本：' + pjson.version,
}).then(result => {
console.log(result)
})
}, },
{
label: '关于Node',
},
]
},]; window.addEventListener('contextmenu', (e) => {
e.preventDefault();
const menu = remote.Menu.buildFromTemplate(rightTemplate);
menu.popup({window:remote.getCurrentWindow()});
})
</script>
</div>
</body>
</html>
在上面的代码中，我们通过window.addEventListerner 来监听鼠标右击事件 contextmenu ，然后用到了我们上一章介绍的 remote 模块，因为我们是在渲染进程 idnex.html 中进行操作，所以必须要用到 remote 模块，我们定义了一个和之前讲到的菜单栏一样的一个菜单，并切有click事件，此次还添加来一个属性accelerator的属性，其实就是一个快捷键，由于本人用的是Mac，所以使用的是command的键盘按钮，相当于Windows的ctrl键，接下来我们看一下页面效果：
当我们单击鼠标右键时便会出现上面的菜单，我们可以点击 “关于Electron” 按钮或者直接使用快捷键 “command+e”，运行效果如下：
跟我们之前讲菜单栏时的效果是一样的，至此，我们便完成来一个简单的右键菜单任务，还是比较简单的。
如果我们去阅读Electron官方文档的话会发现里面还有很多的方法共我们使用，但是阅读官方文档还是很晦涩的，我们先从简单的慢慢学习，然后逐步深入，最后达到融汇贯通，本人也是从零开始学习Electron，共同进步！
从零开始学Electron笔记（四）的更多相关文章
- 从零开始学Electron笔记（一）
前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...
- 从零开始学Electron笔记（二）
在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...
- 从零开始学Electron笔记（三）
在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https ...
- 从零开始学Electron笔记（五）
在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打 ...
- 从零开始学Electron笔记（六）
在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是 ...
- 从零开始学Electron笔记（七）
在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...
- 从零开始学Xamarin.Forms(四) Android 准备步骤（添加第三方Xamarin.Forms.Labs库）
原文:从零开始学Xamarin.Forms(四) Android 准备步骤(添加第三方Xamarin.Forms.Labs库) 1.安装对应dll Update-Package Xama ...
- Java从零开始学二十四(集合工具类Collections)
一.Collections简介 在集合的应用开发中,集合的若干接口和若干个子类是最最常使用的,但是在JDK中提供了一种集合操作的工具类 —— Collections,可以直接通过此类方便的操作集合 二 ...
- 《Python 3.5从零开始学》笔记-第8章 面向对象编程
前几章包括开启python之旅.列表和元组.字符串.字典.条件和循环等语句.函数等基本操作.主要对后面几章比较深入的内容记录笔记. 第8章 面向对象编程 8.3深入类 #!/usr/local/bin ...
随机推荐
- Python 3.9 beta2 版本发布了，看看这 7 个新的 PEP 都是什么？
原作:Jake Edge 译者:豌豆花下猫@Python猫 英文:https://lwn.net/Articles/819853/ 随着 Python 3.9.0b1 的发布,即开发周期中计划的四个 ...
- 描述一下 JVM 加载 class 文 件的原理机制?
JVM 中类的装载是由 ClassLoader 和它的子类来实现的, Java ClassLoader 是一个重要的 Java 运行时系统组件.它负责在运行时查找和装入类文件的类.
- webstorm 快捷键 失效问题
解决方案一: file->Settings->Keymap->设置为Default 解决方案二: file->Settings->IdeaVim->取消对勾 重 ...
- RabbitMQ系列之【centos6 服务开启自启脚本】
#!/bin/sh## rabbitmq-server RabbitMQ broker## chkconfig: - 80 05# description: Enable AMQP service p ...
- 大厂面试过程复盘(微信/阿里/头条均拿offer,附答案篇)
背景 本人前端,3年经验,由于个人的原因,决定跳槽,于是大概3月开始找工作,总历时大概2个月,面试了微信/阿里/头条,三家都拿到了offer,来分享一下面经. 问题比较多,而且很多面试题都是跟个人项目 ...
- MongoDB 基础知识学习笔记
注意:本文假设您已经安装好 MongoDB 数据库并启动它了. 连接 MongoDB.数据库操作.集合操作 连接 MongoDB mongo ip:port/dbName -u username -p ...
- NASH：基于丰富网络态射和爬山算法的神经网络架构搜索 | ICLR 2018
论文提出NASH方法来进行神经网络结构搜索,核心思想与之前的EAS方法类似,使用网络态射来生成一系列效果一致且继承权重的复杂子网,本文的网络态射更丰富,而且仅需要简单的爬山算法辅助就可以完成搜索,耗时 ...
- （五）TestNG测试的并发执行详解
原文链接:https://blog.csdn.net/taiyangdao/article/details/52159065 TestNG在执行测试时,默认suitethreadpoolsize=1, ...
- Dubbo——SPI及自适应扩展原理
文章目录 引言 正文 一.什么是SPI? 1. Java SPI的实现 2. Dubbo SPI实现原理 由配置文件得到的猜想 SPI源码 二.自适应扩展机制 三.Dubbo IOC 总结 引言 Du ...
- python基础整理（2）
布尔表达式与其余值的替换 值的测试 Python不仅仅可以使用布尔型变量作为条件,它可以直接在if中使用任何表达式作为条件: 大部分表达式的值都会被当作True,但以下表达式值会被当作False: F ...