Electron 增加程序更新

已于 2024-05-08 09:19:35 修改
阅读量367 收藏 9
点赞数 4
文章标签： electron vue.js javascript 前端
于 2024-05-08 09:18:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39703947/article/details/138556472
版权

环境：

        electron：26.1.0

        element-ui：2.15.13

        node：14.16.1

        electron-updater: 6.1.8

！！！理论来说这次功能升级跟环境是没有关系哈。！！！

过程

增加autoUpdate.js文件

// xiaoyi 1103914483@qq.com
// autoUpdater.js
const path = require("path");
const {autoUpdater} = require("electron-updater");

module.exports = (url , win,ipcMain,app) => {
    // console.log("url ==:", url);
    // console.log("win ==:", win);
    // console.log("NODE_ENV ==:", NODE_ENV);
    // console.log("NODE_ENV ==:", process.env.NODE_ENV);
    // console.log("__dirname ==:", __dirname);

    // 设置是否自动下载，默认是true,当点击检测到新版本时，会自动下载安装包，所以设置为false
    autoUpdater.autoDownload = false

    let message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本',
        updateNotAva: '现在使用的就是最新版本，不用更新'
    }

    // latest.yml 线上
    autoUpdater.updateConfigPath = path.join(
        __dirname,
        process.env.NODE_ENV === "development" ? "latest.yml" : "../app-update.yml"
    );
    // console.log("updateConfigPath ==:", autoUpdater._appUpdateConfigPath);

    // 设置更新源url
    autoUpdater.setFeedURL(url);

    autoUpdater.checkForUpdates();

    autoUpdater.on('error', function (err) {
        sendUpdateMessage('error',err||message.error)
    })
    autoUpdater.on('checking-for-update', function () {
        sendUpdateMessage('checking-for-update',message.checking)
    })
    // 版本检测结束，准备更新
    autoUpdater.on('update-available', function (info) {
        sendUpdateMessage('update-available',message.updateAva)
    })
    autoUpdater.on('update-not-available', function (info) {
        sendUpdateMessage('update-not-available',message.updateNotAva)
    })
    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        sendUpdateMessage('download-progress',progressObj.percent)
    })
    // 下载完成
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        sendUpdateMessage('update-downloaded', '下载完成')
    })

    //没有新版本时
    autoUpdater.on("update-not-available", (_info) => {
        console.log("没有更新");
    });

    function sendUpdateMessage(name, text) {
        // 窗口对象自行修改
        win.webContents.send('UpdateMessage', {name, text})
    }


    // 触发更新检测
    ipcMain.on('checkForUpdates', () => {
        autoUpdater.checkForUpdates()
    })

    //  开始下载，通过渲染进程发起
    ipcMain.on('downloadUpdate', () => {
        autoUpdater.downloadUpdate()
    })

    //  下载完成，退出且重新安装
    ipcMain.on('updateSuccess', () => {
        // 加载更新程序
        autoUpdater.quitAndInstall()
        // 关闭当前electron
        app.quit()
    })


};

增加update.vue文件,同时需要再login页面引入update组件，以便触发更新操作，此位置可自定义操作。

