electron-updater实现electron全量更新和增量更新——渲染进程交互部分

同学们可以私信我加入学习群!


正文开始

  • 前言
  • 更新功能所有文章汇总
  • 一、监听页面渲染完毕
    • 1.1 myApi.handleCheckPcUpdate检查更新
    • 1.2myApi.onPcUpdateProgress接收下载信息
    • 1.3myApi.onPcDownloaded监听下载完毕事件
  • 二、立即更新
  • 三、跳过更新
  • 四、打开更新模块
  • 总结


前言

前面已经讲解过electron更新功能的主进程实现、渲染进程UI样式实现、调试更新功能技巧。这篇文章讲解渲染进程的交互逻辑。前端很多交互逻辑都和主进程、UI渲染有关,阅读本文前,建议先行查阅前面的文章。

我们在讲解更新模块的主进程时,提出过更新的完整设计:

第一步:页面渲染完毕,并询问主进程,是否有更新?
第二步:主进程检查更新,并反馈给页面,有更新/无更新。
第三步:如果无更新,页面直接显示提示信息。如果有更新,页面产生交互逻辑,将决定权交给用户,用户决定是否更新。
第四步:用户点击更新,页面将指令发送给主进程,主进程开始执行更新。

现在我们就需要根据上面的过程,实现前端交互。

更新功能所有文章汇总

  1. electron-updater实现electron全量更新和增量更新——主进程部分
  2. electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
  3. electron-updater实现electron全量更新和增量更新——渲染进程UI部分
  4. electron-updater实现electron全量更新和增量更新——渲染进程交互部分

一、监听页面渲染完毕

