项目要求:
用户打开APP后,检测是否是最新版本,不是最新版本提示用户更新。
解决思路:
步骤一:需要一个接口,用来和本地版本号对比判断是不是最新的版本。
步骤二:需要一个弹框,提示用户更新。
步骤三:下载状态显示
效果图:
先有提示框
用户点击更新后按钮文字改为正在更新(图没截好,但是代码以实现)
具体代码:
先来弹框样式代码
<!-- #ifdef APP-PLUS -->
<view v-show="isupAppStatu" class="upAppBg">
<view class="upAppBox">
<view class="upAppBox_title">
发现新版本
<text >{{isupAppList.version}}</text>
</view>
<view class="upAppBox_content">
{{isupAppList.descrption}}
<!-- 版本描述 -->
</view>
<view v-show="updateprogress" style="width: 80%;margin-bottom: 30rpx;">
<progress :percent="updatesum" activeColor="red" stroke-width="8" />
</view>
<view @click="upApp" class="upAppBox_btn">
{{updateprogresstxt}}
</view>
</view>
</view>
<!-- #endif -->
<!-- css样式 -->
<style>
.upAppBg{
position: fixed;
width: 750rpx;
height: 100vh;
background: rgba(0,0,0,0.3);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
.upAppBox{
width: 600rpx;
padding: 20rpx 0 50rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.upAppBox_title{
line-height: 80rpx;
font-weight: bold;
}
.upAppBox_content{
padding: 20rpx 0 40rpx;
font-size: 26rpx;
}
.upAppBox_btn{
width: 400rpx;
line-height: 60rpx;
text-align: center;
background: rgb(250, 66, 55);
border-radius: 20rpx;
color: #FFFFFF;
}
</style>
弹框需要的data中的变量,首页是否显示提示框,以及更新按钮的方法
export default {
data() {
return {
isupAppStatu:false, // 更新提示框
updatesys:'', // 更新系统型号
isupAppList:'', // 更新系统型号
updateprogresstxt :'更新',
updatesum:0, // 更新进度条
updateprogress: false, // 更新进行状态
}
},
onShow() {
//#ifdef APP-PLUS
//发起http请求,res中包含安卓和ios最新版本号,更新描述等数据
getVersion().then(res => {
// 需要区分ios和安卓(两者更新APP方式不一致)
if (/android/.test(uni.getSystemInfoSync().platform)) {
var _this = this // 改变this的指向在下面方法可使用this
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
const ver = inf.version; //测试
if (res.data.android.version > ver) {
uni.hideTabBar()//隐藏底部导航栏
_this.isupAppList = res.data.android // 更新描述
_this.isupAppStatu = true // 显示更新提示框
}
})
}else if (/ios/.test(uni.getSystemInfoSync().platform)){
var _this = this // 改变this的指向在下面方法可使用this
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
const ver = inf.version; //测试
if (res.data.ios.version > ver) {
uni.hideTabBar()//隐藏底部导航栏
_this.isupAppList = res.data.ios // 更新描述
_this.isupAppStatu = true // 显示更新提示框
}
})
}
})
//#endif
},
methods: {
// 更新APP
upApp(){
// 防止用户多次点击
if (this.updateprogress) {
return
} else {
if (/android/.test(uni.getSystemInfoSync().platform)) {
this.updateprogress = true //显示进度条
this.updateprogresstxt = '正在更新...' //更改按钮文字
// console.log(this.isupAppList)
const downloadTask = uni.downloadFile({
url: this.isupAppList.address,
success: (res) => {
if (res.statusCode === 200) {
this.updateprogress = false
plus.runtime.install(res.tempFilePath); // 自动安装apk文件
plus.runtime.quit();
} else {
this.updateprogress = false
}
}
})
// 监控下载apk的进度
downloadTask.onProgressUpdate((res) => {
this.updatesum = res.progress
});
}else {
// 苹果更新需要携带参数打开APPStore跳转到上架的应用上
var urlStr = encodeURI("APPStore中你们ios的地址")
plus.runtime.openURL(urlStr, function(res) {})
}
}
}
}
}
总结
最开始的时候底部导航栏无法被覆盖,
使用uni.hideTabBar()隐藏底部导航栏。