06. Electron 右键菜单功能的实现
目录
在 05 节我们学习了 Electron 中如何设置顶部菜单,也作了一个音乐菜单的小案例,但是忘了给大家讲解如何给菜单绑定快捷键,即通过一个快捷命令就能打开我们需要的目的内容。接下来我们会进行补充讲解,并且实现右键功能。
菜单快捷键绑定
绑定快捷键的属性是accelerator
属性,比如我们新打开一个窗口,我们就的代码可以写成这样。
accelerator:'ctrl+n'
全部代码如下:
const {Menu, BrowserWindow} = require('electron'); var template = [ { label: '乐库', submenu: [ { label:'儿童大全', accelerator:'ctrl+n', click:() => { var win = new BrowserWindow({ width:500, height:500, webPreferences: { nodeIntegration: true } }); win.loadFile('children.html'); win.on('closed', ()=>{ win = null }) } }, { type: 'separator' }, {label:'抖音热歌'}, {label:'车载音乐'}, {label:'网红歌曲'} ] }, { label: '电台', submenu: [ {label:'主题'}, {label:'场景'}, {label:'心情'} ] } ] var m = Menu.buildFromTemplate(template);// 加载模板 Menu.setApplicationMenu(m);// 设置窗口的菜单
写完代码后,在终端中输入electron .
运行程序,再用快捷键ctrl+n
就可以新建一个页面了。如下图,当然 GIF 图大家看不到我输入的快捷键,所以需要你动手更这我做,这就实现了新建页面的方法。
创建右键菜单
右键菜单的响应事件是写在渲染进程中的,也就是写在index2.html
中的,所以要是使用,就用到到remote
模块进行操作了。
先来看看右键的相应事件,我们打开render
文件夹,然后打开index2.js
文件,编写一个右键菜单的监听事件,代码如下:
window.addEventListener('contextmenu', function (e) { alert('码云笔记'); })
当我们要使用Menu
模块,它是主线中的模块,如果想在渲染线程中使用,就必须使用remote
。代码如下:
const {remote} = require('electron'); var rightTemplate = [ { label:"剪切", accelerator:'ctrl+x', }, { label:"复制", accelerator:'ctrl+c', }, { label:"粘贴", accelerator:'ctrl+v', } ] var m = remote.Menu.buildFromTemplate(rightTemplate); window.addEventListener('contextmenu', function (e) { // alert('码云笔记') e.preventDefault(); m.popup({window:remote.getCurrentWindow()}); })
现在就可以有右键菜单了,我们可以在终端中输入electron .
打开程序进行测试。
程序打开调试模式
由于我们已经定义了顶部菜单,没有了打开调试模式的菜单了,这时候可以使用程序来进行打开。在主进程 main.js 中加入这句代码就可以了。
mainWindow.webContents.openDevTools()
man.js 完整代码如下:
var electron = require('electron'); // 引入 electron 模块 var app = electron.app; // 创建 electron 引用 var BrowserWindow = electron.BrowserWindow; // 控制窗口引用 var mainWindow = null; // 声明要打开的主窗口 app.on('ready', () => { mainWindow = new BrowserWindow({ width:600, height:600,// 设置打开的窗口大小 webPreferences: { contextIsolation: false, worldSafeExecuteJavaScript: false, webSecurity: false, nodeIntegration: true, // 是否集成 node.js,解决 require is not defined 问题 nodeIntegrationInWorker: true, webviewTag: true, // 解决 webview 无法显示问题 enableRemoteModule: true } }); mainWindow.webContents.openDevTools(); require('./main/menu.js'); mainWindow.loadFile('index2.html'); // 加载 HTML 页面 // 监听关闭事件,把主窗口设置为 null mainWindow.on('closed', () => { mainWindow = null; }) })
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 06. Electron 右键菜单功能的实现
码云笔记 » 06. Electron 右键菜单功能的实现