2,【electron+vue】 构建桌面应用——常见的功能及问题(修改桌面图标,软件图标,窗口图标,图标不显示问题,影藏默认菜单栏,开机自启,手动或被动关闭应用)

一.修改桌面图标,软件图标或者窗口左上角的图标.

1.首先这些图标必须是 .ico 结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.
2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是 icofx ,大家自行搜索安装使用哈,给大家看下大概的界面:

3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方
这是修改应用左上角的图标

const win = new BrowserWindow({
    icon: './public/img/title.ico',// 图标
 })

4,修改桌面的图标, .exe前面的图标
这两个是同一个图标,在项目的根目录下找到vue.config.js这个文件,如果没有,就自己创建一个,

module.exports = {
  publicPath: "./",
  outputDir: 'passageway',
  runtimeCompiler: true,
  // 插件配置
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        'productName': 'passageway',//生成exe的名字
        "appId": "aaa",//包名  
        "copyright": "xxx",//版权信息
        "directories": { // 输出文件夹
          "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./public/img/title.ico",// 安装时图标
          "uninstallerIcon": "./public/img/title.ico",//卸载时图标
          "installerHeaderIcon": "./public/img/title.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "passageway", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        "win": {
          "icon": "public/img/title.ico",//图标路径
          "target": [
            {
              "target": "nsis", //利用nsis制作安装程序
              "arch": [
                "x64", //64位
              ]
            }
          ]
        }
      },
      nodeIntegration: true
    },
  }
}

注意: nodeIntegration: true 这个不写不会对图标的显示造成影响,但是!!!,如果你不写,你后面手动关闭应用或者调用主进程的一些api可能会没有哦.所以还是得加上.

二.图标不显示或显示不全

一般这个问题发生在打包后,运行软件,会发现窗口左上角的图标和电脑下面的任务栏那里的图标显示不全.为什么呢.因为可能是你的ico图片太大了,一般的ioc图标大小应该是小于1M并且是256*256分辨率的.你可以看一下你的图片大小.如果超了,可以用第一步那个方法修改大小及分辨率

三.影藏默认菜单栏

一般在开发的时候可以打开默认菜单栏,但是打包后就不需要默认的菜单栏了,这时我们可以影藏

  const win = new BrowserWindow({
    autoHideMenuBar: true, // 影藏菜单栏
  })

四.开机自启

开机自启就是电脑开机的时候自动启动该软件
写在background.js里面,主进程里面

app.setLoginItemSettings({
  // 设置为true注册开机自起
  openAtLogin: true, //win
  openAsHidden: true,  //macOs
  path: process.execPath,
  args: [], 
});

五.手动或被动关闭应用

这两个关闭都是在你没有开f12的前提下,才可以关闭
手动关闭:
就是自己点击右上角的×关闭,这个应用自带的都有
被动关闭:
点击右上角的×或者一个点击事件,弹一个窗口,二次确认是否关闭该应用

监听点击×关闭之前的判断.

mounted() {
	window.onbeforeunload = (e) => {
	    e.returnValue = false; // 阻止默认点关闭事件,不写会直接走默认的退出
		setTimeout(() => { // 定时器主要是防止模态框中的图片不显示
			this.closeDialogVisible = true // 开启模态框
		})
		return
	}
}

开启模态框,弹窗是否确认关闭当前应用

	// 确认
    closeConfirm() {
      // 向主进程发送close信息
      require('electron').ipcRenderer.send('window-close')
    },
    // 取消
    cancle() {
      this.closeDialogVisible = false // 关闭模态框
    },

如果点击了确认,则向主进程发送一个关闭应用信息

import { ipcMain } from 'electron'
async function createWindow() {
  //const win = new BrowserWindow({
  //  width: 1920,
  //  height: 1080,
  //  webPreferences: {
  //    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
  //    contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
  //  },
  //  icon: './public/img/title.ico',// 图标
  //  autoHideMenuBar: true, // 影藏菜单栏
  //})

  //if (process.env.WEBPACK_DEV_SERVER_URL) {
  //  await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
  //  if (!process.env.IS_TEST) win.webContents.openDevTools()
  //} else {
  //  createProtocol('app')
  //  win.loadURL('app://./index.html')
  //}

  //自动关闭app
  ipcMain.on('window-close',()=>{
    win.close();
   // win.destroy(); // 如果close不行,就用destroy
  }) 
}

------------2023-11-01更新-------------

六.最大化、全屏展示(相当于按F11)

都在background.js中修改
1最大化

win = new BrowserWindow({xxx})
// 主要就是下面这行
win.maximize()

2,全屏展示,相当于一开始运行自动帮你按了F11

win = new BrowserWindow({fullscreen: true})

七.修改左上角应用名称

在任意文件中打印 document.title就是一样名称了

ok.目前就这么多.后续碰到新的需求再补充.