electron如何创建右键菜单(最新版本12.0.2)

今天学习electron看到某个博主去年2020年1月的视频教程

看到创建右键菜单这部分代码时却发现报错了

原因是electron的api变更了

百度了很多看到的都是旧版本的代码没有最新的

官网通道:https://www.electronjs.org/docs/api/menu

下面直接贴代码

// renderer 渲染进程代码
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // ...
})

// main 主进程代码
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup(BrowserWindow.fromWebContents(event.sender))
})

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先需要安装一些依赖: ```bash npm install electron electron-context-menu vite vue@next vue-router@next @vue/compiler-sfc typescript tslib --save-dev ``` 然后在 `src` 目录下新建 `main.ts` 和 `renderer.ts` 两个文件。 `main.ts` 的内容如下: ```ts import { app, BrowserWindow, Menu } from 'electron'; import path from 'path'; import contextMenu from 'electron-context-menu'; // 创建窗口 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 允许使用 node.js nodeIntegration: true, // 允许使用 Electron 的 remote 模块 enableRemoteModule: true, // 允许在渲染进程中使用上下文菜单 contextIsolation: false, }, }); // 加载页面 win.loadFile(path.join(__dirname, '../renderer/index.html')); // 打开开发者工具 win.webContents.openDevTools(); // 设置窗口菜单 const template = [ { label: '菜单1', submenu: [ { label: '子菜单1', click: () => { console.log('点击了子菜单1'); }, }, { label: '子菜单2', click: () => { console.log('点击了子菜单2'); }, }, ], }, { label: '菜单2', click: () => { console.log('点击了菜单2'); }, }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); } // 当 Electron 初始化完成并准备好创建窗口时调用这个函数 app.whenReady().then(() => { // 注册上下文菜单 contextMenu({ window: BrowserWindow.getFocusedWindow(), showInspectElement: true, }); createWindow(); // 如果所有窗口都关闭了,退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); }); // 在 macOS 上,当单击 Dock 图标并且没有其他窗口打开时,重新创建一个窗口 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` `renderer.ts` 的内容如下: ```ts import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 接下来在 `src` 目录下新建 `index.html` 文件,并且在里面添加一个 `div` 元素,并且指定它的 `id` 为 `app`。同时在 `body` 元素下添加如下代码: ```html <script src="./renderer.js"></script> ``` 最后在 `package.json` 中添加如下脚本: ```json { "scripts": { "start": "vite", "build": "vite build", "electron": "electron ." } } ``` 现在可以运行 `npm run start` 来启动应用程序,然后运行 `npm run electron` 来启动 Electron 应用程序。现在你应该已经能够看到一个 Electron 窗口,并且它包含一个菜单。如果你右键单击窗口,你应该能够看到一个上下文菜单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值