带进度条的App自动更新，效果如下图所示：
技术：vue、vant-ui、5+
封装独立组件AppProgress.vue：
<template>
<div>
<van-dialog
v-model="showProgress"
confirm-button-text="后台下载"
class="app-update"
@confirm="confirmClick"
>
<img src="../../assets/imgs/progress-bar.png" />
<van-progress :percentage="percentageVal" />
<div class="msg">版本更新中，请稍后...</div>
</van-dialog>
</div>
</template> <script>
// app下载进度组件
export default {
props: {
// 进度值
percentageVal: {
type: Number,
default: 0
},
// 是否显示弹窗
showProgress: {
type: Boolean,
default: false
}
},
data() {
return {}
},
methods: {
confirmClick() {
this.$emit('confirm');
}
}
}
</script> <style lang="scss" scoped>
img {
width: 270px;
height: 163px;
position: fixed;
top: -35px;
z-index: 2200;
}
</style>
<style lang="scss">
.app-update.van-dialog {
overflow: visible;
width: 270px;
border-radius: 12px;
.van-progress {
margin-top: 124px;
z-index: 2300;
}
.msg {
font-size: 16px;
font-weight: 600;
color: white;
position: absolute;
top: 50px;
z-index: 2300;
width: 100%;
text-align: center;
}
.van-dialog__footer {
border-radius: 12px;
.van-button--default {
.van-button__text {
width: 105px;
height: 26px;
border-radius: 13px;
background-color: #006eff;
color: white;
font-weight: 600;
font-size: 12px;
display: inline-block;
margin-top: 10px;
line-height: 26px;
}
}
}
}
</style>
app升级代码，封装独立js文件：appUpdateOptions.js
/**
* IOS 包发布到应用市场后要更新此处的ID，替换掉测试ID：1053012308
*/
/* eslint-disable no-undef */
import { getVersion } from '@/services/login';
import request from '../../api/ajax.js';
import { Dialog } from 'vant';
import expiredStorage from '@/utils/expiredStorage.js'; function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime) return;
}
} // Vue继承的基础对象
export default {
data() {
return {
showProgress: false,
percentageVal: 0
};
},
methods: {
appUpdate(ismanual) {
const that = this;// 获取5+运行环境的版本号
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
const ver = inf.version;var ua = navigator.userAgent.toLowerCase();
// 苹果手机
if (/iphone|ipad|ipod/.test(ua)) {
// 获取当前上架APPStore版本信息
request
.get('https://itunes.apple.com/lookup?id=1053012308', {
id: 1053012308 // APP唯一标识ID
})
.then(data => {
console.log('data:' + JSON.stringify(data));
var resultCount = data.resultCount;
for (var i = 0; i < resultCount; i++) {
var normItem = data.results[i].version;if (normItem > ver) {
var _msg = '发现新版本:V' + normItem;
// plus.nativeUI.alert("发现新版本:V" + normItem);
Dialog.confirm({
title: '升级确认',
message: _msg
})
.then(() => {
// on confirm
// 执行升级操作
document.location.href =
'https://itunes.apple.com/cn/app/id1053012308?mt=8'; // 上新APPStore下载地址
})
.catch(() => {
// on cancel
expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示
});
return;
}
}
if (ismanual) {
plus.nativeUI.toast('当前版本号已是最新');
}
});
} else if (/android/.test(ua)) {
getVersion().then(res => {if ((res.code = 200 && res.data.version > ver)) {
var _msg = '发现新版本:V' + res.data.version;
const apkUrl = res.data.redirectUrl;
Dialog.confirm({
title: '升级确认',
message: _msg
})
.then(() => {
// on confirm
that.showProgress = true;
var dtask = plus.downloader.createDownload(
apkUrl,
{},
function(d, status) {
if (status == 200) {
// sleep(1000);
var path = d.filename; // 下载apk
plus.runtime.install(path); // 自动安装apk文件
that.showProgress = false;
} else {
plus.nativeUI.alert('版本更新失败:' + status);
that.showProgress = false;
}
}
);
try {
dtask.start(); // 开启下载的任务
var prg = 0;
dtask.addEventListener('statechanged', function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
//'正在下载';
break;
case 2:
// '已连接到服务器';
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100
);
that.percentageVal = prg;
break;
case 4:
that.showProgress = false;
break;
}
});
} catch (err) {
that.showProgress = false;
if (ismanual) {
plus.nativeUI.toast('网络异常,请稍候再试' + err);
}
}
})
.catch(error => {
// on cancel
that.showProgress = false;
expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示
});
} else {if (ismanual) {
plus.nativeUI.toast('当前版本号已是最新');
}
}
});
}
});
},
// 点击确定按钮
confirmClick() {
this.showProgress = false;
}
}
};
注意：这里的版本号以字符串比较的方式可能会出现问题，正确的方式应该是：
function compareVersion(v1, v2) {
v1 = v1.split('.')
v2 = v2.split('.')
var len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (var i = 0; i < len; i++) {
var num1 = parseInt(v1[i])
var num2 = parseInt(v2[i])
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
compareVersion('1.11.0', '1.9.9') // => 1 // 1表示 1.11.0比1.9.9要新
compareVersion('1.11.0', '1.11.0') // => 0 // 0表示1.11.0和1.11.0是同一个版本
compareVersion('1.11.0', '1.99.0') // => -1 // -1表示1.11.0比 1.99.0要老
调用代码：
import appUpdateOptions from '@/utils/mixins/appUpdateOptions.js'
import AppProgress from '@/components/common/AppProgress.vue';
export default {
components: { AppProgress },
props: {},
mixins: [appUpdateOptions],
methods: {
// app更新
appUpdateFuc() {
const that = this;
that.$mui.plusReady(function() {
that.appUpdate(true);
});
},
结束.......