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

---

---

前言

前面已经讲解过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、教程需求，都可以联系博主，博主会视精力更新，免费的羊毛，不薅白不薅！~