web-dev-qa-db-ja.com

電子クイックスタートサンプルアプリのネイティブメニューを変更する方法

電子アプリは、電子クイックスタートサンプルアプリに表示されるのと同じデフォルトメニューで開き、それを変更する方法は？ ドキュメントのメニュー例 も試しましたが、何も変わりません。 mainWindow.setMenu(null);でメニューを非表示にすると、メニューは消えますが、それでも新しいメニューを初期化できません

何か案は？

プラットフォーム：Windows 7

電子ver：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>
javascriptmenuelectron
11
Eyal Ron

Electronの 'default_app' メニューを設定します ;これを回避したい場合は、デフォルトのアプリを介さずに直接アプリを起動するためにElectronが必要です（注：electron .のようなものでアプリを起動する場合、実際にはデフォルトのアプリを起動します）。

Electron リソースフォルダーを検索 「app」、「app.asar」、または「default_app」を探します。したがって、アプリを直接起動するには、アプリをコピーするか、Electronのリソースフォルダーにリンクする必要があります。

アプリの起動方法に関係なく、Menu.setApplicationMenuを使用してメニューを設定できます。メインプロセスで設定できます。例のようにレンダラーで設定する必要はありません。ちなみに、main.htmlにはタイプミス（requireではなくrequier）があるため、それが実際のコードである場合は、main.jsがまったく実行されていないことを示しています。

9
inukshuk

メニューをカスタマイズするロジックをapp（ 'ready'）イベントコールバックに配置します。次のコード例を試してみてください

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();
})
3
NJInamdar

電子のMenuオブジェクトと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)
0
daftuser

あなたのアプリのElectronはどこにありますか？きみの package.jsonファイルは次のようになります。

{
  "name": "todos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "author":
    "Who Cares <[email protected]> (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'
  }
];

構文を修正しても、デフォルトのElectronメニューとそのキーバインドを引き継ぐという問題が発生します。独自のカスタムメニューとキーバインドを追加すると言っていますが、それが目標であれば本番環境では問題ありませんが、維持したい機能が失われているようです。

次のように修正できます。

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