打包后电子托盘图标不显示

Question

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

我正在使用电子 React/Redux 样板 (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 可执行文件，当我运行时命令行向我展示了一个与我的托盘图标有关的被拒绝的承诺 - 我正在做一个 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 下添加了资源。

如果您遇到此类问题，我建议您按照我的做法（显示包内容等）在打包的电子应用程序中查看问题。