uniapp中實(shí)現(xiàn)App自動(dòng)檢測(cè)版本升級(jí)的示例代碼

更新時(shí)間：2023年01月03日 15:17:02 作者：我的代碼果然有問(wèn)題

本文主要介紹了uniapp中實(shí)現(xiàn)App自動(dòng)檢測(cè)版本升級(jí)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

目前手里接到個(gè)項(xiàng)目需要用到uniapp來(lái)開(kāi)發(fā)一款平板應(yīng)用，既然是應(yīng)用，自然是少不了自動(dòng)版本升級(jí)的功能了，本來(lái)想插件市場(chǎng)看有沒(méi)有現(xiàn)成的用一用，發(fā)現(xiàn)都需要使用云端基于 uniCloud 云函數(shù)實(shí)現(xiàn)，對(duì)于我們這種有專門(mén)后端服務(wù)的肯定是不希望再搞一個(gè)服務(wù)出來(lái)，于是還是決定自己動(dòng)手寫(xiě)一些，也方便后續(xù)調(diào)整

思路

梳理了一下大致有這么三個(gè)流程

獲取本地版本號(hào)
獲取服務(wù)端最新版本號(hào)
提示升級(jí)安裝這

下面我們就按這三個(gè)流程來(lái)進(jìn)行開(kāi)發(fā)

開(kāi)發(fā)

初始化

這里我們?cè)O(shè)計(jì)一個(gè)版本升級(jí)的類，邏輯盡可能簡(jiǎn)單，方便復(fù)用

class Upgrade {
    constructor() {
        this.downloadUrl = ''
        // ...
    }
    // ...
}
?
export default Upgrade

獲取本地版本號(hào)

uniapp在應(yīng)用端使用H5+標(biāo)準(zhǔn)，故可以使用plus相關(guān)的api獲取應(yīng)用的版本號(hào)

    getLocalVersion = () => {
        return new Promise((resolve, reject) => {
            plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
                const version = widgetInfo.version
                resolve(version)
            })
        }).catch(err => {
            console.err(err);
        })
    }

獲取服務(wù)端最新版本號(hào)

這里只做了個(gè)簡(jiǎn)單的封裝，最新的版本號(hào)根據(jù)接口請(qǐng)求從服務(wù)端獲取，最好順帶把下載地址也返回了

    getLatestVersion = () => {
        return new Promise((resolve, reject) => {
            // 相關(guān)接口
            const version = '0.0.0'
            this.downloadUrl = 'XXX'
            resolve(version)
        }).catch(err => {
            console.err(err);
        })
    }

比較版本號(hào)

關(guān)于新老版本號(hào)的比較，看過(guò)很多資料都是通過(guò)parseInt(widgetInfo.version.split('.').join(''))轉(zhuǎn)為純數(shù)字進(jìn)行對(duì)比的，我這里就不搞那么復(fù)雜了，默認(rèn)服務(wù)端的就是最新的，只要不是跟客戶端保持一致，就提示更新，簡(jiǎn)單粗暴點(diǎn)

    checkVersion = async () => {
        const localVersion = await this.getLocalVersion()
        const latestVersion = await this.getLatestVersion()
        if (localVersion === latestVersion) {
            return true
        } else {
            return false
        }
    }

提示更新

給個(gè)友好的提示

    updatePackage = () => {
        uni.showModal({
            title: '檢測(cè)到有版本更新！',
            content: '請(qǐng)升級(jí)app到最新版本！',
            cancelText: '暫不升級(jí)',
            confirmText: '立即升級(jí)',
            success: res => {
                console.log('下載');
                // ...
            }
        })
    }

更新安裝包

如果上一步點(diǎn)擊立即升級(jí)，那么這里就創(chuàng)建下載任務(wù)下載我們的安裝包，并讓它下載完畢后自動(dòng)安裝

    downloadPackage = () => {
        const task = plus.downloader.createDownload(this.downloadUrl, {},
            (res, status) => {
                if (status === 200) {
                    plus.runtime.install(res.filename)
                }
            })
?
        task.start()
    }

下載進(jìn)度提示

為了友好的用戶體驗(yàn)，可以顯示下載進(jìn)度，這里就簡(jiǎn)單暴露一個(gè)進(jìn)度屬性progress出來(lái)，實(shí)際場(chǎng)景可以根據(jù)自己的設(shè)計(jì)稿自定義組件

    onProgress = (task) => {
        task.addEventListener('statechanged', e => {
            if (e && e.downloadedSize > 0) {
                const progress = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
                this.progress.value = progress
            }
        }, false)
    }

加入更新方法中

    downloadPackage = () => {
        const task = plus.downloader.createDownload(this.downloadUrl, {},
            (res, status) => {
                if (status === 200) {
                    plus.runtime.install(res.filename)
                }
            })
            
        this.onProgress(task)
?
        task.start()
    }

這樣就可以在下載過(guò)程中看到下載進(jìn)度啦

頁(yè)面中調(diào)用

    import { toRefs } from "vue"
    import Upgrade from '@/pages/index/upgrade.js'
    const upgrade = new Upgrade()
    // 進(jìn)度屬性可直接與模板綁定
    const {
        progress
    } = toRefs(upgrade)
    // 檢查版本并更新
    upgrade.checkVersion().then(isLatest => {
        if (!isLatest) {
            upgrade.updatePackage()
        }
    })

至此整個(gè)更新程序的功能已基本開(kāi)發(fā)完成，樣式部分只需要根據(jù)自己的需要調(diào)整就可以了，功能代碼如下,有需要的同學(xué)自取

完整代碼

import { ref } from "vue"
?
class Upgrade {
    constructor() {
        this.downloadUrl = 'https:XXXXX.apk'
        this.progress = ref(0)
    }
?
    getLocalVersion = () => {
        return new Promise((resolve, reject) => {
            plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
                const version = widgetInfo.version
                resolve(version)
            })
        }).catch(err => {
            console.err(err);
        })
    }
?
    getLatestVersion = () => {
        return new Promise((resolve, reject) => {
            // 相關(guān)接口
            const version = '1.0.1'
            resolve(version)
        }).catch(err => {
            console.err(err);
        })
    }
?
    checkVersion = async () => {
        const localVersion = await this.getLocalVersion()
        const latestVersion = await this.getLatestVersion()
        if (localVersion === latestVersion) {
            return true
        } else {
            return false
        }
    }
?
    updatePackage = () => {
        uni.showModal({
            title: '檢測(cè)到有版本更新！',
            content: '請(qǐng)升級(jí)app到最新版本！',
            cancelText: '暫不升級(jí)',
            confirmText: '立即升級(jí)',
            success: res => {
                console.log('下載');
                if (res.confirm) {
                    this.downloadPackage()
                }
            }
        })
    }
?
    downloadPackage = () => {
        const task = plus.downloader.createDownload(this.downloadUrl, {},
            (res, status) => {
                if (status === 200) {
                    plus.runtime.install(res.filename)
                }
            })
            
        this.onProgress(task)
?
        task.start()
    }
?
    onProgress = (task) => {
        task.addEventListener('statechanged', e => {
            if (e && e.downloadedSize > 0) {
                const progress = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
                this.progress.value = progress
            }
        }, false)
    }
}
?
export default Upgrade

到此這篇關(guān)于uniapp中實(shí)現(xiàn)App自動(dòng)檢測(cè)版本升級(jí)的示例代碼的文章就介紹到這了,更多相關(guān)uniapp App自動(dòng)檢測(cè)版本升級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: