本文主要介绍了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自动检测版本升级的示例代码的文章就介绍到这了,更多相关uniapp App自动检测版本升级内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是uniapp中实现App自动检测版本升级的示例代码的详细内容，更多请关注0133技术站其它相关文章！
