技术选型:

1、electron:21.3.3

2、electron-vite:1.0.17

3、vue:3.2.45

4、element-plus:2.2.32

背景:

我们写了软件,不可避免的需要进行更新升级,现在流行的是软件自动更新升级,就像我们的Windows一样,动不动就会提示我们需要升级并重启,那么这个怎么做呢?

对于使用electron开发的软件来说,自动升级非常简单,只需要安装对于的自动升级模块就能支持,关键的是升级包放在什么位置呢?互联网给我们提供了变量,尤其是GitHub,不仅仅是一个代码仓库,也可以管理版本包,我们就利用这个特性,来实现electron软件的自动更新升级

版本包发布

既然要GitHub管理版本包,那么首先就要把相关的版本包发布到GitHub上面去。

1、GitHub创建token:

网上有很多GitHub创建token的内容,这里就不再赘述了。


2、package.json修改

package.json的"scripts": {}新增如下内容:

"release": "npm run build && electron-builder --win --config --publish always",


3、electron-builder.yml修改

修改默认的publish配置:

publish:
  provider: github
  owner: 'NexNoSQL'
  repo: 'NexNoSQLClient'
  token: 'xxx' 
  releaseType: 'release' 

"owner": "***", //仓库所有者

"repo": "***", //仓库名称

"releaseType": "release"

"token": "***", //github的token


4、环境变量配置token:

另外也可以不在electron-builder.yml里面写死token的配置,把这个配置项配置到环境变量里面:配置项的key:GH_TOKEN


5、执行命令:npm run release

执行命令:npm run release 发布版本到GitHub

[====================] 100% 0.0s | NexNoSQL-Client-1.0.0-setup.exe to github

6、通过GitHub仓库的release就能查看到我们发布的版本

 

自动升级

有个版本包以后,当我们要发布2.0.0版本的时候,如果想要electron应用自动升级,只需要简单的一步即可:

1、src/main/index.js

在index.js里面引入autoUpdater,并在app.whenReady().then里面增加一行代码即可,这样就可以实现自动升级了,有新版本之后它就会自动下载,然后当我们关闭软件下次再打开的时候,就会自动升级了。

const {autoUpdater} = require("electron-updater");

app.whenReady().then(() => {
    autoUpdater.checkForUpdatesAndNotify();
}

2、更精细化操作

在步骤一完全是不可控的自动升级,还可以在src/main/index.js增加如下事件的响应,通过与渲染进程进行交互,由用户决定是否下载和是否更新:

function sendStatusToWindow(text) {
    console.log('text=' + text);
}
  
  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
  })
  
  autoUpdater.on('update-available', (info) => {
    sendStatusToWindow('Update available.');
  })
  
  autoUpdater.on('update-not-available', (info) => {
    sendStatusToWindow('Update not available.');
  })
  
  autoUpdater.on('error', (err) => {
    sendStatusToWindow('Error in auto-updater. ' + err);
  })
  
  autoUpdater.on('download-progress', (progressObj) => {
    let log_message = "Download speed: " + progressObj.bytesPerSecond;
    log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
    log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
    sendStatusToWindow(log_message);
  })
  
  autoUpdater.on('update-downloaded', (info) => {
    sendStatusToWindow('Update downloaded');
  });

3、打个2.0.0的包,测试一下吧

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