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