使用electron-builder打包windows應用時的幾個靜態資源問題
electron打包應用的庫有多種選擇,目前使用的是electron-builder。我們要將應用打包成windows安裝包,只需要引用electron-builder,並做簡單的配置即可。electron-builder提供了nsis安裝模組,提供了標準的windows應用安裝介面。這裡,有一些靜態資源引用的問題需要注意。
sidebar.bmp
sidebar.bmp是windows應用安裝介面裡完成時需要顯示的圖片,實際打包後,發現一片空白,並沒有載入出來。類似下圖:
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格式最好。
相關文章
- 多頁應用增量更新靜態資源Webpack打包方案Web
- Golang 非主流 打包靜態資源方案Golang
- 使用MFC的Windows 套接字應注意的幾個問題 (轉)Windows
- 使用 electron-builder 打包 Electron 程式UI
- vue修改打包後靜態資源路徑Vue
- vue靜態資源打包中的坑與解決方案Vue
- 不聯網的情況下,使用 electron-builder 快速打包全平臺應用UI
- wordpress 加速主題的靜態資源
- 複習webpack4之靜態資源打包(下)Web
- 複習webpack4之靜態資源打包(上)Web
- Web應用開發中的幾個問題Web
- 基於webpack的幾種靜態資源的引入方案Web
- 關於iOS Webview 載入React 靜態資源的安全問題iOSWebViewReact
- SpringBoot靜態資源訪問Spring Boot
- SpringMVC配置靜態資源訪問SpringMVC
- vue-cli腳手架打包的靜態資源請求出錯Vue
- springboot+themeleaf+bootstrap訪問靜態資源/無法訪問靜態資源/圖片Spring Boot
- vue專案打包,解決靜態資源無法載入和路由載入無效(404)問題Vue路由
- Electron-builder打包詳解UI
- electron-builder打包見解UI
- Nginx配置靜態代理/靜態資源對映時root與alias的區別,帶字首對映用aliasNginx
- SpringMVC訪問靜態資源的三種方式SpringMVC
- Typora 使用中的幾個問題
- Electron使用electron-builder打包時下載electron失敗或慢的解決方案UI
- jboss 下 部署 多個應用程式的資源問題,急,謝謝!!
- 使用開源軟體前應該問的七個問題
- webpack簡單搭建localhost訪問靜態資源Weblocalhost
- Springboot中如何訪問靜態資源Spring Boot
- SpringMVC下關於靜態資源訪問SpringMVC
- webpack 靜態資源管理Web
- Web靜態資源加速Web
- 靜態資源公共庫
- Laravel 在 Docker 環境下訪問 storage 靜態資源 404 問題解決LaravelDocker
- 開發網校原始碼時應該注意的幾個問題原始碼
- WPF:靜態、動態資源以及資源詞典
- 瀏覽器解析html檔案src靜態資源路徑問題瀏覽器HTML
- Django不顯示CSS的效果(基於Django模板的靜態資源配置問題)DjangoCSS
- 用node搭建簡單的靜態資源管理器