时间戳

首页 > 解决方案 > 如何从串行端口列表中将菜单项添加到电子菜单

menu - 如何从串行端口列表中将菜单项添加到电子菜单

问题描述

在我的电子应用程序中，我使用 SerialPort 与 Arduino 设备进行交互。我想在 Electron 菜单中列出可用的端口（插入 arduinos）。我现在不知道如何将数据从我的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)
        }
    })
}

标签： menuelectron

解决方案

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));
});

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

推荐阅读