uniapp 中实现 App 自动检测版本升级

2023-02-21 1007

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uniapp 中实现 App 自动检测版本升级

前言

目前手里接到个项目需要用到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

uniapp 中实现 App 自动检测版本升级

前言

思路

开发

初始化

获取本地版本号

获取服务端最新版本号

比较版本号

提示更新

更新安装包

下载进度提示

页面中调用

完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景