electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

文章目录

    • 引入
    • 实现效果
    • 实现步骤
      • 引入依赖
      • 配置electron-buidler文件
      • 封装版本升级工具类
      • 主进程调用版本更新校验
      • 渲染进程封装方法调用
    • 测试版本更新

引入

demo项目地址

electron-updater官网

我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能

实现效果

electron自动更新

实现步骤

引入依赖

  • 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖
npm i electron-updater    

配置electron-buidler文件

我们修改根目录下的electron-buidler文件,补充安装包更新地址配置

  • electron-builder.json5
{...// 配置安装包更新地址publish: [{provider: "generic",url: "http://common.longzipeng.online/package/auto",},],
}

请添加图片描述

封装版本升级工具类

封装一个appVersion工具类

  • electron\main\appVersion.ts
  • 这里注意updateUrl就是存放我们安装包的远程服务器的地址【可以是nginx服务器,也可以是第三方云存储OSS】,我这里还会放mac和win两个目录,用于不同平台的自动更新
import { autoUpdater } from 'electron-updater';
import { dialog, BrowserWindow } from 'electron';const updateUrl = 'http://common.longzipeng.online/package/auto';/**检测更新 */
export const checkUpdate = (win: BrowserWindow) => {console.log('开始检测');// 设置更新检测的资源路径,会检测对应路径下的 last.yaml文件中的版本信息 上线后确保该文件能正常访问if (process.platform == 'darwin') {autoUpdater.setFeedURL(`${updateUrl}/mac`);return;} else {autoUpdater.setFeedURL(`${updateUrl}/win`);}//检测更新autoUpdater.checkForUpdates();//监听'error'事件autoUpdater.on('error', err => {console.log('出错拉' + err);dialog.showErrorBox('更新出错拉!', err.message);});//监听'update-available'事件,发现有新版本时触发autoUpdater.on('update-available', () => {console.log('found new version');dialog.showMessageBox({message: '发现新版本,正在下载安装包'});});// 更新包下载百分比回调autoUpdater.on('download-progress', function (progressObj) {if (win) {win.webContents.send('download-progress', progressObj);}});//默认会自动下载新版本,如果不想自动下载,设置autoUpdater.autoDownload = false// autoUpdater.autoDownload = false;//监听'update-downloaded'事件,新版本下载完成时触发autoUpdater.on('update-downloaded', () => {dialog.showMessageBox({type: 'info',title: '应用更新',message: '需要退出程序才能安装新版本,是否安装?',buttons: ['是', '否']}).then(buttonIndex => {if (buttonIndex.response == 0) {//选择是,则退出程序,安装新版本autoUpdater.quitAndInstall();}});});
};

主进程调用版本更新校验

我们在主进程中添加检测版本更新的handle处理

  • electron\main\index.ts
/**
* 版本更新检测
*/
ipcMain.handle("check-update",(e:any)=>{// 获取发送通知的渲染进程窗口const currentWin = getWindowByEvent(e);// 升级校验checkUpdate(currentWin);
});/*** 通过窗口事件获取发送者的窗口* @param event ipc发送窗口事件*/
function getWindowByEvent(event: IpcMainEvent): BrowserWindow {const webContentsId = event.sender.id;for (const currentWin of BrowserWindow.getAllWindows()) {if (currentWin.webContents.id === webContentsId) {return currentWin;}}return null;
}

渲染进程封装方法调用

  • src\utils\electronUtils.ts
/*** 检查版本更新*/
export function checkUpdate(){ipcRenderer.invoke("check-update");
}export default {...checkUpdate
};

测试版本更新

1.我们直接在HeeloWorld组件中调用封装的更新校验方法,并监听下载回调

  • src\components\HelloWorld.vue
