image-20210203144717078

之前发过一篇文章，名为 利用electron框架构建桌面级应用 ，大家可以去支持一下这篇文章。

通过阅读之前发的那篇文章，相信大家已经对electron有了一定的了解。

那么今天就来给大家分享一下如何自定义electron应用的菜单栏。

其实很简单，只需要修改 main.js 文件即可。

可以参考一下我的 main.js 的配置：

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
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const app = electron.app

function createWindow () {
  const win = new BrowserWindow({
    width: 414,
    height: 700,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})


const Menus = [
    {
        label:'首页',
        click: function () {
          const win = new BrowserWindow({
            width: 414,
            height: 700,
            webPreferences: {
              nodeIntegration: true
            }
          })
          win.loadFile('index.html')}
             
    },
    {
        label: '关于',
        click: function (item, focusedWindow) {
        if (focusedWindow) {
        const options = {
            type: 'info',
            title: '标题',
            buttons: ['按钮'],
            message: '信息内容'}
        electron.dialog.showMessageBox(focusedWindow, options, function () {})}
        }
    },
    {
        label:'帮助',
        submenu:[
            {
                
                    label: '访问网站',
                    click: function () {
                        electron.shell.openExternal('https://greyh.cn')
                    }
      
            },
            {
              
              
                    label: '联系我们',
                    click: function () {
                        electron.shell.openExternal('https://greyh.cn')
                    }

            }
        ]
    }
            
];


const mainMenu = Menu.buildFromTemplate(Menus);
    Menu.setApplicationMenu(mainMenu);

可以参考我上面的代码，删除不需要的内容，做出适当修改即可。