打包后 Electron 托盘图标不显示

Question

我有一个显示托盘图标的 Electron 应用程序，单击该图标时会显示我的主窗口。在开发模式下效果很好，但是当我将它打包(到 .app 文件中)并双击 .app 文件时，没有任何菜单出现，更重要的是，图标没有出现，所以用户永远看不到我的应用程序。

我正在使用 Electron React/Redux Boilerplate ( https://github.com/chentsulin/electron-react-boilerplate )

这是我的 main.dev.js 文件 - 任何猜测都值得赞赏:

import { app, BrowserWindow, Tray } from 'electron';
import MenuBuilder from './menu';

let mainWindow = null;
let tray;

if (process.env.NODE_ENV === 'production') {
  const sourceMapSupport = require('source-map-support');
  sourceMapSupport.install();
}

if (
  process.env.NODE_ENV === 'development' ||
  process.env.DEBUG_PROD === 'true'
) {
  require('electron-debug')();
  const path = require('path');
  const p = path.join(__dirname, '..', 'app', 'node_modules');
  require('module').globalPaths.push(p);
}

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];

  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload))
  ).catch(console.error);
};

/**
 * Add event listeners...
 */

app.on('window-all-closed', () => {
  // Respect the OSX convention of having the application in memory even
  // after all windows have been closed
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

const getWindowPosition = () => {
  const windowBounds = mainWindow.getBounds();
  const trayBounds = tray.getBounds();

  // Center window horizontally below the tray icon
  const x = Math.round(
    trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2
  );

  // Position window 4 pixels vertically below the tray icon
  const y = Math.round(trayBounds.y + trayBounds.height + 4);

  return { x, y };
};

function createTray() {
  const path = require('path');
  const iconPath = path.join(__dirname, 'confluence.png');
  tray = new Tray(iconPath);
  tray.setToolTip('Confluence Helper');
  tray.on('click', event => {
    toggleWindow();

    // Show devtools when command clicked
    if (mainWindow.isVisible() && process.defaultApp && event.metaKey) {
      mainWindow.openDevTools({ mode: 'detach' });
    }
  });
}
const toggleWindow = () => {
  if (mainWindow.isVisible()) {
    mainWindow.hide();
  } else {
    showWindow();
  }
};

const showWindow = () => {
  const position = getWindowPosition();
  mainWindow.setPosition(position.x, position.y, false);
  mainWindow.show();
  mainWindow.focus();
};

app.on('ready', async () => {
  if (
    process.env.NODE_ENV === 'development' ||
    process.env.DEBUG_PROD === 'true'
  ) {
    await installExtensions();
  }

  mainWindow = new BrowserWindow({
    show: false,
    width: 500,
    height: 728,
    icon: `${__dirname}/confluence.icns`
  });

  mainWindow.loadURL(`file://${__dirname}/app.html`);

  createTray();
  // @TODO: Use 'ready-to-show' event
  //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
  mainWindow.webContents.on('did-finish-load', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    }
  });
  mainWindow.on('blur', () => {
    mainWindow.hide();
  });

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

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();
});

Answer 1

当我右键单击 .app 文件并选择“显示包内容”时，我可以看到一个 Contents/Mac 文件夹，里面有一个 unix 可执行文件，当我在命令行中运行时，向我显示了一个被拒绝的 promise 与我的托盘图标有关 - 我在做一个 path.join(__dirname,'icon.png') ，这最终是错误的路径( console.log(path.join(__dirname,'icon.png')) 救援!

当我将其更改为绝对路径('users/myname/app/icon.png')并重建时，它起作用了!

但是，这显然不适用于其他人的计算机 - 它确实适用于我的计算机(tm)，但这还不够好。

要真正修复它，我可能已经过火了 - 但这对我有用 - 通过创建 NativeImage ，在我传入的内容中使用 path.join(__dirname,'resources','icon.png') 。我还在 package.json 中的 build/files 下添加了资源。

如果您遇到此类问题，我会建议您执行我所做的(显示包内容等)以查看打包 Electron 应用程序中的问题。