封装一个弹框
<template>
<view class="page" v-if="show">
<view class="container">
<image src="../static/update.png"></image>
<view v-if="!isUpdate">
<view class="content">发现新版本,是否前去下载?</view>
<view class="flex">
<view v-if="showCancel" @click="cancel">暂不升级</view>
<view v-else style="border: none;"></view>
<view class="btn" @click="updateNow">立即升级</view>
</view>
</view>
<view v-else>
<view class="content">正在更新中</view>
<progress :percent="percent" show-info activeColor="#0078d4"></progress>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
appUpdate: {
type: Object,
default: {}
}
},
data() {
return {
task: null,
percent: 0,
isUpdate: false
}
},
onUnload() {
this.isUpdate = false;
},
methods: {
cancel() {
let now = new Date().getTime();
let twoHours = 2 * 60 * 60 * 1000;
let time = now + twoHours;
uni.setStorageSync('updateTime', time);
this.$emit('closeUpdate');
},
updateNow() {
uni.getSystemInfo({
success: (res) => {
this.isUpdate = true;
switch (res.platform) {
case "android":
this.task = uni.downloadFile({
url: this.appUpdate.androidAddress,
success: (downloadResult) => {
console.log(downloadResult, this.appUpdate.androidAddress);
uni.hideLoading();
if (downloadResult.statusCode === 200) {
uni.hideLoading();
plus.runtime.install(downloadResult.tempFilePath, {
force: false
}, function () {
console.log('install success...');
plus.runtime.restart();
}, function (e) {
uni.hideLoading();
uni.showToast({
title: '安装失败',
icon: 'none'
})
console.error('install fail...');
});
}
}
});
this.task?.onProgressUpdate((update) => {
this.percent= update.progress;
})
// plus.runtime.openURL(this.appUpdate.androidAddress);
break;
case "ios":
let appleId= 6470888232
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
}, function(e) {
console.log('Open system default browser failed: ' + e.message);
});;
break;
}
}
})
}
},
computed: {
showCancel() {
return this.appUpdate.openUpgrade != '1'
}
}
}
</script>
<style lang="scss" scoped>
image {
width: 148rpx;
height: 148rpx;
left: 50%;
margin-left: -74rpx;
position: absolute;
top: -70rpx;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32rpx;
view {
width: 200rpx !important;
height: 68rpx;
border-radius: 5rpx;
border: 1rpx solid #f3f3f3;
text-align: center;
line-height: 68rpx;
}
.btn {
background-color: #32a9fb;
color: #fff;
border: none;
}
}
.content {
color: #000;
font-weight: bolder;
font-size: 32rpx;
line-height: 1.7;
}
.container {
position: absolute;
padding: 62rpx 30rpx 30rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500rpx;
background: #fff;
border-radius: 20rpx;
}
.page {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
}
</style>
弹框组件引用
后台设置版本号
接口获取后台版本号,然后和当前app版本对比,不一样就唤起弹框
ios的appid