IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> uniApp Android端版本自动更新提示组件 -> 正文阅读

[移动开发]uniApp Android端版本自动更新提示组件

主要的逻辑是将当前设备上的App版本号与后台存储的最新版本进行对比,判断是否进行更新操作,实现效果如下

自动更新提示界面效果

组件中利用了部分的uview的组件,可根据项目中所医疗组件包进行替换
template部分
<template>
	<view class="update-version-container" >
		<view class="container" v-show='showVersionModel'>
			<view class="content">
				<view class="header">
					<image src="../static/update.png" mode=""></image>
				</view>
				<view class="body">
					<text class="body-header">发现新版本 (v.{{ version }})</text>
					<view class="body-text">
						<text class="version-text">{{content}}</text>
					</view>
				</view>
				<view class="btn-wrap">
					<text class="confirm-btn" @click="handleConfirmUpdate" >立即下载更新</text>
				</view>
				<view class="cancel-btn-wrap">
					<u-icon class="cancel-btn" name='close' color='#fff' size="40"  @click="handleCancel" ></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
Javascript逻辑部分
<script>
	import { getAppVersionInfo } from "../api/commin.api.js" // 自行封装的后端接口调用;
	export default {
		name: "updateVerison",
		props: {
			
			// 是否启动校验更新
			hasValidUpdate:{
				type: Boolean,
				default: () => true,
				
			}
		},
		data() {
			return {
				content: "1.更新1;\n2.更新2;\n3.更新3;",
				version: "1.4.1",
				showVersionModel: false,
				dtask: null,
				curVersionInfo: {},
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.hasValidUpdate && this.checkHasUpdateVersion();
			// #endif
		},
		methods: {
			// 检查是否需要进行更新
			checkHasUpdateVersion(){
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "android") {
							plus.runtime.getProperty(plus.runtime.appid, (inf) =>  {
								this.curVersionInfo.wgtVer = inf.version; //获取当前版本号
								this.curVersionInfo.version = plus.runtime.version;
								this.androidCheckUpdate();
							});
							
						}
					}
				})
			},
			// 版本对比
			androidCheckUpdate(){
				// 根据接口返回处理;
				getAppVersionInfo().then(res => {
					this.content = res.data.note,
					this.version = res.data.version;
					if (res.data.version != this.curVersionInfo.wgtVer) {
						this.showVersionModel = true;
						this.dtask = plus.downloader.createDownload(res.data.wgtUrl, {}, (d, status) => {
							// 下载完成  
							if (status == 200) {
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, (error) => {
									this.$showToast("安装失败")
								})
							} else {
								this.$showToast("更新失败")
							}
							uni.hideLoading();
						});
					}
				}).catch(err => {
					console.log("err", JSON.stringify(err));
				})
			},
			handleConfirmUpdate(){
				console.log("confirm update");
				this.showVersionModel = false;
				uni.showLoading({
					title: "下载更新中",
					mask: true,
				});
				this.dtask.start();
			},
			// 取消
			handleCancel(){
				this.showVersionModel = false;
			}
		}
	}
</script>
css样式部分
<style scoped lang="scss">
	$bgColor: #4e5ae0;
	
	.update-version-container {
		.container{
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba($color: #000000, $alpha: .6);
			z-index: 999999;
		}
		.content {
			// border: 1px solid #FFFFFF;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -60%);
			width: 75vw;
			border-radius: 30rpx;
			.header {
				width: 100%;
				position: relative;
				overflow-y: hidden;
				image {
					width: 100%;
					height: 350rpx
				}
				&::before{
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					top: 25%;
					left: 0px;
					background-color: $bgColor;
					border-radius: 30rpx;
					z-index: -1;
				}
				&::after {
					content: "";
					display: inline-block;
					width: 100%;
					position: absolute;
					height: 30rpx;
					bottom: -5px;
					z-index: 9;
					left: 0;
					background-color: #FFFFFF;
				}
			}

			.body {
				width: 100%;
				min-height: 200rpx;
				background: #FFFFFF;
				padding: 0px 25rpx;
				position: relative;
				&::before{
					content: "";
					background-color: #FFFFFF;
					position: absolute;
					width: 100%;
					left: 0;
					top: -2rpx;
					height: 2px;
				}
				.body-header {
					font-weight: bolder;
					font-size: 32rpx;
				}

				.body-text {
					padding: 15rpx 0;

					.version-text {
						font-size: 26rpx;

					}
				}

			}

			.btn-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 30rpx;
				background-color: $bgColor;
				position: relative;
				border-bottom-left-radius: 30rpx;				
				border-bottom-right-radius: 30rpx;				
				&::after{
					content: "";
					display: inline-block;
					width: 100%;
					height: 20rpx;
					position: absolute;
					top: -5px;
					background-color: $bgColor;
					border-radius: 200%;
				}
				.confirm-btn {
					padding: 15rpx 40rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					border-radius: 50rpx;
					border: 1px solid #FFFFFF;
				}
			}
			
			.cancel-btn-wrap{
				text-align: center;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: translateY(150%);
				.cancel-btn{
					border: 2px solid #FFFFFF;
					border-radius: 50%;
					padding: 10rpx;
				}
			}
		}
	}
</style>

界面图片素材
在这里插入图片描述

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-09-22 14:48:20  更:2021-09-22 14:50:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:55:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码