一.修改桌面图标,软件图标或者窗口左上角的图标.
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, //winopenAsHidden: true, //macOspath: 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')//}//自动关闭appipcMain.on('window-close',()=>{win.close();// win.destroy(); // 如果close不行,就用destroy})
}
ok.目前就这么多.后续碰到新的需求再补充.