uni-app android升级更新弹窗
uni-app 需要用到在线推送apk
或wgt差量包让客户将app升级至最新,需要用户打开app后
后台检测服务器版本与本机app版本是否需要更新
需要更新弹窗提示客户进行更新
在compponents新建一个组件"app-update-version"
代码至文件并修改链接服务器的方法
<template>
<view>
<view v-show="ShowUpdate"></view>
<view v-show="ShowUpdate">
    <image src="../../static/PublicImg/AppVersionUpdate.png" mode="widthFix"></image>
    <view>
        发现新版本,点击下方按钮一键升级!
    </view>
    <!--升级内容提示-->
    <view>
        <view v-for="item in UpdateContent">
            {{item}}
        </view>
    </view>
    <view v-show="!ShowVersionLoading&&!UpdateSuccess" @click="UpdateVersion">立即升级</view>
    <!--升级时的进度条-->
    <view v-show="ShowVersionLoading && !UpdateSuccess">
        <view></view>
        <view :style="'left:'+UpdateLoadingNum+'%'">{{UpdateLoadingNum}}%</view>
        <view :style="'width:'+UpdateLoadingNum+'%'"></view>
        <view>{{UpdateLoadingText}}</view>
    </view>
    <view v-show="UpdateSuccess" @click="AppRestart">
        更新完成,立即重启
    </view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ShowUpdate: false, //显示更新界面
ShowVersionLoading: false, //显示进度条
UpdateLoadingNum: 0, //下载进度
UpdateLoadingText: '资源下载中,请稍后...',
UpdateSuccess:false,
UpdateContent:'',//更新内容
wgtUrl: '',
apkUrl: '',
}
},
created() {
    let _this=this;
    setTimeout(function(){
        _this.OnPlusUpdateReady();
    },3000);
},
methods: {
    OnPlusUpdateReady() {
        // #ifdef APP-PLUS
        let _this = this;
        plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
            uni.request({
                url: '', //服务器检测app版本的地址
                data: {
                    version: widgetInfo.version, //本机app的版本号
                    name: widgetInfo.name, //本机app的名称
                },
                dataType: 'json',
                method: 'POST',
                success: (result) => {
                    if (result.statusCode != 200) {
                        return;
                    }
                    //从服务器中返回的结果内容
                    var _data = result.data;
                    if(_data.content!=''){  //升级内容
                        var context =_data.content.split("<br>");
                        _this.UpdateContent=context;
                    }

                    if (_data.update && _data.wgtUrl) {  //判断是否要更新,并且是不是wgt差量更新
                        //资源差量升级,就是小文件更新
                        _this.ShowUpdate = true;
                        _this.wgtUrl = _data.wgtUrl;
                    } else if (_data.update && _data.pkgUrl) { //判断是否要更新,并且是否整包apk更新
                        //apk大版本资源更新
                        _this.ShowUpdate = true;
                        _this.apkUrl = _data.pkgUrl;
                    }
                }
            });
        });
        // #endif
    },
    UpdateVersion() { //触发更新事件
        let _this = this
        _this.ShowVersionLoading = true; //显示进度条
        if (this.wgtUrl != '') { //资源包更新
            _this.WgtUpdate();
        }else if(this.apkUrl!=''){
            _this.ApkUpdate();
        }
    },
    WgtUpdate() {  //wgt更新进度
        let _this=this;
        if(_this.wgtUrl==''){
            return;
        }
        var downloadTask = uni.downloadFile({
            url:_this.wgtUrl,
            success: (downloadResult) => {
                if (downloadResult.statusCode === 200) {
                    plus.runtime.install(downloadResult.tempFilePath, {
                        force: false
                    }, function() {
                        setTimeout(function(){
                            _this.UpdateSuccess=true;
                        },3000);
                    }, function(e) {
                        if(apkurl==undefined||apkUrl==null|| apkUrl==''){
                            _this.UpdateLoadingText="更新失败,请从官网下载最新版APP";
                        }else{
                            _this.ApkUpdate();
                        }    
                    });
                }else{
                    _this.UpdateLoadingText="下载更新包失败,请重启APP再次更新";
                }
            },
            fail: (result) => {

            }
        });
        
        downloadTask.onProgressUpdate(function(res){
            _this.UpdateLoadingNum=res.progress;
            if(res.progress>=100){
                _this.UpdateLoadingText='正在更新资源,请稍等..';
            }
        });
    },
    ApkUpdate(){ //apk更新进度
        let _this=this;
        if(uni.getSystemInfoSync().platform=='android'){
            var dtask = plus.downloader.createDownload(this.apkUrl, {method:"GET"}, function(d, status) {
                if (status == 200) { //下载成功
                    plus.runtime.install(d.filename);
                } else {
                    _this.UpdateLoadingText("升级失败,请从官网下载最新版APP");
                }
            });
            
            dtask.addEventListener("statechanged", function(task, status) {
                switch (task.state) {
                    case 1:
                        //开始
                        break;
                    case 2:
                        //已连接到服务器
                        break;
                    case 3:
                        //已接收到数据
                        var current =_this.$CommonFunc.$floatFormatter(100 * (task.downloadedSize / task.totalSize),2);
                        _this.UpdateLoadingNum=current;    
                        break;
                    case 4:
                        //下载完成
                        _this.UpdateLoadingText="正在更新资源,请稍等...";
                        break;
                    default:
                        break;
                }
            });    
            dtask.start();
        }
    },
    AppRestart(){ //更新后需要重启app才生效
        plus.runtime.restart();
    }
}
}
</script>

