electron-vue的一些使用方法和遇到的问题及解决方案
修改打包后的应用名称和修改应用icon// 修改应用名称:在package.json中修改productName的名称即可`在这里插入代码片`"productName": '应用名称'// 修改应用icon:在.electron-vue中的build.config.js中修改icon的地址即可icon: path.join(__dirname, '../build/icons/xxx')...
·
1.修改打包后的应用名称和修改应用icon
// 修改应用名称:在package.json中修改productName的名称即可`在这里插入代码片`
"productName": '应用名称'
// 修改应用icon:在.electron-vue中的build.config.js中修改icon的地址即可
icon: path.join(__dirname, '../build/icons/xxx')
2.最小化到托盘中
// 在src/main/index.js中修改
import { app, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
const path = require('path');
// 托盘对象
var appTray = null;
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, './static').replace(/\\/g, '\\\\')
}
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow() {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 390,
useContentSize: true,
width: 402,
transparent: true, // 透明 要想实现打开客户端后显示透明效果 要默认关闭控制台
frame: false, // 是否拖拽
resizable: false, // 是否缩放
skipTaskbar: true //是否隐藏任务栏中的应用图标
})
// 打开控制台
mainWindow.webContents.openDevTools()
// 关闭控制台
// mainWindow.webContents.closeDevTools()
ipcMain.on('min', e => mainWindow.minimize()) //监听自定义的最小化方法
// 系统托盘右键菜单
var trayMenuTemplate = [
{
'label': '设置',
click: function () { }
},
{
'label': '帮助',
click: function () { }
},
{
'label': '退出',
click: function () { mainWindow.close() } //关闭客户端
}
]
//系统托盘图标目录
appTray = new Tray(path.join(__dirname, '../../static/icon.ico')) // 引入托盘中的小图标本地测试相对路径
// appTray = new Tray(path.join(__dirname, '/static/icon.ico')) // 打包使用绝对路径
//图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
appTray.setContextMenu(contextMenu);
// 点击托盘中的图标显示客户端
appTray.on('click', function () {
mainWindow.show();
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
3.设置开机自启动
// 在主进程中添加代码
const path = require('path');
const ex = process.execPath;
const updateExe = path.resolve(ex, '..', 'xxx.exe') 打包后生成的exe文件
const exeName = path.basename(process.execPath)
// 开机自启动
// ipcMain.on('openAutoStart', () => {
app.setLoginItemSettings({
openAtLogin: true,
openAsHidden: true,
path: updateExe,
args: [
'--processStart', `"${exeName}"`,
'--process-start-args', `"--hidden"`
]
});
遇到的问题:
1.以为业务需要需要右键托盘中的图标显示菜单并调用接口,但是在主进程中不能使用js的一些方法和axios调用接口,所以写到了渲染进程中,但是开机自启动后托盘中的图标过一会就会自己消失,解决方案如下:
// 主进程中createWindow函数中添加代码
mainWindow.webContents.on('did-finish-load', function () {
mainWindow.webContents.send('ping', 'whoooooooh!'); //主进程发送消息ping
});
// 渲染进程中去使用这个方法并把托盘代码放到这个方法中
// 托盘开始
let appTray = null;
electron.ipcRenderer.on('ping', function (event, message) {
// appTray = new electron.remote.Tray(path.join(__dirname, '../../static/icon.ico'))
appTray = new electron.remote.Tray(path.join(__dirname, '/static/icon.ico'))
// 系统托盘右键菜单
var trayMenuTemplate = [
]
let contextMenu = electron.remote.Menu.buildFromTemplate(trayMenuTemplate);
appTray.setContextMenu(contextMenu);
appTray.setToolTip('校园e点通');
appTray.on('click', function () {
electron.ipcRenderer.send('show')
})
// 托盘结束
})
更多推荐
已为社区贡献2条内容
所有评论(0)