欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新(步驟源碼)

 更新時(shí)間:2022年10月31日 09:24:13   作者:阿東、  
這篇文章主要介紹了electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新,步驟源碼包括autoUpdater.js操控更新js文件,main.js也就是package.json內(nèi)的main指向的js文件,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、編寫語言:electron、vue

2、更新庫:"electron-updater": "4.3.5"

下面直接上步驟源碼

1、autoUpdater.js      (操控更新js文件)

import { autoUpdater } from 'electron-updater'
import { app, ipcMain } from 'electron'
 
 
// 服務(wù)器靜態(tài)文件地址,文章后面附上ng配置及需要上傳的文件
const updateUrl = 'http://***/updateExe/'
 
// 檢測(cè)更新,在你想要檢查更新的時(shí)候執(zhí)行,renderer事件觸發(fā)后的操作自行編寫
function updateHandle (updateConfig) {
  let message = {
    error: '檢查更新出錯(cuò)',
    checking: '正在檢查更新……',
    updateAva: '檢測(cè)到新版本,正在下載……',
    updateNotAva: '現(xiàn)在使用的就是最新版本,不用更新'
  }
  // 設(shè)置是否自動(dòng)下載,默認(rèn)是true,當(dāng)點(diǎn)擊檢測(cè)到新版本時(shí),會(huì)自動(dòng)下載安裝包,所以設(shè)置為false
  autoUpdater.autoDownload = false
  // 設(shè)置服務(wù)器更新地址
  autoUpdater.setFeedURL({
    provider: 'generic',
    url: updateUrl
  })
  autoUpdater.on('error', function (err) {
    sendUpdateMessage('error',err||message.error)
  })
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage('checking-for-update',message.checking)
  })
  // 版本檢測(cè)結(jié)束,準(zhǔn)備更新
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage('update-available',message.updateAva)
  })
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage('update-not-available',message.updateNotAva)
  })
  // 更新下載進(jìn)度事件
  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','下載完成')
  })
  
  // 通過main進(jìn)程發(fā)送事件給renderer進(jìn)程,提示更新信息
  function sendUpdateMessage (name,text) {
    // 窗口對(duì)象自行修改
    let loginWindow = global.browserList.logins[0]
    loginWindow.webContents.send('UpdateMessage', {name,text})
  }
}
 
// 觸發(fā)更新檢測(cè)
ipcMain.on('checkForUpdates', () => {
  autoUpdater.checkForUpdates()
})
 
//  開始下載,通過渲染進(jìn)程發(fā)起
ipcMain.on('downloadUpdate', () => {
    autoUpdater.downloadUpdate()
})
 
//  下載完成,退出且重新安裝  
ipcMain.on('updateSuccess', () => {
    // 加載更新程序
    autoUpdater.quitAndInstall()
    // 關(guān)閉當(dāng)前electron
    app.quit()
})
 
export default updateHandle

2、main.js(也就是package.json內(nèi)的main指向的js文件)

import updateHandle from '@/mainFolder/util/autoUpdater.js' //自動(dòng)更新
// ... 省略其次代碼,為了更新代碼更明了
 
 //自動(dòng)更新
updateHandle()

3、update.vue(可視化更新頁面vue + iview,不同的自行封寫)

<template>
    <div>
        <Modal
            v-model="modal"
            :mask-closable='false'
            :title="'更新提醒(' + newVersion +')'"
            width="400"
            ok-text="立即更新"
            cancel-text="取消"
            :closable='false'
            @on-ok='updataDown'
        >
            <p v-for='(item, index) in navJson' :key='index + "navJson"'>{{ index+1 }}、{{item}}</p>
        </Modal>
        <Modal
            v-model="Progress"
            :mask-closable='false'
            :title="'正在更新(' + newVersion +')'"
            width="400"
            :closable='false'
        >
            <Progress :percent="percent" status="active" ></Progress>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>
 
