electron基础：开发Macos和Windows应用的菜单栏

1. Electron创建菜单栏

在 Electron 应用程序中创建桌面菜单栏可以提供用户界面上的导航和操作选项。你可以使用 Electron 的 Menu 和 MenuItem 模块来创建和管理菜单栏。以下是创建桌面菜单栏的一般步骤：

1. 导入 Electron 模块：

首先，确保在你的 Electron 主进程代码中导入 Menu 和 MenuItem 模块：

const { app, BrowserWindow, Menu, MenuItem } = require('electron');

1. 创建菜单项：

使用 MenuItem 创建每个菜单项，例如：

const fileMenuItem = new MenuItem({
  label: 'File',
  submenu: [
    {
      label: 'Open',
      click: () => {
        // 在这里处理点击 "Open" 菜单项的逻辑
      }
    },
    {
      label: 'Save',
      click: () => {
        // 在这里处理点击 "Save" 菜单项的逻辑
      }
    },
    { type: 'separator' }, // 分隔线
    {
      label: 'Exit',
      click: () => {
        app.quit(); // 退出应用程序
      }
    }
  ]
});

1. 创建菜单：

使用 Menu 创建整个菜单栏，将菜单项添加到菜单中：

const menu = new Menu();
menu.append(fileMenuItem); // 添加 "File" 菜单项
// 添加其他菜单项...

// 设置菜单栏
Menu.setApplicationMenu(menu);

1. 在应用程序准备就绪时设置菜单栏：

通常，在应用程序准备就绪时（app.whenReady()），设置菜单栏以确保应用程序启动后显示菜单栏：

app.whenReady().then(() => {
  // 创建主窗口等初始化工作...

  // 设置菜单栏
  Menu.setApplicationMenu(menu);
});

这是一个简单的示例，演示了如何创建一个包含 "File" 菜单的菜单栏。你可以根据你的应用程序的需求创建更多的菜单项和子菜单。

完整的代码示例如下：

const { app, BrowserWindow, Menu, MenuItem } = require('electron');

// 创建主窗口等初始化工作...

// 创建 "File" 菜单项
const fileMenuItem = new MenuItem({
  label: 'File',
  submenu: [
    {
      label: 'Open',
      click: () => {
        // 处理点击 "Open" 菜单项的逻辑
      }
    },
    {
      label: 'Save',
      click: () => {
        // 处理点击 "Save" 菜单项的逻辑
      }
    },
    { type: 'separator' }, // 分隔线
    {
      label: 'Exit',
      click: () => {
        app.quit(); // 退出应用程序
      }
    }
  ]
});

// 创建 "Edit" 菜单项
const editMenuItem = new MenuItem({
  label: 'Edit',
  submenu: [
    // 添加其他编辑菜单项...
  ]
});

// 创建菜单
const menu = new Menu();
menu.append(fileMenuItem); // 添加 "File" 菜单项
menu.append(editMenuItem); // 添加 "Edit" 菜单项
// 添加其他菜单项...

// 在应用程序准备就绪时设置菜单栏
app.whenReady().then(() => {
  // 创建主窗口等初始化工作...

  // 设置菜单栏
  Menu.setApplicationMenu(menu);
});

通过类似的方式，你可以创建自定义的菜单栏，以满足你的应用程序的需求。

2. Electron创建菜单栏实战

在上面的内容中简单介绍了Electron中创建菜单栏的方法，但是在实际项目中考虑到语言的切换，不能够将菜单栏名称写死在代码中。

1. 创建文本常量cn_constants.js

   const CNTextContainer = {
       topic : "主题",
       edit : "编辑",
       view : "查看",
       window: "窗口",
       help: "帮助",
       about: "关于",
       options: "选项",
       quit: "退出",
       cancel: "取消",
       redo: "重做",
       cut:"剪切",
       copy:"复制",
       paste:"粘贴",
       paste_pure_text:"纯文本粘贴",
       delete:"删除",
       choose_all:"全选",
       search:"搜索",
       refresh:"刷新",
       dark:"深色模式",
       full_screen:"全屏",
       home_page:"主页",
       new:"新建"
   };
   module.exports = CNTextContainer;

如果未来需要切换中英文模式，只需要修改导入的js文件的路径即可。

1. 创建menu.js文件

   // 1.导入 electron 中的 Menu
   const { Menu, BrowserWindow } = require('electron')
   const TextContainer = require('./constants/en_constants')
   const ShortCuts = require('./constants/shortcuts')
   // 2.创建菜单模板,数组里的每一个对象都是一个菜单
   const template = [
     {
       label: TextContainer.topic,
       // submenu 代表下一级菜单
       submenu: [
         { 
             label:  TextContainer.options,
             // 添加快捷键
             accelerator: ShortCuts.options
         },
         { 
           label:  TextContainer.new,
           accelerator: ShortCuts.new,
           click: ()=>{
               let sonWindow = new BrowserWindow(
                   {
                       width: 500,
                       height:500
                   }
               )
               sonWindow.loadFile("./index.html")
               sonWindow.on('close',()=>{
                   sonWindow = null
               })
           }
         },
         { 
           label:  TextContainer.quit,
           accelerator: ShortCuts.quit,
           click: ()=>{
               const mainWindow = BrowserWindow.getFocusedWindow();
               if (mainWindow) {
                   mainWindow.close();
               }
           }
         },
       ],
     },
     {
       label: TextContainer.edit,
       submenu: [
         { 
             label:  TextContainer.cancel,
             accelerator: ShortCuts.cancel
         },
         { 
           label:  TextContainer.redo,
           accelerator: ShortCuts.redo
         },
         { 
           label:  TextContainer.cut,
           accelerator: ShortCuts.cut
         },
         { 
           label:  TextContainer.copy,
           accelerator: ShortCuts.copy
         },
         { 
           label:  TextContainer.paste,
           accelerator: ShortCuts.paste
           },
           { 
           label:  TextContainer.paste_pure_text,
           accelerator: ShortCuts.paste_pure_text
           },
           { 
           label:  TextContainer.delete,
           accelerator: ShortCuts.delete
           },
           { 
           label:  TextContainer.choose_all,
           accelerator: ShortCuts.choose_all
           },
           { 
               label:  TextContainer.search,
               accelerator: ShortCuts.search
           }
       ],
     },  {
       label: TextContainer.view,
       // submenu 代表下一级菜单
       submenu: [
         { 
             label:  TextContainer.refresh,
             // 添加快捷键
             accelerator: ShortCuts.refresh
         },
         { 
           label:  TextContainer.dark,
           accelerator: ShortCuts.dark
         },
         { 
           label:  TextContainer.full_screen,
           accelerator: ShortCuts.full_screen
         },
       ],
     },  {
       label: TextContainer.help,
       // submenu 代表下一级菜单
       submenu: [
         { 
             label:  TextContainer.home_page,
             // 添加快捷键
             accelerator: ShortCuts.home_page
         }
       ],
     },
   ]
   
   // 3.从模板中创建菜单
   const myMenu = Menu.buildFromTemplate(template)
   
   // 4.设置为应用程序菜单
   Menu.setApplicationMenu(myMenu)

在这个文件中导入需要的语言包，配置菜单栏的label，并且为一些菜单栏添加点击事件。

1. 在main.js中导入菜单栏

   // main.js
   const { app, BrowserWindow } = require('electron');
   //导入菜单栏
   require('./src/menu')
   function createWindow() {
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       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();
     }
   });

2. 运行效果