Javascript 如何更改electron快速入门示例应用程序的本机菜单_Javascript_Menu_Electron

Javascript 如何更改electron快速入门示例应用程序的本机菜单

javascript menu electron

Javascript 如何更改electron快速入门示例应用程序的本机菜单,javascript,menu,electron,Javascript,Menu,Electron,electron应用程序以与electron quick start示例应用程序中相同的默认菜单打开，如何更改？也试过了，但没什么变化。当我用mainWindow.setMenu（null）隐藏菜单时菜单已消失，但仍无法初始化新菜单有什么想法吗平台：Windows7 电子版本：0.36.4 参考文件： package.json： { "name": "electric_timer", "version": "0.1.0", "description": "a Time she

electron应用程序以与electron quick start示例应用程序中相同的默认菜单打开，如何更改？也试过了，但没什么变化。当我用

mainWindow.setMenu（null）隐藏菜单时菜单已消失，但仍无法初始化新菜单
有什么想法吗
平台：Windows7
电子版本：0.36.4
参考文件：
package.json：
{
  "name": "electric_timer",
  "version": "0.1.0",
  "description": "a Time sheet & project managment",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "none"
  },
  "author": "Eyal Ron",
  "license": "MIT"
}

app.js：
var app = require('app');
var BrowserWindow = require('browser-window');

app.on('ready', function (){
  var mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  mainWindow.setMenu(null);
  mainWindow.loadUrl('file://' + __dirname + '/main.html');
});

main.js：
var remote = require('remote');
var Menu = remote.require('menu');

var menu = Menu.buildFromTemplate([
  {
    label: 'Electron',
    submenu: [
      {
        label: 'Prefs',
        click: function(){
          alert('hello menu');
        }
      }
    ]
  }
]);
Menu.setApplicationMenu(menu);

main.html：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>electron test</title>
</head>
<body>
  <h1>hello world</h1>
  <script>requier('./main.js')</script>
</body>
</html>


电子测试
你好，世界
要求者（'./main.js'）
Electron的“默认应用程序”；如果您想避免这种情况，您需要Electron直接启动应用程序，而不是通过默认应用程序启动应用程序（注意：如果您使用类似于Electron的东西启动应用程序。
您实际上启动了默认应用程序）
Electron用于“app”、“app.asar”或“default_app”，因此为了直接启动您的应用程序，您需要将其复制或链接到Electron的资源文件夹中
无论您如何启动应用程序，都可以使用menu.setApplicationMenu设置菜单——您可以在主进程中进行设置，而无需像示例中那样在渲染器中进行设置。顺便说一句，main.html中有一个输入错误（requirer而不是require），因此如果这是您的实际代码，则表明您的main.js根本没有运行。
将自定义菜单的逻辑放入应用程序（“就绪”）事件回调中。给出下面的代码示例
const {app, BrowserWindow, Menu} = require('electron');
let mainWindow;
let menuTemplate = [
    {
        label: "Window Manager",
        submenu: [
            { label: "create New" }
        ]
    },
    {
      label : "View",
            submenu : [
        { role : "reload" },
        { label : "custom reload" }
        ]
    }
];
function appInit () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the main.html of the app.
  mainWindow.loadFile('main.html')

    let menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
}
app.on('ready', () => {
  appInit();
})

你的应用程序中的Electron在哪里？您的package.json
文件应如下所示：
{
  "name": "todos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "author":
    "Who Cares <email@example.com> (https://doesntmatter.com/)",
  "license": "MIT",
  "dependencies": {
    "electron": "3.0.8"
  }
}

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}/main.html`);

  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

const menuTemplate = [
  {
    label: 'File'
  }
];

const menuTemplate = [
  {
    label: 'File',
    submenu: [{ label: 'New Todo' }]
  }
];

即使修改了语法，您仍然会遇到接管默认Electron菜单及其键绑定的问题。您是说您将添加自己的自定义菜单和键绑定，如果这是您的目标，那么在生产中就可以了，但听起来您已经失去了想要维护的功能
您可以这样修复它：
{
  "name": "todos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "author":
    "Who Cares <email@example.com> (https://doesntmatter.com/)",
  "license": "MIT",
  "dependencies": {
    "electron": "3.0.8"
  }
}

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}/main.html`);

  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

const menuTemplate = [
  {
    label: 'File'
  }
];

const menuTemplate = [
  {
    label: 'File',
    submenu: [{ label: 'New Todo' }]
  }
];

看起来electron菜单和MenuItem对象设置为不可变
这意味着，如果要修改它们，必须创建新对象并使用它。我的代码就是这样做的，隐藏“帮助”菜单和开发人员工具：
// main.js

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

...

  let defaultMenu = Menu.getApplicationMenu()

  let newMenu = new Menu();
  defaultMenu.items
    .filter(x => x.role != 'help')
    .forEach(x => {
      if(x.role == 'viewmenu' && process.env.NODE_ENV == 'production') {
        let newSubmenu = new Menu();

        x.submenu.items.filter(y => y.role != 'toggledevtools').forEach(y => newSubmenu.append(y));

        x.submenu = newSubmenu;

        newMenu.append(
          new MenuItem({
            type: x.type,
            label: x.label,
            submenu: newSubmenu
          })
        );
      } else {
        newMenu.append(x);
      }
    })

  Menu.setApplicationMenu(newMenu);

...
  })
}

app.on('ready', createWindow)


我认为这是一个很好的解释，但不是一个很好的答案。您没有回答的是，如果您正在开发一个电子应用程序，您如何看待您的菜单，具体来说，您如何直接启动该应用程序？您在全球范围内声明menuTemplate
的具体原因是什么？如果垃圾收集不在全局范围内，它会像在main窗口中一样处理掉它吗？没有特别的理由这样做。菜单模板也可以保存在单独的const文件中，并根据项目的平台和环境进行定制。为什么不在使用它的功能中声明它呢？正如所说，没有强制要求。Post仅给出了一个使用菜单模板的示例，使其在整个文件中可重用。菜单模板可以在任何地方声明或动态构造。好的