使用electron-builder打包windows應用時的幾個靜態資源問題

weixin_34292287發表於2018-10-31

electron打包應用的庫有多種選擇,目前使用的是electron-builder。我們要將應用打包成windows安裝包,只需要引用electron-builder,並做簡單的配置即可。electron-builder提供了nsis安裝模組,提供了標準的windows應用安裝介面。這裡,有一些靜態資源引用的問題需要注意。

sidebar.bmp

sidebar.bmp是windows應用安裝介面裡完成時需要顯示的圖片,實際打包後,發現一片空白,並沒有載入出來。類似下圖:


4033465-9a4e9d3a069c278c.png
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格式最好。

相關文章