使用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
- 使用 electron-builder 打包 Electron 程式UI
- SpringBoot靜態資源訪問Spring Boot
- 不聯網的情況下,使用 electron-builder 快速打包全平臺應用UI
- springboot+themeleaf+bootstrap訪問靜態資源/無法訪問靜態資源/圖片Spring Boot
- 複習webpack4之靜態資源打包(上)Web
- 複習webpack4之靜態資源打包(下)Web
- 關於iOS Webview 載入React 靜態資源的安全問題iOSWebViewReact
- Springboot中如何訪問靜態資源Spring Boot
- vue-cli腳手架打包的靜態資源請求出錯Vue
- vue專案打包,解決靜態資源無法載入和路由載入無效(404)問題Vue路由
- electron-builder打包見解UI
- Electron-builder打包詳解UI
- SpringMVC下關於靜態資源訪問SpringMVC
- springboot新增靜態資源無法訪問Spring Boot
- Typora 使用中的幾個問題
- 靜態資源管理
- Nginx配置靜態代理/靜態資源對映時root與alias的區別,帶字首對映用aliasNginx
- Electron使用electron-builder打包時下載electron失敗或慢的解決方案UI
- Laravel 在 Docker 環境下訪問 storage 靜態資源 404 問題解決LaravelDocker
- webpack簡單搭建localhost訪問靜態資源Weblocalhost
- 開發網校原始碼時應該注意的幾個問題原始碼
- 瀏覽器解析html檔案src靜態資源路徑問題瀏覽器HTML
- Python import 時要注意的幾個問題PythonImport
- Flutter-Android 應用打包相關問題FlutterAndroid
- Django不顯示CSS的效果(基於Django模板的靜態資源配置問題)DjangoCSS
- webpack 靜態資源管理Web
- 靜態資源公共庫
- Web靜態資源加速Web
- 請問使用 nginx 進行反向代理 Laravel 專案的時候如何 保障 Laravel 專案下靜態資源的訪問 ?NginxLaravel
- WPF:靜態、動態資源以及資源詞典
- 【開發遇到的問題】java web專案在引用伺服器靜態資源中文亂碼問題JavaWeb伺服器
- Promise使用時應注意的問題Promise
- SpringBoot之yaml語法及靜態資源訪問Spring BootYAML
- Webpack 4.0 打包 Vue 應用時出現無法使用Vue-loader問題及解決方法WebVue
- vue-cli專案打包多個與static檔案同級的靜態資源目錄(copy-webpack-plugin外掛的使用)VueWebPlugin
- WordPress引用靜態資源方法