Electron自定义导航栏

发表于 分类于 ，

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

主进程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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：

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