一、先自己创建一个组件
所有逻辑都写里面了
<template>
<!-- 版本更新提示升级 -->
<view class="upbox" v-if="isUpdate">
<view class="content">
<view class="upimg">
<image class="img" :src="baseUrl + '/static/image/login/versionbj.png'" mode="widthFix"></image>
</view>
<view class="versioninfo">
<view class="title">发现新版本</view>
<view class="info">
<view v-for="(item, index) in updateContent" :key=""index>{{item}}</view>
</view>
<view class="schedule" v-if="isSchedule">
<progress :percent="upProgress" show-info stroke-width="15" />
</view>
<view class="btn">
<button type="primary" plain="true" size="mini" @click="notUpdate()">暂不升级</button>
<button type="primary" size="mini" @click="nowUpdate()">立即升级</button>
</view>
</view>
</view>
</view>
</template>
<script>
// 思路 检查是否有新版本
// 有新版本打开弹框
// 点击立即升级查看手机是安卓还是ios
// 是安卓则让它下载,ios则让它跳转到苹果商店应用地址下载
import configSetting from "@/common/config.js";
// getCheck 这个api是用来检测是否有新版本的接口
import { getCheck } from "@/api/api.js";
export default {
name:"updatedVersion",
data() {
return {
// 服务器图片地址
baseUrl: configSetting.baseUrl,
isUpdate: false,
isSchedule: false,
upProgress: 0,
Version: true,
// manifest 中应用版本名称
appVersion: '',
// manifest 中应用版本号
appVersionCode: '',
apkInfo: {},
updateContent: []
};
},
mounted() {
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
this.appVersion = wgtinfo.version;
this.appVersionCode = wgtinfo.versionCode;
this.getVersionNumber();
})
},
methods: {
// 获取后台版本号 检查是否有新版本
getVersionNumber() {
let version = this.appVersionCode;
getCheck(version).then((res)=>{
// 如果有新版本就返回值没有就会返回null
if(res) {
this.apkInfo = res;
this.updateContent = res.memo.split('\n');
this.isUpdate = true;
} else {
this.isUpdate = false;
}
})
},
// 暂不升级
notUpdate() {
this.isUpdate = false;
console.log('点击了不升级');
this.$emit('getUpdate',this.isUpdate);
},
// 点击立即升级查看手机是安卓还是ios
nowUpdate() {
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
this.androidUpdate();
} else if (systemInfo.platform === 'ios') {
this.iosUpdate();
}
},
// 安卓更新
androidUpdate() {
const downloadTask = uni.downloadFile({
url: this.apkInfo.filePath, //仅为示例,并非真实的资源
success: (res) => {
if (res.statusCode !== 200) {
uni.showToast({
title: '下载安装包失败',
icon: 'error',
duration: 2000
});
this.isSchedule = false;
this.isUpdate = false;
return;
}
// 异步请求
if (res.statusCode === 200) {
console.log('更新成功');
// 更新好直接安装,下次启动生效
plus.runtime.install(res.tempFilePath, {
force: false
}, () => {
// uni.showModal({
// title: '安装成功是否重启?',
// success: res => {
// if (res.confirm) {
// //更新完重启app
// plus.runtime.restart();
// }
// }
// });
}, err => {
uni.showToast({
title: '更新失败',
icon: 'error',
duration: 2000
});
})
}
},
fail: (err) => {
console.log('err',err);
},
//接口调用结束 调用成功、失败都会执行
complete: ()=>{
downloadTask.offProgressUpdate();//取消监听加载进度
}
});
//监听下载进度
downloadTask.onProgressUpdate(res => {
this.isSchedule = true;
this.upProgress = res.progress;
if(res.progress >= 100) {
this.isSchedule = false;
this.isUpdate = false;
this.$emit('getUpdate',this.isUpdate);
}
});
},
// 苹果更新
iosUpdate() {
this.$emit('getUpdate',false);
//appleId=>自己公司在苹果商店的appleId
let appleId= 15******74;
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);
});
},
},
}
</script>
<style scoped lang="scss">
.upbox {
position: fixed;
z-index: 99;
top: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: rgba(153, 153, 153, 0.75);
}
.content {
position: relative;
margin: 300rpx auto;
width: 650rpx;
.upimg {
height: 420rpx;
width: 100%;
.img {
height: 100%;
width: 100%;
}
}
.versioninfo {
padding: 15rpx 30rpx;
border-radius: 0 0 25rpx 25rpx;
background-color: #fff;
}
.title {
position: absolute;
top: 150rpx;
font-size: 48rpx;
color: #fff;
}
.info {
position: relative;
padding-left: 38rpx;
view {
height: 50rpx;
line-height: 50rpx;
}
}
.schedule {
margin: 15rpx;
/deep/.uni-progress-bar {
border-radius: 30rpx;
}
/deep/.uni-progress-inner-bar {
border-radius: 30rpx;
}
}
.btn {
height: 110rpx;
margin-top: 30rpx;
display: flex;
justify-content: space-evenly;
button {
width: 46%;
height: 75rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
二、在首页中引入(导入、注册、使用) [进入APP首页自动检测如果有新版本则弹出更新提示]
// page/index.vue
<!-- #ifdef APP-PLUS -->
<updatedVersion/>
<!-- #endif -->
// #ifdef APP-PLUS
import updatedVersion from "@/components/updatedVersion.vue";
// #endif
components: {
// #ifdef APP-PLUS
updatedVersion,
// #endif
selectpopup,
areaweather
},
三、在’‘我的’'页面中 点击版本号;
<!-- #ifdef APP-PLUS -->
<view class="list-item" @click="open()">
<image class="list-item-left" :src="baseUrl + '/static/image/my/user-listicon4@3x.png'"></image>
<text class="list-item-content">系统版本 <text class="iconUp" v-show="isUpdate">●</text></text>
<text class="version">{{ 'V' + appVersion }}</text>
</view>
<view v-if="isShowDialog">
<updatedVersion @getUpdate="getUpdate" />
</view>
<!-- #endif -->
import updatedVersion from "@/components/updatedVersion.vue";
data() {
return {
// 服务器图片地址
baseUrl: configSetting.baseUrl,
appVersion: '',
isUpdate: false,
isShowDialog: false,
}
},
components: {
// #ifdef APP-PLUS
updatedVersion,
// #endif
},
methods: {
getUpdate(val) {
this.isShowDialog = val
},
open(){
if(this.isUpdate) {
this.isShowDialog = true;
console.log('打开弹窗',this.isShowDialog);
}else{
console.log('没有新版本不做处理');
}
},
},
onShow() {
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
this.appVersion = wgtinfo.version;
let version = wgtinfo.versionCode;
getCheck(version).then((res)=>{
// 如果有新版本就返回值没有就会返回null
if(res) {
this.isUpdate = true;
} else {
this.isUpdate = false;
}
})
})
}