通过一个弹窗去实现版本更新提示
image.png在 首页 中判断是否显示 更新提示 弹窗
弹窗组件
<template>
<view>
<u-overlay :show="show">
<view class="updatetips-whole">
<view class="updatetips">
<view>
<view class="updatetips-head">
<image src="../static/images/updatetips.png"></image>
<view class="updatetips-version">
发现新版本</br>
V{{versionNum}}
</view>
</view>
<view class="updatetips-content">{{versionContent}}</view>
<!-- 进度条 -->
<u-line-progress
v-if="isProgress"
:percentage="30"
activeColor="#55D88A"
:showText="false"
height="4"
></u-line-progress>
</view>
<view class="updatetips-btn-disable" v-if="isProgress">立即更新</view>
<view class="updatetips-btn" v-else @click="downloadBtn()">立即更新</view>
</view>
</view>
</u-overlay>
</view>
</template>
<script>
export default {
props:['show','versionNum','versionContent','downloadUrl'],
data() {
return {
progress:0,
isProgress:false
};
},
methods: {
downloadBtn(){
this.isProgress=true
const downloadTask = uni.downloadFile({
url:this.downloadUrl,
success: (res) => {
//安装
plus.runtime.install(
res.tempFilePath, {
force: true
},
function(_res) {
plus.runtime.restart();
}
)
},
fail: (err)=> {
uni.$u.toast('下载失败')
}
})
// 查看下载进度
downloadTask.onProgressUpdate((res) => {
this.progress=res.progress
})
}
}
};
</script>
<style scoped>
.updatetips-whole{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.updatetips{
position: relative;
width: 80%;
min-height: 100rpx;
background-color: #fff;
border-radius: 20rpx;
}
.updatetips-head{
position: relative;
width: 100%;
height: 200rpx;
}
.updatetips-head>image{
position: absolute;
top: -72rpx;
width: 100%;
height: 280rpx;
}
.updatetips-version{
position: absolute;
top: 30rpx;
left: 50rpx;
color: #fff;
font-size: 40rpx;
}
.updatetips-content{
width: 80%;
min-height: 100rpx;
margin: 40rpx auto;
}
.updatetips-btn-disable{
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: #E6E6E6;
}
.updatetips-btn{
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: #55D88A;
}
.updatetips-btn::before{
content: "";
width: 85%;
height: 1px;
background-color: #E6E6E6;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
在父组件中使用
onLoad() {
// 获取版本号
get().then(res=>{
var versionNum = uni.getStorageSync('version')
// 判断当前版本号和后端返回的版本号是否一致
if(versionNum!=res.data.versionNumber){
this.show=true
this.versionContent=res.data.content
this.versionNum=res.data.versionNumber
this.downloadUrl=res.data.url
}
}).catch(err=>{
})
},
注:获取本地包版本号
APP.vue
onLaunch: function() {
//获取本地版本信息
plus.runtime.getProperty(plus.runtime.appid, (info) => {
uni.setStorageSync('version', info.version)
})
},
在manifest.json中输入本次版本号
image.png
网友评论