uni-app android升级更新弹窗
uni-app 需要用到在线推送apk
或wgt差量包让客户将app升级至最新,需要用户打开app后
后台检测服务器版本与本机app版本是否需要更新
需要更新弹窗提示客户进行更新
在compponents新建一个组件"app-update-version"
代码至文件并修改链接服务器的方法
<template>
<view>
<view v-show="ShowUpdate"></view>
<view v-show="ShowUpdate">
<image src="../../static/PublicImg/AppVersionUpdate.png" mode="widthFix"></image>
<view>
发现新版本,点击下方按钮一键升级!
</view>
<!--升级内容提示-->
<view>
<view v-for="item in UpdateContent">
{{item}}
</view>
</view>
<view v-show="!ShowVersionLoading&&!UpdateSuccess" @click="UpdateVersion">立即升级</view>
<!--升级时的进度条-->
<view v-show="ShowVersionLoading && !UpdateSuccess">
<view></view>
<view :style="'left:'+UpdateLoadingNum+'%'">{{UpdateLoadingNum}}%</view>
<view :style="'width:'+UpdateLoadingNum+'%'"></view>
<view>{{UpdateLoadingText}}</view>
</view>
<view v-show="UpdateSuccess" @click="AppRestart">
更新完成,立即重启
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ShowUpdate: false, //显示更新界面
ShowVersionLoading: false, //显示进度条
UpdateLoadingNum: 0, //下载进度
UpdateLoadingText: '资源下载中,请稍后...',
UpdateSuccess:false,
UpdateContent:'',//更新内容
wgtUrl: '',
apkUrl: '',
}
},
created() {
let _this=this;
setTimeout(function(){
_this.OnPlusUpdateReady();
},3000);
},
methods: {
OnPlusUpdateReady() {
// #ifdef APP-PLUS
let _this = this;
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
uni.request({
url: '', //服务器检测app版本的地址
data: {
version: widgetInfo.version, //本机app的版本号
name: widgetInfo.name, //本机app的名称
},
dataType: 'json',
method: 'POST',
success: (result) => {
if (result.statusCode != 200) {
return;
}
//从服务器中返回的结果内容
var _data = result.data;
if(_data.content!=''){ //升级内容
var context =_data.content.split("<br>");
_this.UpdateContent=context;
}
if (_data.update && _data.wgtUrl) { //判断是否要更新,并且是不是wgt差量更新
//资源差量升级,就是小文件更新
_this.ShowUpdate = true;
_this.wgtUrl = _data.wgtUrl;
} else if (_data.update && _data.pkgUrl) { //判断是否要更新,并且是否整包apk更新
//apk大版本资源更新
_this.ShowUpdate = true;
_this.apkUrl = _data.pkgUrl;
}
}
});
});
// #endif
},
UpdateVersion() { //触发更新事件
let _this = this
_this.ShowVersionLoading = true; //显示进度条
if (this.wgtUrl != '') { //资源包更新
_this.WgtUpdate();
}else if(this.apkUrl!=''){
_this.ApkUpdate();
}
},
WgtUpdate() { //wgt更新进度
let _this=this;
if(_this.wgtUrl==''){
return;
}
var downloadTask = uni.downloadFile({
url:_this.wgtUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult.tempFilePath, {
force: false
}, function() {
setTimeout(function(){
_this.UpdateSuccess=true;
},3000);
}, function(e) {
if(apkurl==undefined||apkUrl==null|| apkUrl==''){
_this.UpdateLoadingText="更新失败,请从官网下载最新版APP";
}else{
_this.ApkUpdate();
}
});
}else{
_this.UpdateLoadingText="下载更新包失败,请重启APP再次更新";
}
},
fail: (result) => {
}
});
downloadTask.onProgressUpdate(function(res){
_this.UpdateLoadingNum=res.progress;
if(res.progress>=100){
_this.UpdateLoadingText='正在更新资源,请稍等..';
}
});
},
ApkUpdate(){ //apk更新进度
let _this=this;
if(uni.getSystemInfoSync().platform=='android'){
var dtask = plus.downloader.createDownload(this.apkUrl, {method:"GET"}, function(d, status) {
if (status == 200) { //下载成功
plus.runtime.install(d.filename);
} else {
_this.UpdateLoadingText("升级失败,请从官网下载最新版APP");
}
});
dtask.addEventListener("statechanged", function(task, status) {
switch (task.state) {
case 1:
//开始
break;
case 2:
//已连接到服务器
break;
case 3:
//已接收到数据
var current =_this.$CommonFunc.$floatFormatter(100 * (task.downloadedSize / task.totalSize),2);
_this.UpdateLoadingNum=current;
break;
case 4:
//下载完成
_this.UpdateLoadingText="正在更新资源,请稍等...";
break;
default:
break;
}
});
dtask.start();
}
},
AppRestart(){ //更新后需要重启app才生效
plus.runtime.restart();
}
}
}
</script>
<style scoped>
.UpdateBg {
position: fixed;
top: 0;
background-color: #000000;
opacity: 0.5;
z-index: 999;
width: 100%;
height: 100%;
max-width: 768px;
}
.VersionPopup {
position: fixed;
top: 50%;
left: 50%;
background-color: #FFFFFF;
min-height: 200px;
width: 80%;
z-index: 1000;
transform: translate(-50%, -50%);
border-radius: 10upx;
}
.VersionPopup_Image {
width: 100%;
top: -82upx;
}
.VersionPopup_Title {
padding: 0 30upx;
font-weight: bold;
color: #333333;
font-size: 28upx;
margin: -60upx 0 30upx 0;
}
.VersionPopup_Content {
padding: 0 30upx;
color: #666666;
font-weight: initial;
max-height: 330upx;
overflow: hidden;
overflow-y: auto;
}
.VersionPopup_UpdateBtn {
background-color: #FF5555;
color: #FFFFFF;
text-align: center;
width: calc(100% - 60upx);
margin: 0 auto;
margin-top: 60upx;
margin-bottom: 40upx;
padding: 16upx 0;
border-radius: 10upx;
}
.VersionPopup_LoadingBox {
position: relative;
text-align: center;
width: 80%;
margin: 0 auto;
margin-top: 65upx;
margin-bottom: 50upx;
transform: translateX(-2%);
}
.VersionPopup_LoadingBlock {
background-color: #F4F4F4;
height: 16upx;
margin-bottom: 10upx;
border-radius: 20upx;
}
.VersionPopup_LoadingNum {
position: absolute;
left: 0%;
top: -45upx;
font-size: 12upx;
color: #FF5555;
font-weight: bold;
}
.VersionPopup_LoadingRedBlock {
position: absolute;
left: 0;
top: 0;
height: 16upx;
width: 100%;
background-color: #FF5555;
border-radius: 20upx;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.VersionPopup_LoadingRedBlock::after {
content: ' ';
position: absolute;
width: 16upx;
height: 16upx;
border: 6upx solid #FF5555;
right: -21upx;
top: -6upx;
border-radius: 100%;
background-color: #FFFFFF;
}
.VersionPopup_LoadingText {
color: #999999;
font-size: 24upx;
}
</style>
弹窗头部的图片
//kcblogv.com/detail?dataid=11
尊贵的董事大人
英文标题不为空时 视为本栏投稿
需要关键字 描述 英文标题