App更新下载安装包与跳转应用商店

当前为组件，可自定义下载

效果图：

<template>
	<uni-popup ref="popup" type="center" class="update-app" :safe-area="true" :is-mask-click="false"
		:mask-click="false">
		<view class="content" v-if="type == 1">
			<view class="box">
				<image class="back" :src="image_domain_name+'/images/home/bbsj.png'" mode=""></image>
				<view class="tit">发现新版本</view>
				<view class="v">V5.4.0</view>
				<view class="subtitle">更新内容：</view>
				<view class="info">
					1、更新内容更新内容更新内容更新内容
					2、更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新内容更新
					3、更新内容更新内容更新内容
				</view>
				<view class="f-c-c btnbox">
					<view class="f-c-c btn close" v-if="!isCompel" @click="close">暂不升级</view>
					<view class="f-c-c btn upgrade" :style="isCompel ? 'width:480rpx;':''" @click="upgrade">立即升级</view>
				</view>
			</view>
			<view class="close-icon" @click="close" v-if="!isCompel">
				<image class="icon" :src="image_domain_name+'/images/home/del-b.png'" mode=""></image>
			</view>
		</view>
		<view class="content download" v-if="type == 2">
			<view class="tit">{{bar < 100 ? '下载中':'下载完成'}}</view>

			<view class="bar-box">
				<view class="bar" :style="'width:'+bar+'%;'">
					<text v-if="bar>0" class="text">{{bar}}%</text>
				</view>
			</view>
			<view class="size">{{totalBytesWritten}}MB/{{totalBytesExpectedToWrite}}MB</view>

			<view class="f-c-c btnbox">
				<view class="f-c-c btn close" @click="closeDow">取消</view>
				<view class="f-c-c btn upgrade" :style="bar < 100 ? 'background: #ccc;':''" @click="install">安装</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		name: "update-app",
		data() {
			return {
				bar: 0, //下载进度
				totalBytesWritten: '0', //内存进度
				totalBytesExpectedToWrite: '0', //总储存
				type: 1, //1 提示  2 下载
				isCompel: true, //是否强制更新
				downloadTask: null,

				tempFilePath: '', //安装地址
			};
		},
		computed: {
			...mapState({
				image_domain_name: state => state.image_domain_name
			}),
		},
		methods: {
			//判断是否需要升级
			isUpDate() {

			},

			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			// 立即升级 下载
			upgrade() {
				let that = this;

				if (plus.os.name == "Android") {// && false
					this.type = 2;
					that.downloadTask = uni.downloadFile({
						url: 'https://lequan.kongjz.com/lequan/lequan_file/1646251955134-74.apk', //仅为示例，并非真实的资源
						success: (res) => {
							console.log('下载成功', res);
							if (res.statusCode === 200) {
								that.tempFilePath = res.tempFilePath;
							}
						},
						fail: (err) => {
							console.log('下载失败', err)
						}
					});

					that.downloadTask.onProgressUpdate((res) => {
						that.bar = res.progress;
						that.totalBytesWritten = (res.totalBytesWritten / 1024 / 1024).toFixed(2);
						that.totalBytesExpectedToWrite = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2);

						// 满足测试条件，取消下载任务。
						if (res.progress > 100) {
							that.downloadTask.abort();
						}
					});
				} else {
					this.openAppStore();
				}
			},

			// 取消下载 安装
			closeDow() {
				if (this.tempFilePath == '') {
					this.downloadTask.abort();
				}
				this.close();
			},

			// 安装
			install() {
				if (this.tempFilePath != '') {
					uni.openDocument({
						filePath: this.tempFilePath,
						success: function(res) {
							console.log('打开文档成功');
						}
					});
				}
			},

			// 打开应用商城
			openAppStore(marketPackageName) {
				if (plus.os.name == "Android") {
				  // 跳转安卓应用市场
				  let appurl = "market://details?id=包名" //这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
				  plus.runtime.openURL(appurl)
				} else {
				  // 跳转AppStore
				  let appleId = 11111111;//纯数字id
				  plus.runtime.launchApplication({
				    action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
				  }) 
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.f-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.update-app {
		z-index: 999;
	}

	.content {
		width: 600rpx;
		text-align: center;

		.box {
			text-align: left;
			background: #FFFFFF;
			border-radius: 6px;
			position: relative;
			padding: 76rpx 40rpx 40rpx;

			.back {
				position: absolute;
				right: 0px;
				top: -94rpx;
				width: 292rpx;
				height: 342rpx;
			}

			.tit {
				font-size: 42rpx;
				font-weight: bold;
				color: #333333;
			}

			.v {
				margin-top: 20rpx;
				background: #F9F4EE;
				border-radius: 45px;
				display: inline-block;
				font-size: 22rpx;
				font-weight: 500;
				padding: 10rpx;
				color: #C9935C;
			}

			.subtitle {
				margin-top: 56rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.info {
				padding-top: 28rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}


		}

		.btn {
			width: 240rpx;
			height: 68rpx;
			border-radius: 34rpx;
		}

		.btnbox {
			padding-top: 54rpx;

			.close {
				margin-right: 20rpx;
				color: #333333;
				background: #F5F5F5;
			}

			.upgrade {
				color: #FFFFFF;
				background: #333333;
			}
		}

		.close-icon {
			display: inline-block;
			margin: auto;
			margin-top: 62rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.download {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 60rpx 50rpx 40rpx;

		.tit {
			font-size: 42rpx;
			font-weight: bold;
			color: #333333;
		}

		.bar-box {
			margin-top: 114rpx;
			width: 520rpx;
			height: 12rpx;
			background: rgba(201, 147, 92, 0.2);
			border-radius: 3px;

			.bar {
				height: 12rpx;
				background: #C9935C;
				border-radius: 6rpx;
				position: relative;

				.text {
					position: absolute;
					right: 0px;
					top: -50rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #C9935C;
				}
			}
		}

		.size {
			padding-top: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	}
</style>