<!-- xiaoyi 1103914483@qq.com-->
<template>
  <div>
    <el-dialog
        :visible.sync="modal"
        :title="'更新提醒（' + newVersion +'）'"
        width="450px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :destroy-on-close="true"
        top="25vh !important"
    >
      <p v-for='(item, index) in navJson' :key='index + "navJson"'>{{ index + 1 }}、{{ item }}</p>
      <p>{{ warning }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modal = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="download" size="mini">立即更新</el-button>
      </span>
    </el-dialog>

    <el-dialog
        :visible.sync="Progress"
        :mask-closable='false'
        :title="'正在更新（' + newVersion +'）'"
        width="400"
        :closable='false'
    >
      <el-progress :text-inside="true"
                   :stroke-width="26"
                   :percentage="percent"></el-progress>
      <div slot="footer">

      </div>
    </el-dialog>
  </div>
</template>

<script>
const {ipcRenderer} = require("electron")
import axios from 'axios'

export default {
  name: "update",
  data() {
    return {
      modal: false,
      Progress: false,
      percent: 0,
      newVersion: '0.0.0',
      isOnMessage: false,
      warning: "",
      navJson: []
    }
  },
  created() {
    this.onUpdateExe()
  },
  methods: {
    onUpdateExe() {
      if (this.isOnMessage) return
      let that = this

      axios.get(process.env.VUE_APP_UPDATE_EXE_URL + "version.json").then(r => {
        if (r.status === 200) {
          let datum = r.data[0];
          let compareVersion = that.compareVersion(datum.version, process.env.VUE_APP_VERSION);

          if (compareVersion === 0) {
            // console.log("当前版本不需要更新")
          } else if (compareVersion === 1) {
            that.modal = true
            that.newVersion = datum.version;
            that.navJson = datum.notes;
            that.warning = datum.warning;
            that.isOnMessage = true
            // console.log('收到更新版本号', res, this.navJson)

            // 自动更新过程
            ipcRenderer.on('UpdateMessage', this.updateExe.bind(this))
            // 检查是否需要更新
            ipcRenderer.send('checkForUpdates')
          }
        }
      })

    },
    updateExe(e, data) {
      // 更新提示弹窗
      if (data.name == 'update-available') {
        console.log("update-available")
        this.modal = true
      } else if (data.name == 'download-progress') {    // 下载进度
        this.percent = Math.ceil(data.text)
      } else if (data.name == 'update-downloaded') {
        this.$message.success('下载完成，准备重启')
        setTimeout(() => {
          ipcRenderer.send('updateSuccess')
        }, 2000)
      }
    },
    //开始升级
    download() {
      this.Progress = true
      ipcRenderer.send('downloadUpdate')
    },
    compareVersion(version1, version2) {
      version1 = (version1[0] === 'v' || version1[0] === 'V') ? version1.substring(1, version1.length) : version1;
      version2 = (version2[0] === 'v' || version2[0] === 'V') ? version2.substring(1, version2.length) : version2;

      const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
      const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;

      //计算版本号大小,转化大小
      function toNum(a) {
        const c = a.toString().split('.');
        const num_place = ["", "0", "00", "000", "0000"],
            r = num_place.reverse();
        for (let i = 0; i < c.length; i++) {
          const len = c[i].length;
          c[i] = r[len] + c[i];
        }
        return c.join('');
      }

      //检测版本号是否需要更新
      function checkPlugin(a, b) {
        const numA = toNum(a);
        const numB = toNum(b);
        return numA > numB ? 1 : numA < numB ? -1 : 0;
      }

      return checkPlugin(newVersion1, newVersion2);
    }
  }
}
</script>

<style lang="scss" scoped>
.ivu-modal-body {
  max-height: 120px;
  overflow-y: scroll;
  padding-top: 5px;

  p {
    line-height: 24px;
    height: 24px;
    font-size: 12px;

  }
}

.ivu-modal-footer {
  button:nth-child(1) {
    display: none;
  }
}
</style>

## 在main主线程js中增加即可 （我在package.js中指定的是background.js）
const Updater = require("./autoUpdate");


const win = new BrowserWindow({
...

Object.defineProperty(app, "isPackaged", {
        get() {
            return true;
        },
    });
Updater(process.env.VUE_APP_UPDATE_EXE_URL, win, ipcMain, app);
...
});

为了完美实现更新的过程我再项目中增加了一个version.json文件的版本控制，update.vue 会自动请求该文件获取进行对比当前是否需要更新。

[
  {
    "version": "v4.0.3",
    "git": "v1.1.0",
    "date": "2024-05-07",
    "warning": "...",
    "notes": [
      "增加自动更新程序",
    ]
  },
  {
    "version": "v4.0.2",
    "git": "v1.1.0",
    "date": "2024-05-06",
    "warning": "...",
    "notes": [
      "修复打包数据库无法本地读取",
      "修复本地端口无法修改"
    ]
  }
]

注：

  • 自行增加环境配置 process.env.VUE_APP_UPDATE_EXE_URL = https://xxx.xxx.xxx/xxx/
  • 通过electron打包后会在dist目录下生成 *.exe、latest.yml、version.json文件。当前目录下没有生成yml、和json可以参考以下配置。
  • 当打包成功后需要把*.exe、latest.yml、version.json 可将这三个文件放在可以通过连接访问的位置。
  • 自行安装electron-updater组件
## 其它主要配置已省略，请自行手动修改

electronBuilder:{  
        
    builderOptions: {
        publish: [
                    {
                        provider: "generic",
                        url: "http://xxxxxxx/download"
                    }
                ],
        extraResources: [
                {
                        from: "./version.json",
                        to: "../../version.json"
                 }
        ],
    
    }
}

配图：

因为之前已经更新过此版本，会在本地缓存此版本，所以不需要下载；可通过C:\Users\Administrator\AppData\Local\xxx\ 进行查看

至此完成所有electron操作过程，在网上也找了很多的资料都不太完整，通过自己方式进行了完善。

巧艺萌萌
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Electron桌面程序开发入门
qq_45575393的博客
03-10 388
Electron开发入门
使用 electron-builder 打包 Electron 程序
编程三昧
01-20 1946
在将 Electron 代码开发完成后，如果想要投入生产环境，那就必须经过很关键的一步——打包。
2023 electron最新最简版windows、mac打包、自动升级详解
woyebuzhidao321的博客
11-05 5627
这里我将讲解一下从0搭建一个electron最简版架子，以及如何实现打包自动化更新之前我有写过两篇文章关于electron框架概述以及 常用api的使用，感兴趣的同学可以看看。
Electron应用使用electron-updater实现自动更新
05-11
Electron基于electron-builder进行打包，运行window和Mac上,使用electron-updater实现检测更新
electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
最新发布
关注前端，关注原创
08-01 1096
最近好久不更文，一是公司的事确实很忙，二是把时间都用在开发工具上了，写文总是提不起兴趣。好消息是工具总算是憋出来几个，坏消息功能怎么实现的，代码快忘差不多了。我经常看着我写过的代码一脸茫然：这真的是我写的？？？软件目前功能汇总：svga预览、node版本管理、前端部署-nginx管理、webstorm破解、浏览器插件等。围绕这些功能，可能会重新开一个文章系列——pc工具源码系列，详细讲解它们都是怎么实现的。
electron-updater 自动更新升级应用
天问博客-专注于大前端技术
07-14 6546
electron 内置了 autoUpdater 自动更新功能，但是服务配置有些复杂，最后选择了 electron-updater 工具插件，这里就讲讲如何配置 electron-updater 来自动更新升级应用。
深入探究Electron自动更新
顺其自然~专栏
10-16 1874
Electron的自动更新功能可以让您的应用程序保持最新状态，同时提供了一种便捷的方法来解决安全漏洞和其他问题。设置自动更新的方式非常简单，只需编写一些适当的代码即可。希望本文对您有所帮助，愿您能够成功实现自动更新。深入探究Electron自动更新_笔记大全_设计学院。
Electron检测更新
04-11
Electron基于electron-builder进行打包，运行window和Mac上实现检测更新
Electron项目更新（增量与全量）
Tyler_zch的博客
11-30 1424
electron软件更新
如何在浏览器唤起自己开发的electron桌面应用程序
weixin_43254015的博客
06-16 3029
通过注册的自定义协议使你的应用程序与操作系统进行集成，并通过链接或请求的方式进行通信。通过定义协议和在操作系统中注册，你的应用程序能够被唤起并接收数据，以实现与浏览器或其他应用程序的交互。
electron源码保护
04-09
对于使用Electron框架构建的桌面应用程序，源码的保护显得尤为重要，因为 Electron 应用程序通常结合了前端和后端技术，使得源码可能暴露在恶意攻击者面前。标题提到的“electron源码保护”就是针对这个问题提出的一...
electron-autoupdate-server:electron 应用自动更新服务后台
05-17
electron-autoupdate-server electron 应用自动更新服务后台。 配合 使用，详细使用方式请戳 。 问题反馈请戳 。
electron-speech:简单的应用程序，可以轻松播放文本到语音
04-05
本项目"electron-speech"是一个简单的应用程序，它利用了Electron框架和相关的文本转语音库，使用户能够轻松地将文本转换为自然流畅的语音输出。 **Electron框架详解** Electron是由GitHub开发的一个开源框架，用于...
electron线上更新
weixin_45580774的博客
06-26 640
1.使用 GitHub Releases： 如果你的项目托管在 GitHub 上，可以非常方便地利用 electron-updater 库配合 GitHub Releases 实现自动更新。只需在主进程初始化时设置 provider 为 github 并配置相应的 repository 信息即可。2.自建更新服务器： 若选择自建更新服务器，则需确保服务器能够根据特定协议（如 Squirrel ）返回正确的更新信息。这通常包括一个 JSON 文件，列出所有可用版本及其下载地址。
Electron自动更新
风火燎原、
09-16 3862
注：本文使用的是 electron-builder 配合 electron-updataer 实现自动更新效果。该方案仅在 Windows环境中适用，Mac环境比本文多一步安装证书，需要自行解决，Linux环境直接跳过本文。
electron-updater更新
idoits的博客
06-15 994
通过electron-updater方案进行 全量 自升级方案图如下：这里列出所使用的环境： 二、配置 1、配置vue.config.js 在vue.config.js文件中配置publish字段，用来生成latest.yml文件，该文件是用来判断版本升级的，在打包过程中生成。 一旦修改了latest.yml文件，则需要重新打包生成，否则更新失败。这里也可以不配置url字段，在main.js中手动配置，使用autoUpdater.setFeedURL方法配置即可。
electron自动更新
weixin_67150280的博客
04-12 5467
vue+electron 实现自动更新
Electron：软件更新
xulin_1027的专栏
06-30 2375
二、update.js，需要配置updateUrl，既软件安装包所在服务器的目录，如http://域名/app/，其中app目录下存放的latest.yml、安装包.exe（mac端是latest-mac.yml、安装包.dmg、安装包.zip）七、需要自己实现（比如页面启动调用服务端接口获取最新版本，比对当前版本和服务器最新版本，然后弹出SoftUpdate.vue）1、客户端启动，调用服务器接口，获取是否有更新配置（服务端返回发布的最新版本号和更新内容）。注：本人初学记录，用法并非最优，仅供参考。
electron 自动更新（兼容win/Mac）
Crystal_Mr_Rose的博客
04-12 611
mac的是除了安装包和yml文件以外还需要一个zip的安装包的压缩包，总共三个。6、win，打包后，更新需要用到的文件是。win需要：安装包、yml文件。以上文件打包时都会自动生成。5、 我的yml文件。
elementui+electron更新
09-06
ElementUI是一个基于Vue.js的UI组件库，而Electron是一个跨平台的桌面应用程序开发工具。两者之间没有直接的关联。 ElementUI的更新主要是指ElementUI本身的版本更新。ElementUI的开发团队会定期发布新的版本，以修复bug、增加新功能或者改进现有功能。更新ElementUI的步骤通常是先下载新版本的ElementUI，然后替换原有的ElementUI文件，再重新打包项目即可。 Electron的更新通常是指Electron本身的版本更新。Electron的开发团队会根据需要发布新的版本，以修复安全漏洞、提升性能、支持新的操作系统版本等。更新Electron的步骤通常是先查看Electron的官方文档，了解新版本的改动情况，然后在项目中更新Electron的版本号，再重新构建和打包应用程序。 更新ElementUI和Electron都是为了获得更好的用户体验和功能体验。更新前需要先备份现有的文件，避免丢失重要数据。更新后还需要进行测试，确保应用程序的正常运行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值