兰甘肃网站建设,seo学徒是做什么,购物网站建设教程,wordpress博客卡1、官网demo下载地址
点击下载 按照官网demo说明文档进行安装和运行
2、添加electron-updater
npm install electron-updater根据项目需求安装对应的版本#xff0c;建议使用5.2.1
3、创建一个handleUpdater.js文件#xff0c;和package.json同级
// const { ipcMain } …1、官网demo下载地址
点击下载 按照官网demo说明文档进行安装和运行
2、添加electron-updater
npm install electron-updater根据项目需求安装对应的版本建议使用5.2.1
3、创建一个handleUpdater.js文件和package.json同级
// const { ipcMain } require(electron)
const { autoUpdater } require(electron-updater)
const {ipcMain, app} require(electron);
let canQuit false;
function handleUpdate(mainWindow) {console.log(版本更新检测,mainWindow)autoUpdater.setFeedURL(“填写自己项目更新地址”) // 设置下载地址function sendUpdateMessage(text) {mainWindow.webContents.send(message, text);}mainWindow.on(close, (event) {if (!canQuit) {mainWindow.hide();mainWindow.setSkipTaskbar(true);event.preventDefault();}});// 检查更新出错autoUpdater.on(error, (error) {console.log(autoUpdater-error:::, arguments)sendUpdateMessage({cmd: error,message: error,});})// 检查是否有版本更新autoUpdater.on(checking-for-update, (message) {console.log(checking-for-update:::, arguments)sendUpdateMessage({cmd: checking-for-update,message: message})})// 检测到有版本更新autoUpdater.on(update-available, (message) {console.log(update-available:::, arguments)sendUpdateMessage({cmd: update-available,message: message,});})// 未发现有新版本autoUpdater.on(update-not-available, (message) {console.log(update-not-available:::, arguments)sendUpdateMessage({cmd: update-not-available,message: message,});})// 更新下载进度事件autoUpdater.on(download-progress, progressObj {console.log(download-progress:::, progressObj)sendUpdateMessage({cmd: download-progress,message: progressObj,});})// 下载完成询问用户是否更新autoUpdater.on(update-downloaded, ( event, releaseNotes, releaseName, releaseDate, updateUrl) {console.log(update-downloaded::: 下载完成询问用户是否更新)sendUpdateMessage({cmd: update-downloaded,message: {releaseNotes,releaseName,releaseDate,updateUrl,},});// autoUpdater.quitAndInstall();})//接收渲染进程消息开始检查更新ipcMain.on(checkForUpdate, () {console.log(接收渲染进程消息开始检查更新)//执行自动更新检查// sendUpdateMessage({cmd:checkForUpdate,message:arg})autoUpdater.checkForUpdates();});ipcMain.on(quitAndInstall, () {console.log(接收渲染进程信息是否立即更新)autoUpdater.quitAndInstall();});//接收渲染进程信息是否立即更新// ipcMain.on(quitAndInstall, () {// console.log(接收渲染进程信息是否立即更新)// autoUpdater.quitAndInstall();// });// 手动下载更新文件// ipcMain.on(confirmDownloadUpdate, () {// console.log(手动下载)// autoUpdater.downloadUpdate();// });
}module.exports {handleUpdate
}
4、创建更新页面updater.vue
templateel-dialog:titlepercentage 100 ? 下载完成 : 正在下载新版本,请稍候...:visible.syncdialogVisiblewidth500px:close-on-click-modalcloseOnClickModal:close-on-press-escapecloseOnPressEscape:show-closeshowClosecenterdivstylewidth: 100%; height: 50px; line-height: 50px; text-align: centerel-progressstatussuccess:text-insidetrue:stroke-width20:percentagepercentage:widthstrokeWidth:show-texttrue/el-progress/div/el-dialog
/template
script
let { ipcRenderer } window.require(electron);
import config from ../../package.json
import { getAuthToken, removeAuthToken } from /utils/auth
import { logout } from /api/index
export default {data() {return {dialogVisible: false,//是否打开弹窗closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxshowClose: false,//是否显示关闭按钮percentage: 0,//进度条进度strokeWidth: 200,//进度条的厚度confirmShowClose: false,//是否显示右上角关闭按钮confirmShowCancelButton: false,//是否显示取消按钮forcedUpdating: false,//是否需要强制更新timeOut: null,interval: null}},mounted() {//接收主进程版本更新消息ipcRenderer.on(message, (event, arg) {//监听息屏或者睡眠状态if (lock-screen arg.cmd) {this.handleLogout()} else if (update-available arg.cmd) {console.log(监听发现可用更新事件)//监听发现可用更新事件判断是否在login页面也可以选择不需要判断页面自己进行更新if (this.$route.name ! login) {this.$Bus.$emit(uploadVersion)} else {this.$notify({title: 更新提示,message: 有新版本发现即将开始更新});this.dialogVisible true;// 这里是当有新版本发现时出现弹框进行确认是否需要更新// this.updateAvailable(arg)}} else if (download-progress arg.cmd) {// 更新下载进度事件this.downloadProgress(arg)} else if (error arg.cmd) {console.log(监听升级失败事件)//监听升级失败事件this.error(arg)} else if (update-downloaded arg.cmd) {console.log(监听下载完成事件)//监听下载完成事件this.updateDownloaded(arg)}});//2秒后开始检测新版本this.timeOut window.setTimeout(() {console.log(2222)ipcRenderer.send(checkForUpdate);}, 2000);this.interval window.setInterval(() {ipcRenderer.send(checkForUpdate);}, 1800000);this.$Bus.$off(headerUplaod).$on(headerUplaod, () {ipcRenderer.send(checkForUpdate);})},methods: {/* 登出 */handleLogout() {if (this.$route.name ! login) {logout(JSON.parse(getAuthToken(userInfo)).userName).then(() {removeAuthToken(userInfo)removeAuthToken(deptInfo)this.$router.push(/login)this.$Bus.$emit(closeSocket)})}},//监听发现可用更新事件updateAvailable(arg) {let text//根据版本号来判断是否需要强制更新if (arg.message) {let A config.version.split(.)[0]; // 本地版本号let a arg.message.version.split(.)[0]; // 服务器安装包版本号let B config.version.split(.)[1];let b arg.message.version.split(.)[1];//如果版本号的第一位或者第二位是和目前的版本号不一样就需要强制更新if (a A || b B) {text 发现新版本,需要立即更新才能使用this.confirmShowClose false //是否显示右上角关闭按钮this.confirmShowCancelButton false //是否显示取消按钮this.forcedUpdating true //强制更新} else {text 发现新版本,是否下载新版本?this.forcedUpdating false //寻求用户是否需要更新}}//显示升级对话框this.$confirm(text, 提示, {showClose: this.confirmShowClose,//是否显示右上角关闭按钮showCancelButton: this.confirmShowCancelButton,//是否显示取消按钮closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxconfirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.dialogVisible true; //打开安装白下载进度弹窗ipcRenderer.send(confirmDownloadUpdate); // 手动下载更新文件}).catch(() {});},// 更新下载进度事件downloadProgress(arg) {//更新升级进度// this.dialogVisible true; //关闭弹窗let percent Math.round(parseFloat(arg.message.percent));console.log(更新升级进度---percent)this.percentage percent;},//监听升级失败事件error(arg) {this.dialogVisible false; //关闭弹窗console.log(更新失败);},//监听下载完成事件updateDownloaded() {//有时候网速太快会跳过获取进度这里进度加个判断手动设置获取更新进度this.percentage this.percentage ! 100 ? 100 : this.percentage//如果需要强制更新的就不需要再询问客户是否安装// console.log(this.forcedUpdating);if (this.forcedUpdating) {ipcRenderer.send(quitAndInstall); //退出并安装更新包} else {this.$confirm(下载完成是否立即更新?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxtype: warning}).then(() {ipcRenderer.send(quitAndInstall); //退出并安装更新包}).catch(() {this.dialogVisible false; //关闭弹窗this.$message({type: info,message: 已取消更新});});}}},destroyed() {//清除定时器window.clearTimeout(this.timeOut);window.clearTimeout(this.interval);}
}
/script
1、本地运行皆为正常但是打包后客户端安装后报错cannot find modulee ‘electron-updater’ 原因打包时未将electron-updater进行打包 解决办法在package.json文件中找到build在extraFiles里面添加‘node_modules/electron-updater/’后续出现这种问题根据提示完成插件的添加 build: {asar: true,asarUnpack: **\\*.{node,dll},productName: police,appId: com.tencent.trtc-electron-simple-demo,icon: public/info-avatar.ico,directories: {output: ./bin},publish: [{provider: generic,url: https://jqga.jqwjw.cn/clientupdate/}],win: {target: [nsis,zip],extraFiles: [{from: node_modules/trtc-electron-sdk/build/Release/,to: ./resources,filter: [**/*]},// 主要代码{from: node_modules/electron-updater/,to: ./resources/node_modules/electron-updater,filter: [**/*]},]},files: [dist/**/*,*.js,!node_modules]},在vue项目中使用let { ipcRenderer } require(“electron”);必须在前面添加window.不然会提示fs.existsSync is not function 仅仅为个人记录不喜勿喷
