前言
由于目前网上的 electron-vue 库长久未更新,于是基于新版本的 electron 搭了一个 vue 脚手架,封装了通用的开机自启,自动更新,关闭按钮最小化等功能,方便大家入坑 electron
仓库
介绍
1、配置文件 src/config/index.js
const config = { isAutoOpen: true, // 开机自启 isOnlyOpen: true, // 窗口唯一 isUseTray: true, // 使用托盘 isDefineClose: true, // 自定义关闭按钮(最小化禁用关闭事件) isAutoUpdate: true, // 自动更新 updateUrl: 'http://116.85.5.71:8080/', // 检测更新地址 } export default config 复制代码
2、开机自启 src/system/initAutoOpen.js
import path from 'path' function initAutoOpen(app) { const exeName = path.basename(process.execPath) app.setLoginItemSettings({ openAtLogin: true, // 登录启动 openAsHidden: false, // mac 以隐藏方式启动 path: process.execPath, // 启动时的执行文件 args: [ '--processStart', `"${exeName}"`, ] // 命令参数 }) } export default initAutoOpen 复制代码
3、窗口唯一 src/system/initOnlyOpen.js
function initOnlyOpen(app, mainWindow) { const gotTheLock = app.requestSingleInstanceLock() if (!gotTheLock) { app.quit() } else { app.on('second-instance', (event, commandLine, workingDirectory) => { // 当运行第二个实例时,将会聚焦到mainWindow这个窗口 if (mainWindow) { if (mainWindow.isMinimized()) mainWindow.restore() mainWindow.focus() mainWindow.show() } }) } } export default initOnlyOpen 复制代码
4、右下角托盘 src/system/initUseTray.js
import { dialog } from 'electron' import electron from 'electron' // 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上. const Menu = electron.Menu; const Tray = electron.Tray; // 托盘对象 let appTray = null; function initUseTray(app, mainWindow) { let trayMenuTemplate = [ { label: '打开', click: function () { mainWindow.show(); } }, { label: '退出', click: function () { dialog.showMessageBox({ type: 'info', title: '关闭', message: '是否确认退出?', buttons: ['最小化','直接退出'] }, res => { if (res === 0) { if(mainWindow.isMinimized()){ mainWindow = null; }else{ mainWindow.minimize(); } } else { mainWindow = null; app.exit(); //exit()直接关闭客户端,不会执行quit(); } }) } } ] // 系统托盘图标 let trayIcon = __static + '/icons/icon.png' appTray = new Tray(trayIcon) //图标的上下文菜单 const contextMenu = Menu.buildFromTemplate(trayMenuTemplate) //设置此托盘图标的悬停提示内容 appTray.setToolTip('顾家移动打印客户端') //设置此图标的上下文菜单 appTray.setContextMenu(contextMenu) //单击右下角小图标显示应用 appTray.on('click',function(){ mainWindow.show(); }) } export default initUseTray 复制代码
5、禁用关闭 src/system/initDefineClose.js
function initDefineClose(app, mainWindow) { mainWindow.on('close', (e) => { e.preventDefault(); // 阻止默认行为 if (mainWindow.isMinimized()){ mainWindow = null; } else { mainWindow.minimize(); } }) } export default initDefineClose 复制代码
6、自动更新 src/system/initAutoUpdate.js
import { autoUpdater } from "electron-updater" import { ipcMain } from 'electron' function initAutoUpdate(app, mainWindow, updateUrl) { // 设置更新地址 autoUpdater.setFeedURL(updateUrl) // 通过main进程发送事件给renderer进程,提示更新信息 function sendUpdateMessage(text) { mainWindow.webContents.send('message', text) } // 更新状态 const returnData = { error: { status: -1, msg: '检测更新查询异常' }, checking: { status: 0, msg: '正在检查应用程序更新' }, updateAva: { status: 1, msg: '检测到新版本,正在下载,请稍后' }, updateNotAva: { status: -2, msg: '您现在使用的版本为最新版本,无需更新!' }, } // 更新错误 autoUpdater.on('error', function (error) { sendUpdateMessage(error) }) //检查中 autoUpdater.on('checking-for-update', () => { sendUpdateMessage(returnData.checking) }) //发现新版本 autoUpdater.on('update-available', function (info) { sendUpdateMessage(returnData.updateAva) }) //当前版本为最新版本 autoUpdater.on('update-not-available', function (info) { setTimeout(function () { sendUpdateMessage(returnData.updateNotAva) }, 1000); }) // 更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { setTimeout(function () { sendUpdateMessage(100) }, 1000); mainWindow.webContents.send('downloadProgress', progressObj) }) // 下载成功回调 autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on('isUpdateNow', (e, arg) => { //some code here to handle event autoUpdater.quitAndInstall(); }); mainWindow.webContents.send('isUpdateNow') }) //执行自动更新检查 ipcMain.on('checkForUpdate', (event, res) => { console.log('执行更新') autoUpdater.checkForUpdates() }) } export default initAutoUpdate