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

相关推荐
2401_8827275740 分钟前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder43 分钟前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂1 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand1 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL1 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿1 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫2 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256142 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小马哥编程3 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6663 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react