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

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

前言

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