<script>onMounted(() => {// 版本更新,下载进度回调ipcRenderer.on("download-progress",downloadProgressHandle);});// 版本更新,处理下载进度回调function downloadProgressHandle(e:any,data:any){console.log(data);}onUnmounted(() => {ipcRenderer.removeListener("download-progress",downloadProgressHandle);});
</script>
<template><li><el-button @click="electronUtils.checkUpdate">检测版本更新</el-button></li>
</template>

2.我们修改oackage.json文件,将version的版本提升

请添加图片描述

3.接着我们打包项目,在release目录下会出现一个1.0.1的文件夹,里面就是最新打包生成的文件,需要上传到服务器上的是如下两个文件

  • release\1.0.1\latest.yml
  • release\1.0.1\electron-vue3-template_1.0.1.exe
    请添加图片描述

4.把两个文件上传到服务器中,这里为了方便起见,我直接上传到七牛云的oss中

请添加图片描述

5.最后我们把package.json的版本号再调回1.0.0,然后打包,本地安装运行【只有安装好的应用,才能进行更新】

6.最终效果如下:
electron自动更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/79857.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库与数据仓库的区别及关系

数据库与数据仓库的区别及关系 数据库数据仓库异同差异联系例子 数据库 数据库是结构化信息或数据的有序集合&#xff0c;一般以电子形式存储在计算机系统中。通常由数据库管理系统 (DBMS) 来控制。它是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集…

python 合并多个excel文件

使用 openpyxl 思路&#xff1a; 读取n个excel的文件&#xff0c;存储在一个二维数组中&#xff0c;注意需要转置。将二维数组的数据写入excel。 安装软件&#xff1a; pip install openpyxl源代码&#xff1a; import os import openpyxl # 将n个excel文件数据合并到一个…

模拟实现消息队列项目(系列4) -- 服务器模块(内存管理)

目录 前言 1. 创建MemoryDataCenter 2. 封装Exchange 和 Queue方法 3. 封装Binding操作 4. 封装Message操作 4.1 封装消息中心集合messageMap 4.2 封装消息与队列的关系集合queueMessageMap的操作 5. 封装未确认消息集合waitMessage的操作 6. 从硬盘中恢复数据到内存中 7. Memo…

Leetcode 每日一题 - 删除有序数组中的重复项题 #算法 #Java

1.1 题目 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &#xff…

行业追踪,2023-08-07

自动复盘 2023-08-07 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

虹科分享 | 新时代“救命神器”:看AR眼镜如何应用于紧急救险场景

从工业时代到如今迎来的“体验时代”&#xff0c;体验即内容&#xff0c;5G、AI、空间计算技术的突破&#xff0c;为各行各业创建了丰富的内容体验模式&#xff0c;让人们能够听之、触之、与之交互。AR是体验时代最具潜力的新技术&#xff0c;在“应急”场景中更是成为了我们在…

JSP实训项目设计报告—MVC简易购物商城

JSP实训项目设计报告—MVC简易购物商城 文章目录 JSP实训项目设计报告—MVC简易购物商城设计目的设计要求设计思路系统要求单点登录模块商品展示模块购物车展示模块 概要设计Model层View层Controller层 详细设计Model层View层登录界面系统主界面 Controller层 系统运行效果项目…

云计算——ACA学习 云计算概述

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 写在前面 上章回顾 本章简介 本章目标 一.云计算产生背景 1.信息时代的重点变革…

【VUE】前端实现防篡改的水印

效果 水印的作用 图片加水印的操作一般是由后端来完成&#xff0c;有些站点保护的知识产权的类型可能比较多&#xff0c;不仅仅是图片&#xff0c;可能还有视频、文字等等&#xff0c;对于不同类型的对象添加水印后端操作比较复杂&#xff0c;所有有些站点逐步的让前端去进行水…

认识所有权

专栏简介&#xff1a;本专栏作为Rust语言的入门级的文章&#xff0c;目的是为了分享关于Rust语言的编程技巧和知识。对于Rust语言&#xff0c;虽然历史没有C、和python历史悠远&#xff0c;但是它的优点可以说是非常的多&#xff0c;既继承了C运行速度&#xff0c;还拥有了Java…

前沿分享-鱼形机器人

可能并不太前沿了&#xff0c;是21年底的新闻了&#xff0c;但是看见了就顺便发一下吧。 大概就是&#xff0c;通过在pH响应型水凝胶中编码不同的膨胀速率而构建了一种环境适应型变形微机器人,让微型机器人直接向癌细胞输送药物从而减轻药物带来副作用。 技术原理是&#xff0c…

拦截器对接口细粒度权限校验

文章目录 一、逻辑分析二、校验规则1.规则类型2.规则划分3.规则配置信息4.规则案例说明5.规则加载 三、拦截器定义1.自定义拦截器2.注册拦截器 四、获取请求参数1.获取get提交方式参数2.获取post提交方式参数&#xff08;1&#xff09;定义RequestWrapper类&#xff08;2&#…

Flink正常消费一段时间后,大量反压,看着像卡住了,但又没有报错。

文章目录 前言一、原因分析二、解决方案 前言 前面我也有提到&#xff0c;发现flink运行一段时间后&#xff0c;不再继续消费的问题。这个问题困扰了我非常久&#xff0c;一开始也很迷茫。又因为比较忙&#xff0c;所以一直没有时间能够去寻找答案&#xff0c;只是通过每天重启…

IDEA中maven项目失效,pom.xml文件橙色/橘色

IDEA中maven项目失效&#xff0c;pom.xml文件橙色/橘色 IDEA中Maven项目失效 IDEA中创建的maven项目中的文件夹都变成普通格式&#xff0c;pom.xml变成橙色 右键点击橙色的pom.xml文件&#xff0c;选择add as maven project maven项目开始重新导入相应依赖&#xff0c;恢复…

字符串查找匹配算法

概述 字符串匹配&#xff08;查找&#xff09;是字符串的一种基本操作&#xff1a;给定带匹配查询的文本串S和目标子串T&#xff0c;T也叫做模式串。在文本S中找到一个和模式T相符的子字符串&#xff0c;并返回该子字符串在文本中的位置。 暴力匹配 Brute Force Algorithm&a…

安全狗V3.512048版本绕过

安全狗安装 安全狗详细安装、遇见无此服务器解决、在windows中命令提示符中进入查看指定文件夹手动启动Apache_安全狗只支持 glibc_2.14 但是服务器是2.17_黑色地带(崛起)的博客-CSDN博客 安全狗 safedogwzApacheV3.5.exe 右键电脑右下角安全狗图标-->选择插件-->安装…

vscode中无法使用git解决方案

1 首先查看git安装目录 where git 2 找到bash.exe 的路径 比如&#xff1a;C:/Users/Wangzd/AppData/Local/Programs/Git/bin/bash 3 找到vscode的配置项setting.json 4 添加 "terminal.integrated.shell.windowns": "C:/Users/Wangzd/AppData/Local/Pr…

架构训练营学习笔记:6-2 微服务基础选型

基础选型 微服务基础设施架构 优先级 其中&#xff0c;核心 就是服务注册、服务发现、服务路由。 模式1-嵌入SDK 模式2-反向代理式 模式3-网络代理式&#xff08;Service Mesh&#xff09; 模式对比 常见微服务框架选择 嵌入SDK-dubbo Spring Cloud 反向代理式 APISIX …

跨境B2B2C多用户购物网站源码快速部署

​ 搭建跨境B2B2C多用户购物网站需要以下步骤&#xff1a; 1. 确定业务模式和定位&#xff1a;确定网站的业务模式&#xff0c;包括跨境B2B2C的商业模式以及目标用户定位。 2. 营业执照和域名注册&#xff1a;根据当地法律要求&#xff0c;注册一家具有法人资格的公司&#xff…

基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法

跨尺度预测模式&#xff08;The Model for Prediction Across Scales - MPAS&#xff09;是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发&#xff0c;其由3个部分组成&#xff0c;分别称为 MPAS-A&#xff08;大气模型&#xff09;、MPAS-O&#xff08;海洋模型&…