深入浅出实现Electron应用图片下载无感更新渲染进程视图

大小小丹

已于 2023-03-29 21:52:02 修改

阅读量942

点赞数

分类专栏： Electron 工具文章标签： Electron 图片下载

于 2021-04-30 10:55:15 首次发布

本文链接：https://blog.csdn.net/baidu_30907803/article/details/116295090

版权

Electron 同时被 2 个专栏收录

13 篇文章 68 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

工具

15 篇文章 3 订阅

订阅专栏

本文详细介绍了如何在Electron应用中实现在后台无缝更新背景图片。通过Vue项目集成websocket监听更新推送，然后利用ipc通信将消息传递给Electron主进程。主进程调用服务下载图片并替换Vue编译后的img文件夹内图片，同时封装了文件操作方法以实现无感刷新视图。

摘要由CSDN通过智能技术生成

需求：应用在使用过程中，在后台更新应用的背景图片，这时候应用接收更新推送后实现背景图片的下载和实时更新视图。

难点：

1、图片下载

2、无感刷新背景图片

3、websocket推送

项目架构：Electron + Vue编译后dist文件作为渲染进程视图

解决思路：

1、Vue项目中配置websocket推送监听

 // 初始化weosocket
function initWebSocket () {
  let wsurl = `${type}://${url}/xxxxx/websocket?code=${code唯一标识}`
  if (websocket) {
    websocket.close()
    websocket = null
  }
  websocket = new WebSocket(wsurl)
  websocket.onmessage = websocketonmessage
  websocket.onopen = websocketonopen
  websocket.onerror = websocketonerror
  websocket.onclose = websocketclose
}
// 连接成功事件
function websocketonopen () {
  console.log('连接成功，开启心跳')
  reconnectCount = 0 // 重