Electron自定义导航栏

如白驹过隙

已于 2024-03-24 21:34:24 修改

阅读量265

点赞数 2

分类专栏： electron 文章标签： electron javascript 前端

于 2024-03-21 21:24:49 首次发布

本文链接：https://blog.csdn.net/weixin_49722066/article/details/136921251

版权

electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了如何在Electron应用中创建动态菜单，包括在主进程中渲染菜单模板和处理菜单事件，如监听`ctrl+n`新建文件，以及在主进程直接修改菜单并发送消息给渲染进程。

摘要由CSDN通过智能技术生成

1.新建menu.js文件

/**
 * 创建菜单,主进程渲染（建议）
 */
import { Menu } from 'electron';

//定义菜单
var template = [
    {
        label: '文件',
        submenu: [
            {
                label: '新建文件',
                //监听事件
                click: function () {
                    console.log("ctrl+n")
                },
                //绑定快捷键
                accelerator: 'ctrl+n'
            },
            {
                label: '新建窗口'
            }
        ]
    },
    {
        label: '编辑',
        submenu: [
            {
                label: '复制',
                //规则
                role: 'copy'
            },
            {
                label: '剪切',
                role: 'cut'
            },
            {
                label: '重新加载',
                role: 'reload'
            },
        ]
    },{
        label:"打开测试窗口"
    }
]

var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);

在主进程中引入

async function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  //在初始化窗口中引入设置好的菜单
  require("./components/menu.js");
}

2.直接在主进程中修改

async function createWindow() {
   var m = Menu.buildFromTemplate([
    {
      label: '文件',
      submenu: [
        {
          label: '新建文件',
          //监听事件
          click: function () {
            console.log("ctrl+n")
            win.webContents.send('main', 'ok')  //向渲染进程发送消息
          },
          //绑定快捷键
          accelerator: 'ctrl+n'
        },
        {
          label: '新建窗口'
        }
      ]
    },
    {
      label: '编辑',
      submenu: [
        {
          label: '复制',
          //规则
          role: 'copy'
        },
        {
          label: '剪切',
          role: 'cut'
        },
        {
          label: '重新加载',
          role: 'reload'
        },
      ]
    }, {
      label: "打开测试窗口",
      click: () => {  //点击以后触发的事件
          win.webContents.openDevTools()
      },
      accelerator: 'f12'  //绑定快捷键
    }
  ]);
  Menu.setApplicationMenu(m); 
}