Electron-vue 关于图标的修改_electron 图标

electron-vue 图标

提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。

1. 启动项目默认图标与窗口左上角图标

这两个图标均由 mainWindow 的 icon 属性决定：
代码如下（示例）：

mainWindow = new BrowserWindow({
    height: 620,
    width: 400,
    useContentSize: true,
    icon: path.join(__static,"./zero.ico"),
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: false,
      webSecurity: false,
    },    
  })
1
2
3
4
5
6
7
8
9
10
11

效果如下：

另外，窗口左上角 标题 也可以自定义，修改位置如下（注意：修改完成后需重新启动运行代码才可生效）：

2. 菜单栏图标

可在菜单文字表达前添加图标

代码如下（示例）：

{
        label: "显示主窗口", 
        icon: path.join(__static,"./logo.png"),      
        click: function() {
            mainWindow.show();         
        } //打开相应页面
    },
      {//打开相应页面
        label: "检查更新",
        type:'checkbox',
        checked: true,
        click: function() { } 
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下：

3. 系统托盘图标

系统托盘图标可自定义设置：

代码如下（示例）：

let iconPath = path.join(__static, "./zero.ico");
let appTray = new Tray(iconPath);
1
2

效果如下

4. 打包安装包图标

在 package.json 中配置：

代码如下（示例）：

"win": {
      "icon": "build/icons/zero.ico",
      "artifactName": "${productName}_setup_${version}.${ext}",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12

效果如下：

5. 开始菜单图标和快捷方式图标

在 package.json 中配置 ：
其中
createDesktopShortcut表示创建快捷方式图标
createStartMenuShortcut 表示开始菜单图标

代码如下（示例）：

"nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./build/icons/zero.ico",
      "uninstallerIcon": "./build/icons/zero.ico",
      "installerHeaderIcon": "./build/icons/zero.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "xxxx"
    }
1
2
3
4
5
6
7
8
9
10
11

6、dialog 弹框图标

ipcMain.on('logout',(e)=>{
    dialog.showMessageBox({
      type: 'info',
      noLink:true, // windows 下的传统样式
      title: '提示信息',
      icon:path.join(__static,"./zero.ico"),
      defaultId: 0,
      message:"确定要退出登录吗？",
      buttons:['确定','取消']
    },(index) => {
      if(index === 1){
        // 什么都不做
        e.preventDefault(); // 阻止默认行为            
      }else{
        mainWindow.loadURL(winURL)
        mainWindow.setSize(400,400);
      }
    });
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

实现效果：

---

总结

以上是我个人项目中使用到的图标，欢迎大家补充