如何从串行端口列表向 Electron 菜单添加菜单项

Question

在我的电子应用程序中，我使用 SerialPort 与 Arduino 设备进行交互。我想在 Electron 菜单中列出可用的端口（插入 arduino）。我现在不知道如何将数据从我的 renderer.js 文件发送到我的主进程，然后在我的应用程序加载之前构建菜单，其中添加了所有项目。

我正在使用此模板构建我的菜单，并使用以下脚本获取所有串行端口：

const template = [
    {
        label: 'Edit',
        submenu: [
            { role: 'undo' },
            { role: 'redo' }
        ]
    },
    {
        label: 'Ports',
        submenu: [
            { 
                label: 'select port',
                submenu: [
                    { label: 'Port1' },
                    { label: 'Port2' },
                    { label: 'Port3' }
                ]
            }
        ]
    },
    { label: 'Help' }
]

// renderer.js
const serialport = require('serialport')
const { ipcRenderer } = require('electron')

get_ports = function () {
    console.log('clicked')
    serialport.list((err, ports) => {
        if (err) {
            console.log(err)
            return
        } else {
            console.log(ports)
        }
    })
}

Answer 1

您可以将 serialport.list () 函数通过 IPC 提供的端口发送到您的主进程，在那里您将它们放入模板，然后将其设置为您的应用程序的菜单。

例如渲染进程的文件：

const serialport = require ("serialport");
const { ipcRenderer } = require ("electron");

get_ports = function () {
    console.log ('clicked');
    serialport.list ((err, ports) => {
        if (err) {
            console.log (err);
            return;
        } else {
            ipcRenderer.send ("serialports", ports);
        }
    })
}

然后在主进程的文件中：

// `template' as in your question
const { ipcMain, Menu } = require ("electron");

ipcMain.on ("serialports", (event, data) => {
    var portsSubmenu = [];

    for (port in data) {
        portsSubmenu.push ({ label: port.comName });
    }

    template[1].submenu[0].submenu = portsSubmenu;
    Menu.setApplicationMenu (Menu.buildFromTemplate (template));
});

如果您将新项目放在 "Ports" 项目之前，您要修改的子菜单的索引（此处 template[1].submenu[0]）会发生变化。

如何从串行端口列表向 Electron 菜单添加菜单项

How to add menu items to Electron Menu from list of serial ports

menu

electron