在之前的文章我们介绍了一下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笔记（四）的更多相关文章

  1. 从零开始学Electron笔记（一）

    前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...

  2. 从零开始学Electron笔记（二）

    在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...

  3. 从零开始学Electron笔记（三）

    在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https ...

  4. 从零开始学Electron笔记（五）

    在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打 ...

  5. 从零开始学Electron笔记（六）

    在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是 ...

  6. 从零开始学Electron笔记（七）

    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...

  7. 从零开始学Xamarin.Forms(四) Android 准备步骤（添加第三方Xamarin.Forms.Labs库）

    原文:从零开始学Xamarin.Forms(四) Android 准备步骤(添加第三方Xamarin.Forms.Labs库)  1.安装对应dll     Update-Package Xama ...

  8. Java从零开始学二十四(集合工具类Collections)

    一.Collections简介 在集合的应用开发中,集合的若干接口和若干个子类是最最常使用的,但是在JDK中提供了一种集合操作的工具类 —— Collections,可以直接通过此类方便的操作集合 二 ...

  9. 《Python 3.5从零开始学》笔记-第8章 面向对象编程

    前几章包括开启python之旅.列表和元组.字符串.字典.条件和循环等语句.函数等基本操作.主要对后面几章比较深入的内容记录笔记. 第8章 面向对象编程 8.3深入类 #!/usr/local/bin ...

随机推荐

  1. DevOps系列——Jenkins/Gitlab自动打包部署

    前面只说了DevOps的两个基础组件Jenkins和GitLab,客官也不要着急,我们玩就玩的深入一点,Gitlab和Jenkins的各种配置和 插件很多,也够啃一阵子的,不要照着操作一通就感觉万事大 ...

  2. cnblogs 博客爬取 + scrapy + 持久化 + 分布式

    目录 普通 scrapy 分布式爬取 cnblogs_spider.py 普通 scrapy # -*- coding: utf-8 -*- import scrapy from ..items im ...

  3. Uber基于Apache Hudi构建PB级数据湖实践

    1. 引言 从确保准确预计到达时间到预测最佳交通路线,在Uber平台上提供安全.无缝的运输和交付体验需要可靠.高性能的大规模数据存储和分析.2016年,Uber开发了增量处理框架Apache Hudi ...

  4. 【深度思考】JDK8中日期类型该如何使用？

    在JDK8之前,处理日期时间,我们主要使用3个类,Date.SimpleDateFormat和Calendar. 这3个类在使用时都或多或少的存在一些问题,比如SimpleDateFormat不是线程 ...

  5. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

  6. 【JMeter_16】JMeter逻辑控制器__随机控制器<Random Controller>

    随机控制器<Random Controller> 业务逻辑: 当每次执行到该逻辑控制器时,随机挑选控制器下的任意一个子节点<取样器.逻辑控制器> Ignore sub-cont ...

  7. rust 函数-生命周期

    记录一下自己理解的生命周期. 每个变量都有自己的生命周期. 在c++里生命周期好比作用域, 小的作用域的可以使用大作用域的变量. 如果把这里的每个作用域取个名,那么就相当于rust里的生命周期注解. ...

  8. C语言宏技巧 X宏

    前言 本文介绍下X宏的使用 首先简单介绍下宏的几种用法 #define STRCAT(X,Y) X##Y #define _STR(X) #@X #define STR(X) #X #define L ...

  9. Latex文件本机能正常编译，但在另一台电脑不能编译的解决方法

    问题:同样的文件在台式机能编译出正常的PDF文件,但发现在另一个电脑上不能编译出PDF文件. \documentclass[preprint,10pt,5p,times,twocolumn]{elsa ...

  10. CODING DevOps 系列第五课：微服务测试——微服务下展开体系化的微服务测试

    微服务测试的痛点与挑战 这张图可以形象地展示单体服务和微服务的对比,单体应用就像左边巨大的集装箱,软件模块和应用都包括其中:而微服务就像是由一个小集装箱组成,微小的服务组成一个庞大.完整的系统.单体服 ...