首页 > 资讯 > 前端开发 > JavaScript >uniapp中实现App自动检测版本升级的示例代码

449

分享到

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

uniapp App自动检测 uniapp App版本升级 2023-01-03 18:01:29 449人浏览独家记忆

摘要

目录前言思路开发初始化获取本地版本号获取服务端最新版本号比较版本号提示更新更新安装包下载进度提示页面中调用完整代码前言目前手里接到个项目需要用到uniapp来开发一款平板应用，既然

前言

目前手里接到个项目需要用到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自动检测版本升级的示例代码的文章就介绍到这了,更多相关uniapp App自动检测版本升级内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

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

本文链接: https://www.lsjlt.com/news/176539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

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

目录

前言

思路

开发

初始化

获取本地版本号

获取服务端最新版本号

比较版本号

提示更新

更新安装包

下载进度提示

页面中调用

完整代码

本篇文章演示代码以及资料文档资料下载

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

Android编程实现自动检测版本及自动升级的方法

Android应用开发的版本更新检测升级功能实现示例

Python与Appium实现手机APP自动化测试的示例代码

Python实现Telnet自动连接检测密码的示例

python+appium实现自动化测试的示例代码

在notepad++实现代码自动化排版的示例

JavaCV实现图片中人脸检测的示例代码

Java实现升级版布谷鸟闯关游戏的示例代码

python实现自动抢课脚本的示例代码

Python实现APP自动化发微信群消息的示例代码

Java实现经典游戏俄罗斯方块(升级版)的示例代码

如何实现检测网站down掉后自动发信的shell脚本代码

Python实现自动添加脚本头信息的示例代码

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