onMounted(() => {
// debuggermyApi.handleCheckPcUpdate().then(res=>{setNeedUpdate(res.success && res.needUpdate)setIsDownloading(res.success && res.isDownloading)hasCheckRs.value=truecheckRs.value=res.msg || ''if(res.success && res.needUpdate && res.version!=getLocalStorage('ignoreVersion') && route.name=='login'){setShowUpdate(true)}else if(!res.success && route.name=='login'){console.log(res)// hasCheckRs.value=truecheckRs.value=res.msg || '找不到更新资源,更新失败,请通过小程序联系管理员'}})myApi.onPcUpdateProgress((_event, info) => {// debuggerupdate_info.value = info})myApi.onPcDownloaded(() => {update_info.value = {}setShowUpdate(false)gsap.killTweensOf(".particle");particlesList.value.forEach((particle, index) => {// 使用GSAP创建动画gsap.killTweensOf(particleRefs.value[index]);})Modal.confirm({title: '提示',content: '新版本已下载,是否立即安装?',onOk: () => {myApi.toPcInstall()},onCancel: () => {// 取消操作}})})})

1.1 myApi.handleCheckPcUpdate检查更新

页面渲染完毕时,就通过调用myApi.handleCheckPcUpdate方法,主动检查一次更新,对应的preload代码如下:

const handleCheckPcUpdate=async () => {let files = await ipcRenderer.invoke('check-pc-update')return files // 返回结果
}

'check-pc-update’对应的主进程代码在前文讲解过,是一个双向通信。

1.2myApi.onPcUpdateProgress接收下载信息

myApi.onPcUpdateProgress是在被动接收主进程发来的信息,是一个单向通信,对应的preload代码如下:

const onPcUpdateProgress=(callback) => ipcRenderer.on('pc-update-progress', callback)

'pc-update-progress’对应的主进程代码在前文讲解过,这是一个单向通信,主进程到渲染进程。

1.3myApi.onPcDownloaded监听下载完毕事件

在这里主要做的是初始化下载信息、关闭窗口、关闭gsap注册的动画、提示是否安装。如果用户确认安装,则调用myApi.toPcInstall()方法,myApi.toPcInstall()对应的preload方法是:

const toPcInstall= () => ipcRenderer.invoke('pc-install')

'pc-install’对应的主进程代码在前文奖结果,主要是打开自动安装属性,并检查更新并安装。这里可以是单向通信,我懒得改了。

二、立即更新

在这里插入图片描述

点击立即更新,调用startUpdate,创建粒子动画,并且调用执行更新的方法。

    function startUpdate() {createParticle(200)setTimeout(() => {createAnimation()myApi.handlePcToUpdate()}, 100)}

三、跳过更新

点击跳过更新,调用pauseUpdate,关闭窗口,并且调用检查更新的方法,得到版本号,将版本号记录在浏览器缓存。

    async function pauseUpdate() {setShowUpdate(false)myApi.handleCheckPcUpdate().then(res=>{setLocalStorage('ignoreVersion', res.version)})}

在onMounted中,myApi.handleCheckPcUpdate()方法调用成功后,会判断ignoreVersion,以此来判断是否在页面渲染后,显示更新模块。

四、打开更新模块

跳过更新后,还需要给用户一个能打开更新模块的途径。
在这里插入图片描述
点击图片里的下载按钮,就会通过调用setShowUpdate,打开更新。

   setShowUpdate(value){this.showUpdate=value},

如果在登录页面关闭的弹框已经开始更新任务,那么这里应该也显示相同的进度。这就要求全局只有一个更新组件UpdateProgress.vue。并且这个组件的状态在不同的页面都有控制。

这就是典型的全局状态管理应用场景。所以组件的needUpdate(是否需要更新)、showUpdate(显示更新弹框)、version(软件版本号)、isDownloading(是否正在下载)就都维护在全局状态管理文件store/update.js中。

    state:()=>({// 是否需要更新needUpdate:false,showUpdate:false,version:0,isDownloading:false}),

当软件需要更新,或者软件正在更新时,则标题栏显示那个下载图标,代码如下:

     <template v-if="getNeedUpdate() || getIsdownloading()"><Icon id="update-arrow" color="#ff9900" style="cursor: pointer" type="md-download" @click="setShowUpdate(true)"/></template>

总结

本文主要是讲解了更新模块的页面交互实现,至此,更新功能的主进程、渲染进程、调试技巧就都告一段落。在开发更新模块的过程中,需要经常操作nginx部署文件服务器,修改参数更新服务等操作,博主开发的中二少年工具箱中的nginx管理工具提供了很大帮助。简单地点点按钮,就能打开部署文件夹、修改下载速率、打开站点查看服务启动情况。

大家如果需要联系博主,或者获取博主各系列文章对应的资源,可以通过私信博主来获取。

有任何前端项目、demo、教程需求,都可以联系博主,博主会视精力更新,免费的羊毛,不薅白不薅!~

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

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

相关文章

vtkConnectivityFilter提取连通区域中的问题

直接使用vtkConnectivityFilter提取连通区域&#xff0c;渲染上没问题&#xff0c;但是打印出polydata中的点数&#xff0c;发现跟原始数据是一致的。 for (int i 0; i < numRegions; i){vtkSmartPointer<vtkConnectivityFilter> connectivityFilter vtkSmartPointe…

Unknown input format pdf Pandoc can convert to PDF, but not from PDF.解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

口碑好的可视耳勺:四款口碑超好产品种草分享

随着科技的进步&#xff0c;越来越多人使用可视耳勺&#xff0c;因为它能够清晰地看到耳道内的状况&#xff0c;从而实现更精准、更安全的清洁。 然而&#xff0c;如今可视耳勺市场产品参差不齐&#xff0c;产品的评价褒贬参半。有的产品声称有超高像素&#xff0c;可实际到手画…

谷歌25亿美金收购Character AI的幕后故事

在科技领域中&#xff0c;并购交易无疑是推动技术发展的重要手段之一。最近&#xff0c;谷歌以25亿美金的对价收购了Character AI&#xff0c;这一交易的方式和细节引起了广泛关注。本文将详细解析谷歌这一奇葩交易方式&#xff0c;探讨其背后的动机和影响。 一、交易背景 1.…

程序员短视频上瘾综合症

一、是你疯了还是面试官疯了&#xff1f; ​ 最近有两个学员咨询问题&#xff0c;把我给整得苦笑不得。大家来看看&#xff0c;你有没有同样的症状。 ​ 第一个学员说去一家公司面试&#xff0c;第一轮面试聊得挺好的。第二轮面试自我感觉良好&#xff0c;但是被面试官给Diss…

《计算机组成原理》(第3版)第3章 系统总线 复习笔记

第3章 系统总线 一、总线的基本概念 总线是连接多个部件的信息传输线&#xff0c;是各部件共享的传输介质&#xff0c;如图3-1所示。 图3-1 面向CPU的双总线结构框图 倘若将CPU、主存和I/O设备都挂到一组总线上&#xff0c;便形成单总线结构的计算机&#xff0c;如图3-2所示…

【Linux 驱动】IMX6ULL input驱动

1. input子系统介绍 input 子系统分为 input 驱动层、input 核心层、input 事件处理层&#xff0c;最终给用户空间提供可访问的设备节点。 驱动层&#xff1a;输入设备的具体驱动程序&#xff0c;比如按键驱动程序&#xff0c;向内核层报告输入内容核心层&#xff1a;承上启下…

OpenCV图像滤波(5)二维卷积滤波函数filter2D()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::filter2D() 函数用于对图像应用二维卷积滤波器。这个函数可以用来实现多种图像处理操作&#xff0c;如模糊、锐化、边缘检测等。它通过将一个…

stm32应用、项目、调试

主要记录实际使用中的一些注意点。 1.LCD1602 电路图&#xff1a; 看手册&#xff1a;电源和背光可以使用5v或者3.3v&#xff0c;数据和控制引脚直接和单片机引脚连接即可。 单片机型号&#xff1a;stm32c031c6t6 可以直接使用推完输出连接D0--D7,RS,EN,RW引脚&#xff0c;3…

Linux--网络层IP

IP协议 IP协议&#xff0c;全称Internet Protocol&#xff08;互联网协议&#xff09;&#xff0c;是TCP/IP协议族中的核心协议之一&#xff0c;用于在互联网络上进行数据的传输。IP协议的主要功能是确保数据从一个网络节点&#xff08;如计算机、服务器、路由器等&#xff09…

OpenDataLab:人工智能开放数据平台

作者&#xff1a;CSDN _养乐多_ 本文将介绍一个人工智能开放数据平台&#xff0c;OpenDataLab。 文章目录 一、OpenDataLab介绍二、下载 一、OpenDataLab介绍 官网链接&#xff1a; OpenDataLab&#xff1a;https://opendatalab.com/ 这里面有很多数据集&#xff0c;包括计…

CCIA2024“网络安全优秀创新成果大赛-哈尔滨分站赛”优胜奖,花落谁家?

近日&#xff0c;“2024 年网络安全优秀创新成果大赛 - 哈尔滨分站赛”评选结果正式公布。此次大赛由黑龙江省委网信办指导&#xff0c;中国网络安全产业联盟主办&#xff0c;哈尔滨工业大学网络空间安全学院承办。开源网安代码审核平台 CodeSec 凭借在 AI 方向的创新能力和极高…

JavaEE: 进程和线程

文章目录 进程线程的概念和区别总结如何创建线程1.继承Thread重写run2.实现Runnable重写run3.继承Thread重写run,通过匿名内部类来实现4. 实现Runnable重写run,通过匿名内部类来实现5.基于lambda表达式来创建 虚拟线程 并发编程: 通过写特殊的代码&#xff0c;把多个CPU核心都利…

Mojo使用调试工具(Visual Studio Code)详解

Visual Studio Code 的 Mojo 扩展使您可以将 VS Code 的内置调试器与 Mojo 程序一起使用。(Mojo 扩展还支持调试 C、C++ 和 Objective-C。) 有关 VS Code 调试功能的完整介绍,请参阅 Visual Studio Code 中的调试。 本文介绍了可通过 Mojo 扩展获得的功能,以及 Mojo 调试…

层次分析法(评价类问题)

目录 本文章内容来自&#xff1a; 层次分析法模型讲解(附matlab和python代码) 【数学建模快速入门】数模加油站 江北_哔哩哔哩_bilibili 一. 概念 二. 适用的问题范围 三. 层次分析法的四个步骤 四. 对应代码 本文章内容来自&#xff1a; 层次分析法模型讲解(附matlab和…

【面试题】串联所有单词的子串,找到所有符合条件的串联子串的起始索引

串联所有单词的子串&#xff0c;找到所有符合条件的串联子串的起始索引 面试学习 一、题目 串联所有单词的子串 二、解题思路 2.1 定义子串长度 所有字符串 words 的长度是相同的&#xff0c;假设为 L。那么一个有效的串联子串的总长度应该是 L * len(words)。 2.2 滑动窗…

解决Minizip压缩后解压时的头部错误问题

最近&#xff0c;在处理文件压缩的任务时&#xff0c;我遇到了一个有趣的问题。使用Minizip库进行文件压缩后&#xff0c;在解压过程中收到了一个关于"头部错误"的警告。尽管这个警告看似令人担忧&#xff0c;但解压操作最终仍然能够成功完成文件的解压。这引发了我的…

BM1反转链表[栈+头插法]

题目要求如下: 问题比较简单,就是将链表中的值进行反转即可。 一种比较简单的方式是使用栈链表的方式来实现,下面是相应的代码: #include <stdio.h> #include <stdlib.h> int arr[10001] {0}; struct ListNode* ReverseList(struct ListNode* head ) {if (head …

编译运行 Byconity

我的系统是centos&#xff0c;因此用他们的docker编译并用他们的docker-compose运行&#xff0c;以下流程亲测可跑&#xff1a; 拉取并编译 https://github.com/ByConity/ByConity/tree/master/docker/debian/dev-env 运行 https://github.com/ByConity/ByConity/blob/master/d…

Day-16 SpringBoot原理

SpingBoot原理 在前面十多天的课程当中&#xff0c;我们学习的都是web开发的技术使用&#xff0c;都是面向应用层面的&#xff0c;我们学会了怎么样去用。而我们今天所要学习的是web后端开发的最后一个篇章springboot原理篇&#xff0c;主要偏向于底层原理。 我们今天的课程安…