第一步:安装对应的插件
npm i electron-updater --save-dev
服务器端需要上传这三个文件 使用electron-builder打包时候会自动生成。
地址为:https://www.xxx.com/uploadeducation
ele.js //注:electron.js
const {app, BrowserWindow, Menu ,ipcMain } = require('electron');
const { autoUpdater } = require("electron-updater");
const path = require('path');
const url = require('url');
// ele.js
// app.commandLine.appendSwitch('ignore-certificate-errors') // 忽略检测证书
// autoUpdater.updateConfigPath = path.join(__dirname, './dist/win-ia32-unpacked/resources/app-update.yml') //本地环境用这个路径(就是electron . 启动预览的是)
autoUpdater.updateConfigPath = path.join(__dirname, '../app-update.yml') // 打包以后用这个路径
const feedUrl = `https://www.xxx.com/uploadeducation`; // 更新包位置
autoUpdater.setFeedURL(feedUrl);
let message = {
error: '检查更新出错',
checking: '正在检查更新……',
updateAva: '检测到新版本,正在下载……',
updateNotAva: '现在使用的就是最新版本,不用更新',
};
autoUpdater.on('error', function (error) {
// sendUpdateMessage(message.error)
sendUpdateMessage(error)
});
autoUpdater.on('checking-for-update', function () {
sendUpdateMessage(message.checking)
});
autoUpdater.on('update-available', function (info) {
sendUpdateMessage(message.updateAva)
});
autoUpdater.on('update-not-available', function (info) {
sendUpdateMessage(message.updateNotAva)
});
// 更新下载进度事件
autoUpdater.on('download-progress', function (progressObj) {
console.log(progressObj)
//与渲染进程通信
mainWindow.webContents.send('downloadProgress', progressObj)
mainWindow.setProgressBar(progressObj.percent / 100);
})
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
console.log('更新完成')
ipcMain.on('isUpdateNow', (e, arg) => {
console.log("开始更新");
//some code here to handle event
autoUpdater.quitAndInstall();
});
mainWindow.webContents.send('isUpdateNow')
});
ipcMain.on("checkForUpdate",()=>{
//放外面的话启动客户端执行自动更新检查
autoUpdater.checkForUpdates();
})
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}
// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let mainWindow;
ipcMain.on('closeWindow',function(){
app.exit(0);
})
function createWindow () {
//隐藏关闭放大缩小最外层菜单栏目
Menu.setApplicationMenu(null);
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
title: '这里是软件名称',
alwaysOnTop:true,//是否总是现在在最前面
fullscreen:true,//是否全屏
webPreferences:{
nodeIntegration: true, // 是否集成 Nodejs
webSecurity: false,
textAreasAreResizable :false,
contextIsolation: false
},
// width: 1320,
// height: 744,
icon: __dirname + './static/edu.ico', //这个是引入的icon
});
// 然后加载应用的 index.html。
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './unpackage/dist/build/h5/index.html'),
// protocol: 'file:',
// slashes: true
}))
// mainWindow.webContents.openDevTools()
//引用外部文件
// mainWindow.loadURL(`http://localhost:8080/#/`);
// 加载应用的 index.html
// mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开开发者工具。
//mainWindow.webContents.openDevTools();
// 打开开发工具
// mainWindow.openDevTools();
// 当 window 被关闭,这个事件会被触发。
mainWindow.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
mainWindow = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (mainWindow === null) {
createWindow()
}
})
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入
在VUE页面使用
// 检测更新
updateFile:function(){
this.ipc.send("checkForUpdate");
this.ipc.on("message", (event, text) => {
console.log(text);
console.log(event);
if('检测到新版本,正在下载……' == text){
//这里执行更新逻辑 比如显示更新UI界面啥的
this.centerDialogVisible = true;
}
});
this.ipc.on("downloadProgress", (event, progressObj)=> {
console.log(progressObj);
//这里执行更新回调,比如当前进度 百分之2.5
this.progress = progressObj.percent.toFixed(2);
});
this.ipc.on("isUpdateNow", () => {
this.ipc.send("isUpdateNow");
});
},
},
created() {
if(this.eleEnv){ //Vue.prototype.eleEnv = true //默认是electron环境
this.updateFile();
}
this.getshowHttp();
}
package.json
{
"name": "education",
"version": "0.0.1",//服务器端 版本号要大于本地才会触发更新
"description": "这里是名字",
"main": "ele.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dist": "electron-builder --win --ia32",
"package": "electron-packager . electronName --win --out distP --arch=ia32 --electron-version 1.4.14 --overwrite --ignore=node_modules --icon=./static/edu.ico"
},
"build": {
"productName": "education",
"appId": "com.Ambition.com",
"copyright": "Ambition",
"directories": {
"output": "dist"
},
"publish": [
{
"provider": "generic",
"url": "https://www.xxx.com/uploadeducation"
}
],
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./static/edu.ico",
"uninstallerIcon": "./static/edu.ico",
"installerHeaderIcon": "./static/edu.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "shortcutName"
},
"win": {
"icon": "./static/edu.ico",
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
}
},
"dependencies": {
"electron-updater": "^4.3.9"
},
"devDependencies": {
"electron": "15.1.2",
"electron-builder": "^22.13.1",
"electron-devtools-installer": "^3.2.0"
},
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/"
},
"author": "DW",
"license": "ISC"
}