使用electron-builder打包windows应用时的几个静态资源问题

electron打包应用的库有多种选择,目前使用的是electron-builder。我们要将应用打包成windows安装包,只需要引用electron-builder,并做简单的配置即可。electron-builder提供了nsis安装模块,提供了标准的windows应用安装界面。这里,有一些静态资源引用的问题需要注意。

sidebar.bmp

sidebar.bmp是windows应用安装界面里完成时需要显示的图片,实际打包后,发现一片空白,并没有加载出来。类似下图:


使用electron-builder打包windows应用时的几个静态资源问题_第1张图片
nsis安装界面sidebar

bmp是windows上常用的图片格式,像我之前直接修改后缀和在线png转bmp的尝试,都不能让nsis加载出sidebar图片。
因为sketch也不支持导出bmp,后发现直接用windows上的画图软件,可以将png导出为24位图的bmp文件。
同时,官方要求bmp图片的像素大小为164 × 314;分辨率并不影响能否加载出来,更多是为了能适应nsis安装框预留出来的位置。

托盘

windows系统中,应用运行时,会有个在右下角的托盘图标,具体的API是Tray,这部分也需要更换logo和文案。

// 添加托盘
    let image;
    if (process.platform === 'win32') {
      image = nativeImage.createFromPath(path.join(__dirname, '/../../../client/images/uplink-tray.ico'));
    } else {
      image = nativeImage.createFromPath(path.join(__dirname, '/../../../client/images/icon-tray-upchat-other.png'));
    }
    image.setTemplateImage(true);
    mainWindow.appIcon = new Tray(image);
    mainWindow.appIcon.setToolTip('This is uplink ' + upchatVersion);
    const contextMenu = Menu.buildFromTemplate([
      {
        label: '关于有联',
        click: function() {
          aboutApp();
        },
      },
      {
        label: '退出有联',
        click: function() {
          app.quit();
        },
      },
    ]);

注意
托盘的图片时通过nativeImage去生成的,因为前端代码没有引用到该图片,因此file-loader不会自动将其copy到build目录。更改后,手动复制过去。
官方建议这里的图片使用ico格式最好。

你可能感兴趣的:(使用electron-builder打包windows应用时的几个静态资源问题)