主要的逻辑是将当前设备上的App版本号与后台存储的最新版本进行对比,判断是否进行更新操作,实现效果如下
组件中利用了部分的uview的组件,可根据项目中所医疗组件包进行替换
template部分
<template>
<view class="update-version-container" >
<view class="container" v-show='showVersionModel'>
<view class="content">
<view class="header">
<image src="../static/update.png" mode=""></image>
</view>
<view class="body">
<text class="body-header">发现新版本 (v.{{ version }})</text>
<view class="body-text">
<text class="version-text">{{content}}</text>
</view>
</view>
<view class="btn-wrap">
<text class="confirm-btn" @click="handleConfirmUpdate" >立即下载更新</text>
</view>
<view class="cancel-btn-wrap">
<u-icon class="cancel-btn" name='close' color='#fff' size="40" @click="handleCancel" ></u-icon>
</view>
</view>
</view>
</view>
</template>
Javascript逻辑部分
<script>
import { getAppVersionInfo } from "../api/commin.api.js"
export default {
name: "updateVerison",
props: {
hasValidUpdate:{
type: Boolean,
default: () => true,
}
},
data() {
return {
content: "1.更新1;\n2.更新2;\n3.更新3;",
version: "1.4.1",
showVersionModel: false,
dtask: null,
curVersionInfo: {},
}
},
created() {
this.hasValidUpdate && this.checkHasUpdateVersion();
},
methods: {
checkHasUpdateVersion(){
uni.getSystemInfo({
success: (res) => {
if (res.platform == "android") {
plus.runtime.getProperty(plus.runtime.appid, (inf) => {
this.curVersionInfo.wgtVer = inf.version;
this.curVersionInfo.version = plus.runtime.version;
this.androidCheckUpdate();
});
}
}
})
},
androidCheckUpdate(){
getAppVersionInfo().then(res => {
this.content = res.data.note,
this.version = res.data.version;
if (res.data.version != this.curVersionInfo.wgtVer) {
this.showVersionModel = true;
this.dtask = plus.downloader.createDownload(res.data.wgtUrl, {}, (d, status) => {
if (status == 200) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, (error) => {
this.$showToast("安装失败")
})
} else {
this.$showToast("更新失败")
}
uni.hideLoading();
});
}
}).catch(err => {
console.log("err", JSON.stringify(err));
})
},
handleConfirmUpdate(){
console.log("confirm update");
this.showVersionModel = false;
uni.showLoading({
title: "下载更新中",
mask: true,
});
this.dtask.start();
},
handleCancel(){
this.showVersionModel = false;
}
}
}
</script>
css样式部分
<style scoped lang="scss">
$bgColor: #4e5ae0;
.update-version-container {
.container{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: .6);
z-index: 999999;
}
.content {
// border: 1px solid #FFFFFF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -60%);
width: 75vw;
border-radius: 30rpx;
.header {
width: 100%;
position: relative;
overflow-y: hidden;
image {
width: 100%;
height: 350rpx
}
&::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 25%;
left: 0px;
background-color: $bgColor;
border-radius: 30rpx;
z-index: -1;
}
&::after {
content: "";
display: inline-block;
width: 100%;
position: absolute;
height: 30rpx;
bottom: -5px;
z-index: 9;
left: 0;
background-color: #FFFFFF;
}
}
.body {
width: 100%;
min-height: 200rpx;
background: #FFFFFF;
padding: 0px 25rpx;
position: relative;
&::before{
content: "";
background-color: #FFFFFF;
position: absolute;
width: 100%;
left: 0;
top: -2rpx;
height: 2px;
}
.body-header {
font-weight: bolder;
font-size: 32rpx;
}
.body-text {
padding: 15rpx 0;
.version-text {
font-size: 26rpx;
}
}
}
.btn-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx;
background-color: $bgColor;
position: relative;
border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx;
&::after{
content: "";
display: inline-block;
width: 100%;
height: 20rpx;
position: absolute;
top: -5px;
background-color: $bgColor;
border-radius: 200%;
}
.confirm-btn {
padding: 15rpx 40rpx;
font-size: 36rpx;
color: #FFFFFF;
border-radius: 50rpx;
border: 1px solid #FFFFFF;
}
}
.cancel-btn-wrap{
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(150%);
.cancel-btn{
border: 2px solid #FFFFFF;
border-radius: 50%;
padding: 10rpx;
}
}
}
}
</style>
界面图片素材
|