uniapp检查app更新并下载,监听下载进度

检查的方法是放在app.vue里面的

	<script>
	import { hostCharge } from "util/httpUrl.js"
	import Util from "util/util.js"
		
	export default {
		onLaunch: function() {
			
			// console.log('App Launch')
			//#ifdef APP-PLUS
			this.checkUpdateVersion()
			
			//#endif
			
		},
		methods: {
			//检查版本更新
			async checkUpdateVersion(){
				//锁定屏幕方向
				plus.screen.lockOrientation('portrait-primary')
				try{
					//获取版本更新
					let { data: { data, code, flag, message } } = await Util.httpRequest({
						url: `${hostCharge}/check/version`,
						data: {
							versionCode: uni.getStorageSync('versionCode')
						}
					})
					if(code === 20000){
						uni.showModal({
							title: '温馨提示',
							content: `有新的版本可下载${data.versionCode}是否下载?`,
							success:(res) => {
								if(res.confirm){
									console.log(res.confirm)
									//判断手机类型
									// 也可以用5+app的方法:plus.os.name.toLowerCase() == 'ios'
									if(uni.getSystemInfoSync().platform === 'ios'){
										plus.runtime.openURL(data.updateUrl)
									} else {
										//新建下载任务
										var downloadTask = plus.downloader.createDownload(data.updateUrl, {}, (download,status) => {
											if(status === 200){
												//安装APK文件
												plus.runtime.install(download.filename, {}, function(error) {
													uni.showModal({
														showCancle: false,
														content: '安装失败'
													})
												})
											} else {
												uni.showModal({
													showCancle: false,
													title: '更新失败!!!'
												})
											}
										})
										try {
											// 开始下载
											downloadTask.start()
											//监听下载
											var that = this 
											var showLoading = plus.nativeUI.showWaiting("正在下载")
											downloadTask.addEventListener('statechanged', function(download,status){
												switch (download.state) {
													case 1:
														uni.showToast({
															title: '下载中'
														})
														break;
													case 2:
														//出现下载弹框和进度
														that.$scope.globalData.updateProgress.popup = true
														that.$scope.globalData.updateProgress.percent = parseInt(parseFloat(download.downloadedSize) / parseFloat(download.totalSize) * 100)
																	
														// uni.showLoading({
														// 	title: `正在下载${that.$scope.globalData.updateProgress.percent}%`
														// })
														break;
													case 3:
														plus.nativeUI.closeWaiting()
												}
											})
										} catch (err) {
											plus.nativeUI.closeWaiting()
											uni.showModal({
												showCancle: false,
												content: '下载失败,请稍后重试'
											})
										}
									}
									//检验过一次版本就加入缓存,不再检测
									uni.setStorageSync('isCheckVersion', true)
								}
							}
						})
					} else {
						uni.showModal({
							showCancle: false,
							content: message
						})
					}
				} catch(e) {
					uni.showModal({
						showCancle: false,
						content: '获取数据失败'
					})
				}
			}
		},
		globalData: {
			userInfo: {},
			restaurantData: {},
			//下载弹窗和进度条
			updateProgress: {
				popup: false,
				precent: 0
			}
		}
	}
</script>

在首页的onReady生命周期进行判断updateProgress的popup,为true的显示弹框,对precent进行赋值
弹框我就没展示了,虽然页面有点丑,哈哈哈
在这里插入图片描述

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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,并且在下载过程中可以实时查看下载进度
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值