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

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

3a2569a5b91edacd3b670af76fd56bf.png

前言

目前手里接到个项目需要用到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
目录
打赏
0
0
0
0
2
分享
相关文章
【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?Web App Linux 默认使用的 Nginx 版本是由平台预定义的,无法更改这个版本。
131 77
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
134 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
99 11
|
2月前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
134 20
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
29 0
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
178 1
uniapp一个人开发APP关键步骤和考虑因素
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
591 3
uniapp APP自动更新组件
uniapp APP自动更新组件
149 1
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
234 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    303
  • 2
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    36
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    23
  • 5
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
    6
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
    1
  • 7
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
    3
  • 8
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
    9
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    10
  • 10
    1688APP 原数据 API 接口的开发、应用与收益
    15
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等