需求:
app打开时自动检测是否是最新版本,如果不是出现弹框,点击升级
效果图:
实现步骤:
一,准备工作
声明一个bol值VersionFlag控制版本升级弹窗的开关,默认关闭
Website: 更新的官网地址 VersionExplain: 更新内容
myVersion: 当前版本号 (源码在最下面)
二,封装getVersion方法对版本号进行判断
这里用到的是plus方法获取版本号
请求后台接口获取后台返回的版本号
plus.runtime.version获取当前的版本
当前版本和返回的版本进行对比 如果不等于返回的版本VersionFlag变为true,打开升级弹窗 (源码在最下面)
三,点击前往升级,去升级版本
点击前往升级 plus.runtime.openURL打开升级链接,自动更新
四,打包测试
Android和iOS通用
五,源码
内联代码片
(用不到的可自行删除,rem + scss布局 ,根据自己的布局进行调整)
<template>
<div id="app">
<router-view v-if="!$route.meta.keepAlive" />
<keepAlive>
<router-view v-if="$route.meta.keepAlive" />
</keepAlive>
<div class="Version_cover" v-if="VersionFlag">
<div class="center_box">
<h1>发现新版本</h1>
<div class="explain" v-html="VersionExplain"></div>
<div class="btn" @click="Upgrade">前往升级</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
Website: "", //更新的官网地址
VersionFlag: false, //版本提示开关
VersionExplain: "", //更新内容
myVersion: "" //当前版本号
};
},
methods: {
Upgrade() {
plus.runtime.openURL(this.Website);
},
getVersion() {
//XXXXXXX 是请求的后台接口
this.$post("/XXXXXXX").then(res => {
// 字段名是你家后台返回的字段名
this.myVersion = plus.runtime.version; //当前版本号
this.Website = res.data.app_download; //更新的官网地址
this.VersionExplain = res.data.app_info; //更新内容
if (this.myVersion != res.data.app_version) {
this.VersionFlag = true;
} else {
this.VersionFlag = false;
}
});
}
},
created() {
this.getVersion();
},
mounted() {},
beforeDestroy() {}
};
</script>
<style lang="scss">
#app {
height: 100vh;
overflow: hidden;
position: relative;
}
* {
margin: 0;
padding: 0;
font-family: PingFang-SC-Regular;
font-weight: normal;
font-stretch: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
}
input,
textarea {
-webkit-user-select: auto;
}
.addCard .van-field__control {
color: #b1b1b1;
}
.Version_cover {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
z-index: 10000;
.center_box {
width: 80%;
height: 5.333333rem;
border-radius: 0.533333rem;
background: rgba(255, 255, 255);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h1 {
width: 100%;
text-align: center;
font-size: 0.4rem;
font-weight: bold;
padding: 0.266666rem 0;
}
.explain {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 2.533333rem;
padding: 0 0.4rem;
box-sizing: border-box;
font-size: 0.266666rem;
opacity: 0.9;
}
.btn {
width: 80%;
height: 1.066666rem;
background: #ff4500;
border-radius: 0.533333rem;
font-size: 0.4rem;
color: white;
line-height: 1.066666rem;
text-align: center;
letter-spacing: 1px;
position: absolute;
bottom: 0.266666rem;
left: 50%;
transform: translateX(-50%);
}
}
}
</style>