如何向电子申请添加图标

Posted 2021-04-08

我有一个win .exe和安装程序的电子构建文件，但图标不是我的。在我的main.js文件中，我有代码来附加图标，但我只能在createWindow函数内部工作。在函数外部，我收到一条错误消息。 .exe将运行，我得到我的图标，虽然我这样做是错误的;安装程序根本不起作用。我尝试过几个教程，但没有一个能解决这个问题。

Main.js

const {app, BrowserWindow, Tray} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
const appIcon = new Tray('icon/app.png')
win = new BrowserWindow({width: 1920, height: 1080, icon:   'icon/app.ico'})
console.log(appIcon, win)
win.loadURL(url.format({
pathname: path.join(__dirname, 'app/app.html'),
protocol: 'file:',
slashes: true
}))
win.on('closed', () => {
 win = null
 })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
 app.quit()
}
})
app.on('activate', () => {
if (win === null) {
 createWindow()
}
})

的package.json

{
"name": "myapp",
"version": "1.0.0",
"description": "MyApp",
"private": true,
"main": "main.js",
"build": {
    "appID": "myapp",
    "productName": "MyApp",
    "icon": "icon/app.ico"
},
"scripts": {
        "start": "electron ." ,
        "package": "",
    },
"author": "Me",
"license": "ISC",
"devDependencies": {"electron": "^1.6.1"}
}

我不知道该怎么做。

答案

简单解决方案

const nativeImage = require('electron').nativeImage;
    var image = nativeImage.createFromPath(__dirname + '/public/img/logo.png'); 
 // where public folder on the root dir

    image.setTemplateImage(true);


 // Create the browser window.
    win = new BrowserWindow({
        width: 1179,
        height: 754,
        backgroundColor: '#ffffff',
        transparent: false,
        icon: image
    })

另一答案

在main.js里面

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/icon.ico'});

在安装程序中，如果您使用的是电子制造商

  "devDependencies": {
    "electron": "^1.4.15",
    "electron-builder": "^12.3.1"
  },

在根目录上创建一个文件夹，并在该文件夹中命名构建添加你的icon.ico

有时您需要重启电子或构建应用程序2次

另一答案

以下为我工作。要在任务栏中显示应用程序图标，您可以在main.js中动态更新图标（如果使用typescript然后是main.ts）

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

值得一提的是__dirname指向与package.json相同的目录