Configuração e geração de ícones do aplicativo Electron

Seleção de tecnologia:

1、"elétron": "21.3.3",

2、"electron-vite": "1.0.17"

3、"vue": "3.2.45"

4、"elemento-mais": "2.2.32"

fundo:

Por padrão, existem quatro tipos de ícones usados ​​pelos aplicativos que desenvolvemos usando o elétron:

1. Ícone do arquivo de instalação do software:

2. O ícone gerado na área de trabalho após a instalação do software:

3. O ícone exibido na barra de tarefas depois que o software é aberto:

4. O ícone exibido no canto superior esquerdo após a abertura do software:

Então, como definir esses quatro ícones no elétron?

Na verdade, os quatro ícones acima podem ser divididos em duas categorias, 1 e 2 são divididos em uma categoria, chamados de ícones do pacote de instalação, 3 e 4 são divididos em uma categoria, os ícones exibidos quando o software está em execução, chamados de ícones de janela

Modificação do ícone da janela:

1. Arquivo modificado: src\main\index.js

2. Para o conteúdo do arquivo modificado, consulte a oitava linha do código a seguir e defina a propriedade icon em BrowserWindow:

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 800,
    show: false,
    autoHideMenuBar: true,
    icon: join(__dirname,'../../resources/image/3.png'),
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      nodeIntegration: true
    }
  })

Modificação do ícone do pacote de instalação

1. A modificação do ícone do pacote de instalação é muito mais difícil do que a modificação do ícone da janela

2. Instale o construtor de ícones de elétrons

npm i electron-icon-builder

3. Adicione a seguinte linha de código 11 nos scripts do package.json:

  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config",
    "electron:generate-icons":"electron-icon-builder --input=./resources/icon.png --output=build --flatten"
  }

4. Copie a imagem icon.png que preparamos para o diretório de recursos

5. Execute o comando gerar ícone:

npm run electron:generate-icons

6. Após a execução do comando, vários ícones são gerados no diretório build\icons do projeto:

7. configuração do arquivo electronic-builder.yml:

nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
  installerIcon: 'build/icon.ico'
  uninstallerIcon: 'build/icon.ico'

installerIcon: configura o ícone do pacote de instalação

uninstallerIcon: ícone de comando de desinstalação

(Copie o ico na etapa 6 para o diretório de compilação)

8. Compilar e empacotar:

npm run build:win

9. O pacote de instalação correspondente é gerado no diretório dist do projeto: