在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定。

我们接上一章的代码继续编写,上一章代码 https://www.cnblogs.com/weijiutao/p/13195306.html

上一章我们简单写了一个demo并跑了起来,我们会发现它和我们电脑上的其他程序软件一样有自带的菜单,如下图:

本人使用的是Mac,菜单在吸顶栏上,Windows电脑的话会跟随程序,一般的电脑程序都会有这样的菜单存在,方便我们进行一些快捷操作,接下来我们就对这个菜单栏进行一下创建定制。

官方关于Menu的解释地址:https://www.electronjs.org/docs/api/menu

从官方解释可以看出Menu为主进程的模块,仅在主进程( main process)中可用, 但您也可以在渲染进程(render process)中通过  remote  模块使用它。下一章我们可以说一下这个 remote 模块。

接上一章的目录下创建一个 menu.js 的文件,目录如下:

其中 menu.js 代码:

 const {Menu} = require('electron');
let template = [
{
label: '设置',
submenu: [
{label: '快捷键设置'},
{label: '系统设置'}
]
},
{
label: '关于',
submenu: [
{label: '关于Electron'},
{label: '关于Node'}
]
},
]; const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

在上面的代码中,我们定一了一个数组,其中label为菜单的名称,submenu为菜单底下的内容,即二级菜单,当然也可以继续嵌套submenu,就像我们平常写的树状结构一样。

然后我们将menu.js 引入到我们到主进程中,即index.js中:

 const {app, BrowserWindow} = require('electron')

 function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}) /**
* 引入 menu.js
*/
require('./menu'); // 并且为你的应用加载index.html
win.loadFile('index.html') // 打开开发者工具
win.webContents.openDevTools()
} // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow) //当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
}) // 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件,然后用 require 导入。

至此我们就完成了菜单的修改配置,如下:

需要注意的是我们的Mac电脑菜单的第一个label为系统自定义的名称,所以我们的“设置”二字并没有将其替换掉。

在上面的代码中我们已经重新定义了我们的菜单栏,接下来我们对菜单栏的菜单进行事件绑定,使其能够作为一个真正的功能使用。

官方为我们的每个菜单提供了一个click方法来帮助我们自定义菜单的绑定事件,如下:

 const {Menu, dialog} = require('electron');
const pjson = require('./package.json');
let template = [
{
label: '设置',
submenu: [
{label: '快捷键设置'},
{label: '系统设置'}
]
},
{
label: '关于',
submenu: [
{
label: '关于Electron',
// 绑定click方法
click: () => {
dialog.showMessageBox({
message: '当前版本:' + pjson.version,
}).then(result => {
console.log(result)
})
}
},
{label: '关于Node'},
]
},
]; const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

在上面的代码中,我们在其中一个submenu子项中添加了一个click事件,并注册了一个Electron为我们提供的dialog方法来获取到package.json中的version信息,通过对话框的形式为我们展示出来,最后的结果如下:

至此我们就实现来Electron的菜单创建和事件绑定,其中我们提到了remote模块和dialog模块,我会在接下来的内容中继续为大家说一下,先忙工作去了。。。

从零开始学Electron笔记(二)的更多相关文章

  1. 从零开始学Electron笔记(四)

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  2. 从零开始学Electron笔记(一)

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

  3. 从零开始学Electron笔记(六)

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

  4. 从零开始学Electron笔记(三)

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

  5. 从零开始学Electron笔记(五)

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

  6. 从零开始学Electron笔记(七)

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

  7. 从零开始学Xamarin.Forms(二) 环境搭建、创建项目

    原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...

  8. Java从零开始学四十二(DOM解析XML)

    一.DOM解析XML xml文件 favorite.xml <?xml version="1.0" encoding="UTF-8" standalone ...

  9. Java从零开始学三十二(正则表达式)

    一.为什么要有正则 正则表达式可以方便的对数据进行匹配,可以执行更加复杂的字符串验证.拆份.替换功能. 例如:现在要求判断一个字符串是否由数字组成,则可以有以下的两种做法: 不使用正则完成 使用正则完 ...

随机推荐

  1. 你真的了解EF吗?关于EntityFramework的高级优化

    接上一篇文章.现在写程序,做项目不是说功能做完就完事了,在平常的开发过程中对于性能的考虑也是极其重要的. 关于ef的那些事,今天就来说说吧.首先必须得知道.net ef在程序中的五种状态变化过程与原理 ...

  2. 日期时间设置 QDate, QTime, QDateTime

    #!/usr/bin/python3 from PyQt5.QtCore import QDate, QTime, QDateTime, Qt now = QDate.currentDate() pr ...

  3. python+selenium上传本地文件

    迅雷号自媒体视频文件自动上传,贴标签发布 难点 本地文件上传,通过send_keys(‘文件路径’)的方式实现上传的目的 文件名通过正则匹配的方式进行处理,主要匹配出中文标题名称 处理过程中文件名称中 ...

  4. 从零开始的Spring Boot(4、Spring Boot整合JSP和Freemarker)

    Spring Boot整合JSP和Freemarker 写在前面 从零开始的Spring Boot(3.Spring Boot静态资源和文件上传) https://www.cnblogs.com/ga ...

  5. JSON案例

    原文链接:https://zhuanlan.zhihu.com/p/62763428 json字符串->JSONObject 用JSON.parseObject()方法即可将JSon字符串转化为 ...

  6. OSI七层模型工作过程&&输入URL浏览器的工作过程(超详细!!)

    从以下10个方面深入理解输入URL后整个模型以及浏览器的工作流程! 目录 1.HTTP 2.DNS 3.协议栈 4.TCP 5.IP 6.MAC 7.网卡 8.交换机 9.路由器 10.服务器与客户端 ...

  7. linear-gradient,radial-gradient 渐变

    一.渐变效果 ->  线性渐变 方法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ...

  8. python自如爬虫

    如果你想入门数据分析,但是苦于没有数据,那就看下文如何用 10 行代码写一个最简单的自如房源爬虫 首先我们通过分析看到自如手机版有个 url 如下:http://m.ziroom.com/list/a ...

  9. 基于领域驱动设计(DDD)超轻量级快速开发架构

    smartadmin.core.urf 这个项目是基于asp.net core 3.1(最新)基础上参照领域驱动设计(DDD)的理念,并参考目前最为了流行的abp架构开发的一套轻量级的快速开发web ...

  10. Swagger之外的选择

    今天给大家安利一款接口文档生成器--JApiDocs. swagger想必大家都用过吧,非常方便,功能也十分强大.如果要说swaager有什么缺点,想必就是注解写起来比较麻烦.如果我说有一款不用写注解 ...