uniapp 移动端app判断用户app版本是否是最新版(Android)

1.在uniapp项目中的App.vue文件下

javascript 复制代码
<script>
	import { ref } from 'vue';
	const token = ref();
	export default {
		onLaunch: function() {
			// #ifdef APP
			//获取打包时设置的版本号,然后存到storage里
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				uni.setStorage({
					key: 'VersionCode',
					data: wgtinfo.versionCode
				})
			})
			// #endif
		},
		onShow: function() {
			// console.log('App Show')
		},
		onHide: function() {
			// console.log('App Hide')
		},
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-plus/index.scss";

	html,
	body {
		overflow: hidden;
		overscroll-behavior: none;
	}
</style>
  1. 具体实现代码
javascript 复制代码
<template>
<view class="firm" v-show="showbaifenbi">
			已下载:
			<progress :percent="baifenbi" show-info stroke-width="3" />
		</view>
		<view class="fullScreenMask" v-if="ifFullScreenMask">
			<view class="kuang">
				<view class="tit">
					温馨提示
				</view>
				<view class="al_tit">
					当前版本不是最新版本,请前往应用商店下载!
				</view>
			</view>
		</view>

</template>
// 显示下载进度
let showbaifenbi = ref(false);
let baifenbi : any = ref(0);
let ifFullScreenMask = ref(false)

onLoad(() => {
		uni.getSystemInfo({
			success: function (resInfo : any) {
				userEquipment.value = resInfo.osName
				uni.getStorage({
					key: 'VersionCode',
					success: async (resData) => {
						// 获取最新版本的app
						let res = await proxy.$http(
							"app_version/getAppVersionByNew",
						);
						let urlData = Url.value + res.data.url;
						if (Number(res.data.version_code) > Number(resData.data)) {
							if (userEquipment.value == 'android') {
								ifFullScreenMask.value = false
								// 方法一 :直接调取打开浏览器
								// plus.runtime.openURL(urlData)
								// 方法二 : 提示用户
								uni.showModal({
									title: '提示',
									content: '当前版本不是最新版本,点击下载',
									showCancel: false,
									success: function (res : any) {
										plus.nativeUI.showWaiting(`正在下载...`);
										showbaifenbi.value = true
										var dtask = plus.downloader.createDownload(
											urlData,
											{
												method: "GET"
											}, (d, status) => {
												console.log(d);
												if (status == 200) {
													plus.runtime.install(d.filename)
												} else {
													plus.nativeUI.alert("安装失败,请稍候重试: " + status)
												}
											});
										//监听下载
										dtask.addEventListener("statechanged", listenStatechanged)
										dtask.start();
									}
								});
							} else {
								ifFullScreenMask.value = true
								return
							}
						} else {
							uni.showToast({
								title: '当前已经是最新版本',
								icon: 'none',
								position: 'bottom'
							});
							return
						}
					}
				})
			}
		});

	})
	/* 监听下载进度 */
	function listenStatechanged(task : any) {
		let num : any = parseInt(task.downloadedSize) / parseInt(task.totalSize) * 100
		baifenbi.value = parseInt(num)
		if (num == 100) {
			showbaifenbi.value = false
			plus.nativeUI.closeWaiting();
			uni.showModal({
				title: '提示',
				content: '下载完成,请安装新版本',
				showCancel: false,
				success: () => {
					plus.runtime.quit();
				}
			})
		}
	}

ios的话自行给提示 去应用商店下载

相关推荐
lUie INGA30 分钟前
rust web框架actix和axum比较
前端·人工智能·rust
OPHKVPS1 小时前
VoidStealer新型窃密攻击:首例利用硬件断点绕过Chrome ABE防护,精准窃取v20_master_key
前端·chrome
月光宝盒造梦师1 小时前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
gechunlian881 小时前
SpringBoot3+Springdoc:v3api-docs可以访问,html无法访问的解决方法
前端·html
驾驭人生2 小时前
ASP.NET Core 实现 SSE 服务器推送|生产级实战教程(含跨域 / Nginx / 前端完整代码)
服务器·前端·nginx
酉鬼女又兒2 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士2 小时前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js
我是伪码农3 小时前
HTML和CSS复习
前端·css·html
林恒smileZAZ3 小时前
前端实现进度条
前端
前端老石人3 小时前
邂逅前端开发:从基础到实践的全景指南
开发语言·前端·html