前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Electron使用electron-updater自动更新

Electron使用electron-updater自动更新

作者头像
明知山
发布2021-12-28 11:37:11
3.3K1
发布2021-12-28 11:37:11
举报
文章被收录于专栏:前端开发随笔前端开发随笔

electron-updater官方文档

安装electron-log是为了方便本地调试

代码语言:javascript
复制
yarn add electron-updater
yarn add electron-log

版本号是根据你的package.json

vue.config.js写入

代码语言:javascript
复制
publish: [
	{
		provider: 'generic',
		url: 'http://update.xxx.com'
	}
],

打包的时候需要将生成的exe文件和latest.yml放到服务器中

在这里插入图片描述
在这里插入图片描述

在项目的根目录新建dev-app-update.yml文件 这个文件是为了方便进行本地调试

代码语言:javascript
复制
provider: generic
url: 'http://update.xxx.com'

新建一个updater.js,对更新文件进行单独封装 与background.js同级

代码语言:javascript
复制
import { autoUpdater } from "electron-updater"
const { dialog, BrowserWindow } = require('electron')

const log = require("electron-log")
autoUpdater.logger = log
autoUpdater.logger.transports.file.level = "info"

const path = require('path')

const isDevelopment = process.env.NODE_ENV === 'development'

// 防止报错no such file or directory dev-app-update.yml
if (isDevelopment) {
    autoUpdater.updateConfigPath = path.join(__dirname, '../dev-app-update.yml')
}

export default () => {
    let win = null

    //设置自动下载
    autoUpdater.autoDownload = false

    // 检测是否有新版本
    autoUpdater.checkForUpdates()

    autoUpdater.on('checking-for-update', res => {
        log.info("获取版本信息:" + res)
    })

    autoUpdater.on('update-not-available', res => {
        log.info("没有可更新版本:" + res)
    })

    autoUpdater.on('update-available', res => {
        dialog.showMessageBox({
            type: 'info',
            title: '软件更新',
            message: '发现新版本, 确定更新?',
            buttons: ['确定', '取消']
        }).then(resp => {
            if (resp.response == 0) {
                createWindow()
                autoUpdater.downloadUpdate()
            }
        })
    })

    async function createWindow() {
        win = new BrowserWindow({
            width: 300,
            height: 300,
            title: "七鹊",
            frame: false, 
            transparent: true,
            maximizable: false,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                enableRemoteModule: true
            },
        })
        if (process.env.WEBPACK_DEV_SERVER_URL) {
            await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/update')
        } else {
            win.loadURL('app://./index.html#/update')
        }
    }

    autoUpdater.on('download-progress', res => {
        log.info("下载监听:" + res)
        win.webContents.send('downloadProgress', res)
    })

    autoUpdater.on('update-downloaded', () => {
        dialog.showMessageBox({
            title: '下载完成',
            message: '最新版本已下载完成, 退出程序进行安装'
        }).then(() => {
            autoUpdater.quitAndInstall()
        })
    })
}

将文件引入到background.js文件

代码语言:javascript
复制
import updater from "./updater"
app.on('ready', async () => {
  updater()
})

update.vue进行进度展示

代码语言:javascript
复制
<template>
    <div class="progress">
        <el-progress type="circle" :percentage="percentage" />
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { ipcRenderer } from 'electron'
const percentage = ref(0)

onMounted(() => {
    ipcRenderer.on('downloadProgress', (e, arg) => {
        percentage.value = parseInt(arg.percent)
    })
})

</script>
<style lang='less' scoped>
.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

electron-log打印日志可以在电脑硬盘中查看,下面是我的地址,可供参考 C:\Users\Administrator\AppData\Roaming\qique\logs

更新下载的安装地址 C:\Users\Administrator\AppData\Local\qique\pending

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-12-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档