使用uniapp开发APP实现版本更新并安装

通过一个弹窗去实现版本更新提示

image.png

在 首页 中判断是否显示 更新提示 弹窗

弹窗组件

<template>
    <view>
        <u-overlay :show="show">
            <view class="updatetips-whole">
                <view class="updatetips">
                    <view>
                        <view class="updatetips-head">
                            <image src="../static/images/updatetips.png"></image>
                            <view class="updatetips-version">
                                发现新版本</br>
                                V{{versionNum}}
                            </view>
                        </view>
                        <view class="updatetips-content">{{versionContent}}</view>
                        <!-- 进度条 -->
                        <u-line-progress
                            v-if="isProgress"
                            :percentage="30"
                            activeColor="#55D88A"
                            :showText="false"
                            height="4"
                        ></u-line-progress>
                    </view>
                    <view class="updatetips-btn-disable" v-if="isProgress">立即更新</view>
                    <view class="updatetips-btn" v-else @click="downloadBtn()">立即更新</view>
                </view>
            </view>
        </u-overlay>
    </view>
</template>
 
<script>
export default {
    props:['show','versionNum','versionContent','downloadUrl'],
    data() {
        return {
            progress:0,
            isProgress:false
        };
    },
    methods: {
        downloadBtn(){
            this.isProgress=true
            const downloadTask = uni.downloadFile({
                url:this.downloadUrl,
                success: (res) => {
                    //安装
                    plus.runtime.install(
                        res.tempFilePath, {
                            force: true
                        },
                        function(_res) {
                            plus.runtime.restart();
                        }
                    )
                },
                fail: (err)=> {
                    uni.$u.toast('下载失败')
                }
            })
            // 查看下载进度
            downloadTask.onProgressUpdate((res) => {
                this.progress=res.progress
            })
        }
    }
};
</script>
<style scoped>
    .updatetips-whole{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .updatetips{
        position: relative;
        width: 80%;
        min-height: 100rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .updatetips-head{
        position: relative;
        width: 100%;
        height: 200rpx;
    }
    .updatetips-head>image{
        position: absolute;
        top: -72rpx;
        width: 100%;
        height: 280rpx;
    }
    .updatetips-version{
        position: absolute;
        top: 30rpx;
        left: 50rpx;
        color: #fff;
        font-size: 40rpx;
    }
    .updatetips-content{
        width: 80%;
        min-height: 100rpx;
        margin: 40rpx auto;
    }
    .updatetips-btn-disable{
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        color: #E6E6E6;
    }
    .updatetips-btn{
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        color: #55D88A;
    }
    .updatetips-btn::before{
        content: "";
        width: 85%;
        height: 1px;
        background-color: #E6E6E6;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

在父组件中使用

onLoad() {
        // 获取版本号
        get().then(res=>{
            var versionNum = uni.getStorageSync('version')
            // 判断当前版本号和后端返回的版本号是否一致
            if(versionNum!=res.data.versionNumber){
                this.show=true
                this.versionContent=res.data.content
                this.versionNum=res.data.versionNumber
                this.downloadUrl=res.data.url
            }
        }).catch(err=>{
            
        })
    },

注：获取本地包版本号

APP.vue

onLaunch: function() {
        //获取本地版本信息
        plus.runtime.getProperty(plus.runtime.appid, (info) => {
            uni.setStorageSync('version', info.version)
        })
    },

在manifest.json中输入本次版本号

image.png