<style scoped>
.UpdateBg {
position: fixed;
top: 0;
background-color: #000000;
opacity: 0.5;
z-index: 999;
width: 100%;
height: 100%;
max-width: 768px;
}

.VersionPopup {
position: fixed;
top: 50%;
left: 50%;
background-color: #FFFFFF;
min-height: 200px;
width: 80%;
z-index: 1000;
transform: translate(-50%, -50%);
border-radius: 10upx;
}

.VersionPopup_Image {
width: 100%;
top: -82upx;
}

.VersionPopup_Title {
padding: 0 30upx;
font-weight: bold;
color: #333333;
font-size: 28upx;
margin: -60upx 0 30upx 0;
}

.VersionPopup_Content {
padding: 0 30upx;
color: #666666;
font-weight: initial;
max-height: 330upx;
overflow: hidden;
overflow-y: auto;
}

.VersionPopup_UpdateBtn {
background-color: #FF5555;
color: #FFFFFF;
text-align: center;
width: calc(100% - 60upx);
margin: 0 auto;
margin-top: 60upx;
margin-bottom: 40upx;
padding: 16upx 0;
border-radius: 10upx;
}

.VersionPopup_LoadingBox {
position: relative;
text-align: center;
width: 80%;
margin: 0 auto;
margin-top: 65upx;
margin-bottom: 50upx;
transform: translateX(-2%);

}

.VersionPopup_LoadingBlock {
background-color: #F4F4F4;
height: 16upx;
margin-bottom: 10upx;
border-radius: 20upx;
}

.VersionPopup_LoadingNum {
position: absolute;
left: 0%;
top: -45upx;
font-size: 12upx;
color: #FF5555;
font-weight: bold;
}

.VersionPopup_LoadingRedBlock {
position: absolute;
left: 0;
top: 0;
height: 16upx;
width: 100%;
background-color: #FF5555;
border-radius: 20upx;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.VersionPopup_LoadingRedBlock::after {
content: ' ';
position: absolute;
width: 16upx;
height: 16upx;
border: 6upx solid #FF5555;
right: -21upx;
top: -6upx;
border-radius: 100%;
background-color: #FFFFFF;
}

.VersionPopup_LoadingText {
color: #999999;
font-size: 24upx;
}
</style>

弹窗头部的图片
//kcblogv.com/detail?dataid=11