Electron自定义导航栏

下面是我在项目SIXiaolong1117/vue-markdown中的实现方式。

主进程：

const { Menu } = require('electron')

// ...

var menuTemplate = [
    {
      label: "文件",
      submenu: [
        // accelerator 配置快捷键
        {
          label: '新建', accelerator: "ctrl+n", click: () => {
            console.log("新建文件");
            mainWindow.webContents.send("newFile");
          }
        },
        {
          label: '打开', accelerator: "ctrl+o", click: () => {
            console.log("打开文件");
            // // 调用Vue里面的openFile
            // mainWindow.webContents.send("openFile");
            // Electron用dialog实现打开文件
            // then 等待选择完成
            const { dialog } = require('electron')
            dialog.showOpenDialog({
              properties: ['openFile'],
              filters: [
                { name: 'Markdown Files', extensions: ['md'] },
              ]
            }).then((data) => {
              console.log(data.filePaths.toString());
              mainWindow.webContents.send("openFilePath", data.filePaths.toString());
            });
          }
        },
        {
          type: "separator"
        },
        {
          label: '保存', accelerator: "ctrl+s", click: () => {
            console.log("保存文件");
            mainWindow.webContents.send("saveFile");
          }
        },
        {
          label: '另存为…', accelerator: "ctrl+shift+s", click: () => {
            console.log("另存文件")
            mainWindow.webContents.send("saveAsFile");
          }
        },
      ]
    },
    {
      label: "编辑",
      submenu: [
        // role按角色进行配置
        { label: "撤销", role: "undo", click: () => { console.log("撤销操作") } },
        { label: "重做", role: "redo", click: () => { console.log("重做操作") } },
        {
          type: "separator"
        },
        { label: "剪切", role: "cut", click: () => { console.log("剪切操作") } },
        { label: "复制", role: "copy", click: () => { console.log("复制操作") } },
        { label: "粘贴", role: "paste", click: () => { console.log("粘贴操作") } },
        {
          type: "separator"
        },
        { label: "全选", role: "selectall", click: () => { console.log("全选操作") } },

      ]
    },
    {
      label: "视图",
      submenu: [
        {
          label: "全屏", accelerator: "f11", click: () => {
            console.log("全屏");
            mainWindow.setFullScreen(!mainWindow.isFullScreen());
          },
        },
        {
          type: "separator"
        },
        {
          label: "重置页面", click: () => {
            console.log("重置页面");
            mainWindow.webContents.reload()
          },
        },
        {
          label: "开发者工具", accelerator: "shift+f12", click: () => {
            console.log("开发者工具");
            mainWindow.toggleDevTools();
          }
        },
      ]
    },
    {
      label: "帮助",
      submenu: [
        {
          label: "作者…", click: () => {
            console.log("作者页面");
            shell.openExternal('https://github.com/SIXiaolong1117');
          }
        },
        {
          label: "许可证…", click: () => {
            console.log("许可证");
            shell.openExternal('https://github.com/SIXiaolong1117/vue-markdown/LICENSE');
          }
        },
      ]
    },
];
// 构建菜单模板
var menuBuilder = Menu.buildFromTemplate(menuTemplate);
// 设置菜单模板为当前应用的菜单
Menu.setApplicationMenu(menuBuilder);

// ...

也可以将上述内容写到单独的JS文件中，然后通过require()引入main.js：

require("../ipcMain/menu.js");