同学们可以私信我加入学习群!
正文开始
- 前言
- 更新功能所有文章汇总
- 一、监听页面渲染完毕
- 1.1 myApi.handleCheckPcUpdate检查更新
- 1.2myApi.onPcUpdateProgress接收下载信息
- 1.3myApi.onPcDownloaded监听下载完毕事件
- 二、立即更新
- 三、跳过更新
- 四、打开更新模块
- 总结
前言
前面已经讲解过electron更新功能的主进程实现、渲染进程UI样式实现、调试更新功能技巧。这篇文章讲解渲染进程的交互逻辑。前端很多交互逻辑都和主进程、UI渲染有关,阅读本文前,建议先行查阅前面的文章。
我们在讲解更新模块的主进程时,提出过更新的完整设计:
第一步:页面渲染完毕,并询问主进程,是否有更新?
第二步:主进程检查更新,并反馈给页面,有更新/无更新。
第三步:如果无更新,页面直接显示提示信息。如果有更新,页面产生交互逻辑,将决定权交给用户,用户决定是否更新。
第四步:用户点击更新,页面将指令发送给主进程,主进程开始执行更新。
现在我们就需要根据上面的过程,实现前端交互。
更新功能所有文章汇总
- electron-updater实现electron全量更新和增量更新——主进程部分
- electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
- electron-updater实现electron全量更新和增量更新——渲染进程UI部分
- 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、教程需求,都可以联系博主,博主会视精力更新,免费的羊毛,不薅白不薅!~