<script>
 
 
// this.$ipcRenderer 等同于 window.require("electron").ipcRenderer
export default {
    data() {
        return {
            modal: false,
            Progress: false,
            percent: 0,
            newVersion: '0.0.0',
            isOnMessage: false,
            navJson: []
        }
    },
    created () {
        // 在這里執(zhí)行之前,可以是登錄接口查詢到版本不對(duì)之后再觸發(fā)檢測(cè)更新
        // ...登錄api省略了,造數(shù)據(jù)演示
        let result = {
            newVersion: '2.0.0',
            updateNavJson: '["更新內(nèi)容1","更新內(nèi)容2","更新內(nèi)容3","更新內(nèi)容4"]'
        }
        this.onUpdateExe(result)
    },
    methods: {
        onUpdateExe(res) {
            if (this.isOnMessage) return
            const { newVersion = '', updateNavJson = "" } = res
            try {
                this.navJson = JSON.parse(updateNavJson) || []
            } catch (error) {
                console.log(error)
            }
            this.isOnMessage = true
            this.newVersion = newVersion
            console.log('收到更新版本號(hào)', res, this.navJson)
            // 自動(dòng)更新過程
            this.$ipcRenderer.on('UpdateMessage', this.updateExe.bind(this))
            // 檢查是否需要更新
            this.$ipcRenderer.send('checkForUpdates')
        },
        updateExe(e, data){
            console.log('渲染層收到消息:',data)
            // 更新提示彈窗
            if(data.name == 'update-available'){
                this.modal = true 
            }else if(data.name == 'download-progress'){    // 下載進(jìn)度
                this.percent = Math.ceil(data.text)
            }else if(data.name == 'update-downloaded'){
                this.$Message.success('下載完成,準(zhǔn)備重啟')
                setTimeout(() => {
                    this.$ipcRenderer.send('updateSuccess')
                },2000)
            }
        },
        //開始升級(jí)
        updataDown(){
            this.Progress = true
            this.$ipcRenderer.send('downloadUpdate')
        }
    },
}
</script>
 
<style lang="scss" scoped>
   /deep/.ivu-modal-body {
        max-height: 120px;
        overflow-y: scroll;
        padding-top: 5px;
        p {
            line-height: 24px;
            height: 24px;
            font-size: 12px;
 
        }
   }
   /deep/.ivu-modal-footer {
        button:nth-child(1) {
            display: none;
        }
   }
</style>

4、config配置增加publish,url:服務(wù)器文件地址

electronBuilder: {
    builderOptions: {
        productName: 'soft', // 打包文件名稱,盡可能用英文
        // ...
        publish: [
          {
            "provider": "generic",
            "url": `http://***/updateExe/`
          }
        ],
    }
}

5、服務(wù)器ng配置

// nginx配置靜態(tài)文件目錄
http {
    server {
        # 增加這一個(gè)配置
        location /updateExe/ {
            alias  /usr/item/updateExe/;
        }
 
    }
}

6、將打包后的exe + latest.yml  傳入/usr/item/updateExe/這個(gè)目錄下

備注:

1、5步驟配置ng靜態(tài)文件訪問鏈接,有文件服務(wù)器的可跳過

2、文章中的 http://***/updateExe/   的 ***記得替換成服務(wù)器公網(wǎng)ip

效果如下:

到此這篇關(guān)于electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新的文章就介紹到這了,更多相關(guān)electron-vue自動(dòng)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析

    如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析

    埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載

    Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載

    Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時(shí)可以提供更好的用戶體驗(yàn),下面小編就來和大家詳細(xì)講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧
    2023-10-10
  • vue上傳圖片文件的多種實(shí)現(xiàn)方法

    vue上傳圖片文件的多種實(shí)現(xiàn)方法

    這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料,介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實(shí)現(xiàn)一次性上傳多張圖片等方法,需要的朋友可以參考下
    2021-05-05
  • Vue自定義屬性實(shí)例分析

    Vue自定義屬性實(shí)例分析

    這篇文章主要介紹了Vue自定義屬性,結(jié)合實(shí)例形式分析了vue.js自定義屬性相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
    2019-02-02
  • Vue路由前后端設(shè)計(jì)總結(jié)

    Vue路由前后端設(shè)計(jì)總結(jié)

    在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計(jì)的知識(shí)點(diǎn)總結(jié)內(nèi)容,需要的朋友們參考下。
    2019-08-08
  • vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法

    vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法

    本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-07-07
  • 搭建Vue3+Vite+Ts腳手架的示例代碼

    搭建Vue3+Vite+Ts腳手架的示例代碼

    本文介紹了Vue3+Vite+Ts搭建腳手架的實(shí)現(xiàn),步驟包括創(chuàng)建項(xiàng)目、選擇技術(shù)棧、安裝依賴及運(yùn)行項(xiàng)目,旨在為開發(fā)者提供一個(gè)簡(jiǎn)易快速的搭建流程,感興趣的可以了解一下
    2024-11-11
  • vue使用elementUI組件實(shí)現(xiàn)分頁效果

    vue使用elementUI組件實(shí)現(xiàn)分頁效果

    分頁在展示數(shù)據(jù)列表的場(chǎng)景肯定是非常多的,一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁效果,需要的朋友可以參考下
    2023-12-12
  • vuex命名空間的使用

    vuex命名空間的使用

    本文主要介紹了vuex命名空間的使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue中使用axios的作用

    vue中使用axios的作用

    Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫,適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下
    2023-08-08

最新評(píng)論