uni-app android升级更新弹窗
黑猫 2022-01-25 00:09 557

uni-app 经常需要用到在线推送apk或wgt差量包让客户将app升级至最新,那就需要用户打开app后,后台检测服务器版本与本机app版本是否需要更新,需要更新的情况下弹窗提示客户进行更新,下面是弹窗提示升级的组件代码

在compponents新建一个组件"app-update-version",复制以下代码至文件并修改链接服务器的方法

<template>
	<view>
		<view class="UpdateBg" v-show="ShowUpdate"></view>
		<view class="VersionPopup" v-show="ShowUpdate">
			<image class="VersionPopup_Image" src="../../static/PublicImg/AppVersionUpdate.png" mode="widthFix"></image>
			<view class="VersionPopup_Title">
				发现新版本,点击下方按钮一键升级!
			</view>
                        <!--升级内容提示-->
			<view class="VersionPopup_Content">
				<view v-for="item in UpdateContent">
					{{item}}
				</view>
			</view>
			<view v-show="!ShowVersionLoading&&!UpdateSuccess" class="VersionPopup_UpdateBtn" @click="UpdateVersion">
				立即升级
			</view>
                        <!--升级时的进度条-->
			<view v-show="ShowVersionLoading && !UpdateSuccess" class="VersionPopup_LoadingBox">
				<view class="VersionPopup_LoadingBlock"></view>
				<view class="VersionPopup_LoadingNum" :style="'left:'+UpdateLoadingNum+'%'">{{UpdateLoadingNum}}%</view>
				<view class="VersionPopup_LoadingRedBlock" :style="'width:'+UpdateLoadingNum+'%'"></view>
				<view class="VersionPopup_LoadingText">{{UpdateLoadingText}}</view>
			</view>
			<view v-show="UpdateSuccess" @click="AppRestart" class="VersionPopup_UpdateBtn">
				更新完成,立即重启
			</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 lang="scss" 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>

 

弹窗头部的图片

 

以上就是更新弹窗的全部方法了,将该组件引用到app首页、或者用户经常打开的页面。

 

本文出自kcblog博客,转载请标明出处。

 

本网站提供的文章除原创外均转载自其他网站,本网站只为更好的记录及学习技术经验
若网站内转载的文章侵犯了您的版权,请通过 意见反馈 告知本网站,我们会尽快删除相关信息
Copyright©2021-2021 kcBlog博客 版权所有 粤ICP备2021119076号 v1.0.0 栈谷统计