uni-app应用更新（Android端）

关于app更新，uni-app官方推荐的是 uni-upgrade-center，看了下比较繁琐，因此这里自己实现检查更新并下载安装的逻辑。

1.界面效果

界面中的弹框和进度条采用了uView 提供的组件

2.检查更新并下载安装

一、版本信息配置在服务端，请求服务端接口判断是否需要更新。

二、点击下载按钮，则开始下载App安装包，并监听下载进度，实时更新下载进度条

注意：下载App如果是在浏览器测试，可能会有跨域的问题，需要后端服务允许跨域。

三、待下载完成后开始安装。

安装App采用的是 uni-installApk插件，请自行导入项目

uni-installApk - DCloud 插件市场

3.完整代码

update.vue

javascript 复制代码

<template>
	<u-modal :show="show"   :showConfirmButton="false">
		<view class="box-a4">
			<image class="img-up" mode="widthFix" 
				src="https://beilizhengxuan.oss-cn-hangzhou.aliyuncs.com/huayu/update.png"/>
			<view class="box-a5">
				<text>发现新版本V{{version}},升级后体验更顺畅</text>
			</view>
			<view class="row-b0" v-if="!startDownload">
				<view class="btn0" @click="downLoadApp" >马上更新</view>
				<view class="btn0 white" color=""  @click="cancel"
					 v-if="forceUpdata=='0'">暂不更新</view>
			</view>
			<view v-if="startDownload" class="row-b1">
				<view class="te-j0">下载进度</view>
				<u-line-progress :percentage="percent" height="24"
					activeColor="#3c9cff"></u-line-progress>
			</view>
		</view>
	</u-modal>
</template>
<script>
import {getAppNewVersion} from '@/api/system/user'
export default{
	props:{
	},
	data(){
		return{
			startDownload: false, //是否开始下载
			show: false,
			version: '',
			forceUpdata: '',//是否需要强制更新
			apkDownloadUrl: '',//
			percent: 0,
			filePath: '',
		}
	},
	created(){
		this.handleToUpgrade()
	},
	computed:{
		showUpdate(){
			console.log('this.$stroe.state.user',this.$stroe.state.user)
			return this.$stroe.state.user.showUpdate
		}
	},
	methods:{
		async handleToUpgrade() {
			const sysInfo = uni.getSystemInfoSync()
			const appVersion = sysInfo.appVersion
			
			console.log('appVersion', appVersion)
            //请求服务端检查更新接口，判断是否需要更新
			const res = await getAppNewVersion()
	
			if(res.code == 200){
				if(res.data && res.data.newVersion){
					const newVersion = res.data.newVersion
					if(appVersion == newVersion){
						this.showToast('当前已是最新版本')
                        this.cancel()
					} else{
                        this.apkDownloadUrl = res.data.apkDownloadUrl
						this.show = true
						console.log('需要更新')
						this.version = newVersion
						this.forceUpdata =  res.data.forceUpdata
					}
				}
			}
		},
		installApp(){
			uni.installApk({
				filePath : this.filePath,
				success: (res)=>{
					console.log('安装成功--', res);
				},
				fail : (res)=>{
					console.log('安装失败--', res);
				},
				complete: (res)=>{
					console.log('安装完成--', res);
				}
			})
		},
		downLoadApp(){
			this.startDownload = true
			const downloadTask = uni.downloadFile({
				url: this.apkDownloadUrl , //仅为示例，并非真实的资源
				timeout: 6000000,
				success: (res) => {
					console.log('success res', res)
					if (res.statusCode === 200) {
						this.filePath = res.tempFilePath
						console.log('下载成功');
						this.cancel()
						this.installApp()
					}
				},
				complete: (res)=> {
					console.log('complete res', res)
				},
				fail: (res)=> {
					console.log('fail res', res)
				},
			});
			downloadTask.onProgressUpdate((res) => {
				//console.log('下载进度' + res.progress);
				//console.log('已经下载的数据长度' + res.totalBytesWritten);
				//console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				this.percent = res.progress
				if (res.progress >= 100) {
					console.log('下载进度 abort' + res.progress);
					//downloadTask.abort();
				}
			});
		},
		cancel(){
			this.$emit('cancel')
			this.show = false
		},
        showToast(message){
	       uni.showToast({
             title: message,
              icon: 'none'
            })
        }
	}
}
</script>

<style>
	.img-up{
		width: 100%;
	}
	.box-a4{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.box-a5{
		flex:1;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		padding: 20rpx 0;
	}
	.row-b0{
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 0 50rpx;
		margin-top:60rpx;
		margin-bottom:60rpx;
	}
	.row-b0 .btn0{
		width: 240rpx;
		height: 68rpx;
		border-radius: 34rpx;
		color: white;
		display: grid;
		place-content: center;
		background:#3c9cff;
	}
	.row-b0 .btn0:active{
		opacity: 0.7;
	}
	.row-b0 .btn0.white{
		background:#fff;
		color: #666;
		border:1px solid #eee;
	}
	.row-b1{
		margin: 60rpx 40rpx;
	}
	.te-j0{
		text-align: center;
		color:#999;
		font-size: 26rpx;
		margin-bottom:20rpx;
	}
</style>

4.引入并使用

上面将检查更新的逻辑封装在了update.vue中，使用时只需引入该组件，在父页面点击检查更新按钮时，只需将 checkUpdate 属性设置为 true，则加载 update.vue组件，进入created 方法并调用检查更新的相关逻辑，有新版本则弹框，提示更新，无新版本则将 checkUpdate重置为 false

注意：当检查更新的弹框弹出时，调用页面需要禁用 android的返回按键，在 onBackPress函数里面做相应的逻辑判断即可。

javascript 复制代码

<template>
  <view >
	<UpdateApp v-if="checkUpdate" @cancel="checkUpdate=false"/>
  </view>
</template>
<script>
import UpdateApp from './update'
  export default {
		components:{
			UpdateApp
		},
    data() {
      return {
			checkUpdate: false,
      }
    },
	onBackPress(options) {
		console.log('onBackPress options', options)
		// 禁用返回
		if (options.from == 'backbutton') {
			console.log('--禁用返回')
			if(this.checkUpdate){
				return true;// 禁用返回按键
			}else {
				return false;
			}
		}
	},
    methods: {
			
    }
  }
</script>
<style lang="scss" scoped>

</style>