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的话自行给提示 去应用商店下载

相关推荐
liulilittle5 分钟前
C++ 浮点数封装。
linux·服务器·开发语言·前端·网络·数据库·c++
wordbaby16 分钟前
Expo 进阶指南:赋予 TanStack Query “原生感知力” —— 深度解析 AppState 与 NetInfo
前端·react native
Moment23 分钟前
从美团全栈化看 AI 冲击:前端转全栈,是自救还是必然 🤔🤔🤔
前端·后端·面试
天问一30 分钟前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
韩立学长2 小时前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js
优弧2 小时前
离开舒适区100天,我后悔了吗?
前端·后端·面试
胡gh2 小时前
css的臂膀,前端动效的利器,还是布局的“隐形陷阱”?
前端·css·html
灵感菇_2 小时前
Flutter Riverpod 完整教程:从入门到实战
前端·flutter·ui·状态管理
用户21411832636022 小时前
紧急修复!Dify CVE-2025-55182 高危漏洞,手把手教你升级避坑
前端
前端 贾公子3 小时前
Vue响应式原理学习:基本原理
javascript·vue.js·学习