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

uniapp中實現(xiàn)App自動檢測版本升級的示例代碼

 更新時間：2023年01月03日 15:17:02   作者：我的代碼果然有問題  
本文主要介紹了uniapp中實現(xiàn)App自動檢測版本升級的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

思路

梳理了一下大致有這么三個流程

  • 獲取本地版本號
  • 獲取服務(wù)端最新版本號
  • 提示升級安裝這

下面我們就按這三個流程來進(jìn)行開發(fā)

開發(fā)

初始化

這里我們設(shè)計一個版本升級的類，邏輯盡可能簡單，方便復(fù)用

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

獲取本地版本號

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

    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ù)端最新版本號

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

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

比較版本號

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

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

提示更新

給個友好的提示

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

更新安裝包

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

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

下載進(jìn)度提示

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

    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()
    }

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

頁面中調(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()
        }
    })

至此整個更新程序的功能已基本開發(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: '檢測到有版本更新！',
            content: '請升級app到最新版本！',
            cancelText: '暫不升級',
            confirmText: '立即升級',
            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中實現(xiàn)App自動檢測版本升級的示例代碼的文章就介紹到這了,更多相關(guān)uniapp App自動檢測版本升級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論