带进度条的app自动更新，效果如下图所示：
技术：vue、vant-ui、5+
封装独立组件appprogress.vue：
<template>
<div>
<van-dialog v-model="show" confirm-button-text="后台下载" class="app-update">
<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
},
// 是否显示弹窗
show: {
type: boolean,
default: false
}
},
data() {
return {}
}
}
</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 {
show: false,
percentageval: 0
};
},
methods: {
appupdate(ismanual) {
const that = this;
console.log('appupdate');
// 获取5+运行环境的版本号
console.log('5+ runtime version：' + plus.runtime.innerversion);
plus.runtime.getproperty(plus.runtime.appid, function(inf) {
const ver = inf.version;
console.log('ver:' + ver);
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;
console.log('normitem:' + normitem);
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 => {
console.log('data:' + json.stringify(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
// 执行升级操作
console.log('apkurl :', apkurl);
// plus.nativeui.toast('正在准备环境，请稍后！');
that.show = 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.show = false;
} else {
plus.nativeui.alert('版本更新失败:' + status);
that.show = false;
}
}
);
try {
dtask.start(); // 开启下载的任务
var prg = 0;
// var showloading = plus.nativeui.showwaiting(
// '版本更新中，请稍后！'
// ); // 创建一个showwaiting对象
dtask.addeventlistener('statechanged', function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
// showloading.settitle('正在下载');
break;
case 2:
// showloading.settitle('已连接到服务器');
break;
case 3:
prg = parseint(
(parsefloat(task.downloadedsize) /
parsefloat(task.totalsize)) *
100
);
that.percentageval = prg;
break;
case 4:
that.show = false;
break;
}
});
} catch (err) {
that.show = false;
if (ismanual) {
plus.nativeui.toast('网络异常,请稍候再试' + err);
}
}
})
.catch(error => {
// on cancel
console.log('error :', error);
that.show = false;
expiredstorage.setitem('$upgradetip', false, 1 / 12); // 1/12天内不再显示升级提示
});
} else {
console.log('当前版本号已是最新');
if (ismanual) {
plus.nativeui.toast('当前版本号已是最新');
}
}
});
}
});
}
}
};
调用代码：
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);
});
},
结束…….
黄山市民网：https://www.huangshanshimin.com/
