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

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



前言

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

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

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

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

更新功能所有文章汇总

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

一、监听页面渲染完毕

onMounted(() => {
// debugger
        myApi.handleCheckPcUpdate().then(res=>{

            setNeedUpdate(res.success && res.needUpdate)
            setIsDownloading(res.success && res.isDownloading)
            hasCheckRs.value=true
            checkRs.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=true
                checkRs.value=res.msg || '找不到更新资源,更新失败,请通过小程序联系管理员'
            }
        })
        myApi.onPcUpdateProgress((_event, info) => {
            // debugger
            update_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、教程需求,都可以联系博主,博主会视精力更新,免费的羊毛,不薅白不薅!~

  • 14
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中二少年学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值