亲宝软件园·资讯

展开

uniapp中实现App自动检测版本升级的示例代码

我的代码果然有问题 人气:0

前言

目前手里接到个项目需要用到uniapp来开发一款平板应用,既然是应用,自然是少不了自动版本升级的功能了,本来想插件市场看有没有现成的用一用,发现都需要使用云端基于 uniCloud 云函数实现,对于我们这种有专门后端服务的肯定是不希望再搞一个服务出来,于是还是决定自己动手写一些,也方便后续调整

思路

梳理了一下大致有这么三个流程

下面我们就按这三个流程来进行开发

开发

初始化

这里我们设计一个版本升级的类,逻辑尽可能简单,方便复用

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

获取本地版本号

uniapp在应用端使用H5+标准,故可以使用plus相关的api获取应用的版本号

    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) => {
            // 相关接口
            const version = '0.0.0'
            this.downloadUrl = 'XXX'
            resolve(version)
        }).catch(err => {
            console.err(err);
        })
    }

比较版本号

关于新老版本号的比较,看过很多资料都是通过parseInt(widgetInfo.version.split('.').join(''))转为纯数字进行对比的,我这里就不搞那么复杂了,默认服务端的就是最新的,只要不是跟客户端保持一致,就提示更新,简单粗暴点

    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('下载');
                // ...
            }
        })
    }

更新安装包

如果上一步点击立即升级,那么这里就创建下载任务下载我们的安装包,并让它下载完毕后自动安装

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

下载进度提示

为了友好的用户体验,可以显示下载进度,这里就简单暴露一个进度属性progress出来,实际场景可以根据自己的设计稿自定义组件

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

这样就可以在下载过程中看到下载进度啦

页面中调用

    import { toRefs } from "vue"
    import Upgrade from '@/pages/index/upgrade.js'
    const upgrade = new Upgrade()
    // 进度属性可直接与模板绑定
    const {
        progress
    } = toRefs(upgrade)
    // 检查版本并更新
    upgrade.checkVersion().then(isLatest => {
        if (!isLatest) {
            upgrade.updatePackage()
        }
    })

至此整个更新程序的功能已基本开发完成,样式部分只需要根据自己的需要调整就可以了,功能代码如下,有需要的同学自取

完整代码

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) => {
            // 相关接口
            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

加载全部内容

相关教程
猜你喜欢
用户评论