uniapp热更新

export default {
    data() {
    },
    async mounted() {
        const that = this;
        // 获取本地应用资源版本号
        let params = {
            id: "",
            "describeContent": "", //描述
            "editionUrl": "",   //地址
            "editionForce": 0,  // 是否强制更新
            "packageType": 0,   // 0 整包更新 1 wgt更新
            "editionNumber": "", //版本号
            "editionName": "", // 版本号
            editionSilence: "", // 是否静默更新 1是0否
            //full为最新apk版本配置
            fullEditionForce: "",
            fullEditionSilence: "",
            fullDescribeContent: ""
        }
        //获取版本号
        const versionData = await uni.$u.http.get('sys/appversion/last', {})
        params = { ...versionData.data }
        params.editionUrl = 最新版本号;
        params.fullUrl = 最新apk版本号;
        this.params = params
        let flag;
        //获取当前版本
        plus.runtime.getProperty(plus.runtime.appid, (inf) => {
            //保存当前版本号
            // 如果当前大版本小于最新的大版本 则先更新大版本
            // 每次wgt更新，都需要重新打个apk包跟着上传（manifest中版本号与wgt包一致）pc端上传整包版本不变
            if (Number(inf.versionCode) < Number(params.fullNumber)) {
                params.version = Number(params.fullNumber); //大版本号
                params.url = params.fullUrl; // 大版本更新地址
                params.editionForce = params.fullEditionForce; //是否强制更新
                params.editionSilence = params.fullEditionSilence; // 是否静默更新
                params.describeContent = params.fullDescribeContent; //apk包版本描述
                flag = true;
            }
            //如果当前版本小于最新版本
            if (Number(inf.versionCode) < Number(params.editionNumber) && !flag) {
                params.version = Number(params.editionNumber); //最新版本号
                params.url = params.editionUrl; // 最新版本更新地址
                flag = true;
            }
            // 如果flag为false 则代表是最新的版本 不进行更新
            if (!flag) return;
            console.log(params.editionSilence, params.url, 41);
            // 如果等等与1 则代表静默更新
            if (params.editionSilence == 1) {
                console.log('静默更新');
                that.silenceUpdate(params.url)
            } else {
                console.log('弹窗更新');
                //否则弹窗更新
                that.show = true;
            }
            this.params = params
        });
    },
    methods: {
        silenceUpdate(url) {
            let that = this;
            uni.downloadFile({
                url,
                success: res => {
                    if (res.statusCode === 200) {
                        plus.runtime.install(
                            res.tempFilePath, {
                            force: true //true表示强制安装，不进行版本号的校验；false则需要版本号校验，
                        },
                            function () {
                                that.jmShow = true;
                            },
                            function (e) {
                                console.error('install fail...');
                                uni.showModal({
                                    title: '提示',
                                    content: '更新失败，请检查网络后重新更新',
                                    showCancel: false
                                });
                            }
                        );
                    }
                }
            });
        }
    }
}

<template>
  <view class="update-pop">
    <view class="update-mask">
        <view class="content-top">
            <view class="content-top-text">
                <view>发现新版本 :</view>
                <u-icon
                    v-if="params.editionForce"
                    class="icon"
                    name="close"
                    size="16"
                    color="#fff"
                    @click="close"
                ></u-icon>
            </view>
            <text class="content-top-version"><text>当前版本：{{version || ''}}</text></text>
        </view>
        <!-- <image class="content-top" style="top: 0;" width="100%" height="100%" src="@/static/bg_top.png"></image> -->
        <view class="content-header"></view>
        <view class="content-body">
            <view class="title">更新内容</view>
            <view class="body">
                <scroll-view class="box-des-scroll" scroll-y="true">
                    <view class="rich-text" v-html="params.describeContent || ''"></view>
                </scroll-view>
            </view>
            <view class="footer">
                <view class="progress-box flex-column" v-if="!updateBtn">
                    <progress class="progress" border-radius="35" :percent="percent" activeColor="#3DA7FF" show-info stroke-width="10" />
                    <view><text class="fs24">正在下载，请稍后 ({{downloadedSize}}/{{packageFileSize}}M)</text></view>
                </view>
                <u-button shape="circle" class="content-button" @click="confirm" v-if="updateBtn" type="primary" text="立即升级"></u-button>
            </view>
        </view>
	</view>
  </view>
</template>

<script>
export default { 
	data() {
		return {
            downloadTask:"",
			version:'1.0.0',//当前运行版本(打包时manifest里的版本名称)
            versionNum:0,
			percent: 0, //进度条百分比
			updateBtn: true, //是否显示立即更新
			downloadedSize:0,//当前已下载大小
			packageFileSize:0,//安装包大小
			data: {
				edition_url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6bef1fe3-e3e3-4909-9f0c-6ed9bd11c93b/aae2360a-6628-4c93-b873-ce1600b9a852.apk', //安装包下载地址或者通用应用市场地址
				edition_force: 1, //是否强制更新 0代表否 1代表是
				package_type: 0 ,//0是整包升级 1是wgt升级
				edition_name:'1.0.1' //后端返回的版本名称
			}
		};
	},
    props:{
        params:{
            type:Object,
            default(){
                return {}
            }
        }
    },
	methods: {
        close(){
           this.downloadTask && this.downloadTask.abort();
           this.$emit("close")
        },
		confirm() {
            this.updateBtn = false;
            this.download();
		},
		download() {
            let that = this;
            this.downloadTask = uni.downloadFile({
				url: this.params.url,
				success: res => {
					if (res.statusCode === 200) {
						plus.runtime.install(
							res.tempFilePath,
							{
								force: true //true表示强制安装，不进行版本号的校验；false则需要版本号校验，
							},
							function() {
								plus.runtime.restart();
                                that.$emit("close");
							},
							function(err) {
                                //提示更新失败 关闭弹窗
                                uni.showModal({
                                    title: "提示",
                                    content: "更新失败，请检查网络后重新更新",
                                    showCancel: false,
                                })
                                that.$emit("close");
							}
						);
					}else {
                        //提示更新失败 关闭弹窗
                        uni.showModal({
                            title: "提示",
                            content: "更新失败，请检查网络后重新更新",
                            showCancel: false,
                        })
                        that.$emit("close")
                        this.downloadTask.abort() // 中断下载任务
					}
				}
			});
			// 进度条
			this.downloadTask.onProgressUpdate(res => {
				this.percent = res.progress;
				this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);
				this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);
			});
		
		}
	},
    created(){
        this.data = this.versionData;
        plus.runtime.getProperty(plus.runtime.appid, (inf) => {
            this.version = inf.version
            this.versionNum = Number(inf.versionCode) || 0
        })
    }
};
</script>

<style lang="scss" scoped>
.update-pop{
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.3);
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.update-mask{
    width: 70vw;
    background-color: #030D1FFF;
    padding: 30rpx;
    border-radius: 30rpx;
    color: white;
    font-size: 26rpx;
    .content-top{
        display: flex;
        flex-direction: column;
        > text{
            margin: 16rpx 0;
        }
        .content-top-text{
            font-size: 34rpx;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .content-top-version{
            text{
                border-bottom: 1rpx solid white;
            }
        }
    }
    .content-body{
        .title{
            color: rgb(61, 160, 229);
            font-size: 32rpx;
            font-weight: 600;
            margin: 16rpx 0;
        }
    }
    .box-des-scroll{
        height: 100rpx;
        margin: 16rpx 0;
        .rich-text{
            line-height: 40rpx;
        }
    }
    .footer{
        padding-top: 30rpx;
    }
    .content-button{
        background-color: rgb(33, 141, 255);
    }
}

</style>