uniapp版本升级,下载安装功能逻辑部分

页面效果如下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、把版本升级提示封装为子组件,方便随时调用,我这里用了

<script>
	export default {
		components: {},
		props: {
			//show: 加载组件,但是不弹出提示框
			show: {
				type: [Boolean],
			},
			//url: 如果是首页,不提示 已是最新版本
			url:{
				type: [String],
			}
		},
		data() {
			return {
				show2:false,//是否弹出更新提示框
				upshow: false,//是否显示进度条
				android:{},//是否更新数据,请求接口后存起来备用。
				progress:0,//下载进度
			}
		},
		watch:{
			//show:监听组件加载,判断是否需要弹出更新提示
			show(newVal,oldVal){
				if(newVal){
					let _this = this;
					this.android = JSON.parse(uni.getStorageSync('android')); // 读取版本数据
					// let version = this.android.version.split(".").join(""); // 需要更新的版本 1.0.1  === 101
					let version = 99
					plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
						let time_version = widgetInfo.versionCode;// 当前APP的版本 : 100
						if(time_version < version){ // 当前版本小于更新版本,提示更新,
							_this.show2 = true;//可以弹出更新提示框
							uni.hideTabBar();// APP 无法遮挡tabbar,直接隐藏掉
						}else{
							if(_this.url != 'index'){
								uni.showToast({
									title: "已是最新版本",
									icon:'none',
								});
							}
							_this.$emit('closeVersion');//关闭show组件
						}
						
					})
				}
			}
		},
		
		onShow() {
			
		},
		methods: {
			//升级
			up() {
				let _this = this;
				this.progress = 0;
				this.upshow = true;//切换进度条显示
				//开启下载任务
				const downloadTask = uni.downloadFile({
					url: _this.android.download_url,
					success: (res) => {
						if (res.statusCode === 200) {
							plus.runtime.install(res.tempFilePath);下载成功安装apk
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon:'none',
							mask:true,
							title: '安装失败,请重新下载',
						});
						setTimeout(()=>{
							_this.close();
						},1500)
					},
					// 接口调用结束
					complete() {
						downloadTask.offProgressUpdate();//取消监听加载进度
						setTimeout(()=>{
							_this.close();
						},1500)
					}
				});
				//监听下载进度
				downloadTask.onProgressUpdate((res) => {
					_this.progress = res.progress;
				});
			},
			close() {
				this.show2 = false;//关闭更新弹窗
				this.upshow = false;//关闭进度条
				uni.showTabBar();//显示tabbar
				this.$emit('closeVersion');//关闭show组件
			}

		},
	}
</script>
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uniapp是一个基于Vue.js框架的跨平台应用开发框架,可以使用一套代码同时在多个平台上进行开发,例如iOS、Android和Web等。在uniapp中实现app端的在线升级功能以及下载进度调控需经过以下步骤: 首先,在后端服务器上准备好最新版本的app文件,并提供相应的下载链接。 其次,在uniappApp.vue文件中,监听app的启动事件,通过调用uni.request方法向后端发送请求获取最新版本的信息。 然后,与服务器端返回的版本信息进行比较,判断是否有新版本需要更新。如果有新版本需要更新,将服务器端返回的下载链接存储到本地。 接下来,通过uni.downloadFile方法进行文件下载,同时使用uni.showLoading方法显示下载进度。 在下载过程中,可以通过uni.onDownloadProgress方法监听下载进度变化,并根据下载进度进行相应的界面更新或用户提示。 当下载完成后,使用uni.hideLoading方法隐藏下载进度提示,并提示用户是否立即安装新版本。如果用户选择立即安装,可以通过uni.openDocument方法打开下载app文件进行安装。 最后,如果用户选择稍后安装或者取消安装,可以在合适的时机再次提醒用户是否需要更新,重复上述步骤。 总之,通过以上步骤,可以实现uniapp app端的在线升级功能以及下载进度调控,让用户可以方便地获取到最新版本的app,并且在下载过程中可以实时查看下载进度。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值