无法覆盖 mac os 电子菜单上的应用程序名称

Question

我正在用头撞墙。我正在尝试覆盖演示电子应用程序的名称，以为其提供自定义名称，而不仅仅是Electron。我为此创建了一个模块：

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

const template = [
    {
        label: 'New Name',
        submenu:[
            {
                label: 'Test',
                click: (menuItem, browserWindow, event) => {
                    console.log('menu item clicked')
                }
            },
            {role: 'quit'}
        ]
    },
    {
        label: 'test test',
        submenu:[
            {
                label: 'Test',
                click: (menuItem, browserWindow, event) => {
                    console.log('menu item clicked')
                }
            },
            {role: 'quit'}
        ]
    }
]

installApplicationMenu = function (){
    const menu = Menu.buildFromTemplate(template)
    let result = Menu.setApplicationMenu(menu)
}


module.exports = {
    installApplicationMenu
}

我在创建窗口后调用这个模块：

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

const {installApplicationMenu} = require('./MenuInstaller')


require('electron-reload')(__dirname,{
    electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
})

let win


function createWindow(){
    win = new BrowserWindow({
        width: 800,
        height: 600
    })

    win.loadURL(
        url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true
        })
    )

    win.on('closed', () => {
        win = null
    })

}

app.on('ready', function (){
    createWindow()
    installApplicationMenu()
})


app.on('activate', () => {
    if(win === null) createWindow()
})

当我这样做时，第二个菜单集的自定义名称为 test test，但主菜单名称仍为 Electron：

我一直在将代码与我创建的另一个应用程序进行比较，在该应用程序中我能够覆盖默认名称，但我无法发现在这种情况下是什么阻止了覆盖工作。

有什么想法吗？

Answer 1

当你在开发环境中运行你的应用程序时使用;

./node_modules/.bin/electron main.js

或

electron main.js

您实际上正在运行一个 prebuilt electron 可执行文件，该可执行文件运行您指定的文件。因此在这种情况下，操作系统将显示构建和打包应用程序的名称。

如果你想改变它，你需要打包它。即构建您自己的可分发包。为此，有一个很棒的包electron-builder

所以安装它；

npm install --save-dev electron-builder

然后构建包；

./node_modules/.bin/build -m

不要忘记在package.json 中设置productName。例如，它将显示在 macOS 的菜单中。

-m 适用于 macOS。

您会在/dist 目录中看到包。但是，如果您有自定义应用程序格式，则可能无法构建，因此有关应用程序结构的详细信息，请参阅README 或wiki。

Answer 2

在将近 2 年没有使用 Electron 之后，我才重新开始使用它。据我记得，除非您打包应用程序，否则您无法更改应用程序名称。试试这个电子包装器：https://github.com/electron-userland/electron-packager。

Answer 3

您可以在应用的package.json 中将productName 设置为您的应用名称。

Answer 4

您可以在创建 BrowserWindow 时通过在传递的选项中添加title 来设置名称，或者使用实例方法win.setTitle("My App")。默认值为Electron (Source)

function createWindow(){
    win = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'My App'
    })

    // ...
}