app更新升级-wgt包热更新-整包更新-遮盖原生导航及tabbar

更新记录

1.2.0（2022-01-21）下载此版本

原更新组件是在当前页面以弹窗方式弹出，若页面有原生 tabbar 及原生导航栏时，无法遮盖原生 tabbar 及原生导航栏，要求完美主义者无法接受

现在的更新方式，也是我项目里一直使用的，以跳转新页面的方式更新，更新的页面是一个独立的页面，背景为透明色，跳转动画为 fade-in，所以看起来与弹出框相似

本次更新文件比较多，完全是另一种思路，如果你有其他不错的思路，或发现插件内有空间可以优化，可以留言给我

1.0.5（2021-07-12）下载此版本

修复当非强制更新点击关闭按钮后，更新弹窗依然覆盖在原界面上方的BUG；感谢“power啊啊”提出的修改意见

1.0.4（2021-07-08）下载此版本

1、优化UI界面显示，全新界面、更加美观 2、优化当force为false并且tabbar为true时关闭弹窗会报红的bug

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.22 app-vue	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

原更新组件是在当前页面以弹窗方式弹出，若页面有原生 tabbar 及原生导航栏时，无法遮盖原生 tabbar 及原生导航栏，要求完美主义者无法接受

这次更新后严格来说不算个插件，应该是更新思路吧；完美遮盖原生的导航栏及tabbar！

详细代码在码云里，文件跟《插件zip》相同

[]()https://gitee.com/yzhua006_admin/uniapp-update

使用方法

1、点击右侧绿色按钮《使用 HBuilderX 导入插件》或《下载插件 ZIP》查看完整代码

导入后会在你的项目组件目录多出一个 components/yzhua006-update 目录

2、在 view 文件夹下新建 app-update.vue 文件，可以下载插件 zip 查看，或复制下面内容

<template>
    <view class="page-height">
        <view class="page-content">
            <view class="wrap" v-if="popup_show">
                <view class="popup-bg">
                    <view class="popup-content" :class="{'popup-content-show' : popup_show}">
                        <view class="update-wrap">
                            <image src="../components/yzhua006-update/images/img.png" class="top-img"></image>
                            <view class="content">
                                <text class="title">发现新版本V{{update_info.version}}</text>
                                <!-- 升级描述 -->
                                <view class="title-sub" v-html="update_info.note"></view>
                                <!-- 升级按钮 -->
                                <button class="btn" v-if="downstatus < 1" @click="onUpdate()">立即升级</button>
                                <!-- 下载进度 -->
                                <view class="sche-wrap" v-else>
                                    <!-- 更新包下载中 -->
                                    <view class="sche-bg">
                                        <view class="sche-bg-jindu" :style="lengthWidth"></view>
                                    </view>
                                    <text class="down-text">下载进度:{{(downSize/1024/1024 ).toFixed(2)}}M/{{(fileSize/1024/1024).toFixed(2)}}M</text>
                                </view>
                            </view>
                        </view>
                        <image src="../components/yzhua006-update/images/close.png" class="close-ioc" @click="closeUpdate()" v-if="downstatus < 1 && update_info.force == 0"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                popup_show: true,
                update_info: null, //上一页面传过来的升级参数
                note: [], //升级说明数组格式
                fileSize: 0, //文件大小
                downSize: 0, //已下载大小
                downing: false, //是否下载中
                downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
            }
        },
        onLoad(option) {
            if (option.updata_info) {
                this.update_info = JSON.parse(option.updata_info)
                this.note = this.update_info.note.split("\n"); //版本说明
            } else {
                plus.nativeUI.toast("参数出错");
                setTimeout(() => {
                    uni.navigateBack()
                }, 500)
            }

        },
        onBackPress(e) {
            if (e.from == "backbutton") return true; //APP安卓物理返回键逻辑
        },
        computed: {
            // 下载进度计算
            lengthWidth: function() {
                let w = this.downSize / this.fileSize * 100;
                if (!w) {
                    w = 0
                } else {
                    w = w.toFixed(2)
                }
                return {
                    width: w + "%" //return 宽度半分比
                }
            },
            getHeight: function() {
                let bottom = 0;
                if (this.tabbar) {
                    bottom = 50;
                }
                return {
                    "bottom": bottom + 'px',
                    "height": "auto"
                }
            }
        },
        methods: {
            // 当点击更新时
            onUpdate() {
                //判断是否为WIFI网络 并且是非强制更新
                if (this.update_info.net_check == 1 && this.update_info.force == 0) {
                    //判断是否为wifi模式
                    uni.getNetworkType({
                        success: (res) => {
                            if (res.networkType == "wifi") {
                                this.startUpdate(); //开始更新
                            } else {
                                uni.showModal({
                                    title: '提示',
                                    content: '当前网络非WIFI,继续更新可能会产生流量,确认要更新吗？',
                                    success: (modal_res) => {
                                        if (modal_res.confirm) {
                                            this.startUpdate(); //开始更新
                                        }
                                    }
                                });
                            }
                        }
                    });
                } else {
                    this.startUpdate(); //开始更新
                }
            },
            //开始更新
            startUpdate() {
                if (this.downing) return false; //如果正在下载就停止操作
                this.downing = true; //状态改变 正在下载中
                if (/\.apk$/.test(this.update_info.now_url)) {
                    // 如果是apk地址
                    this.download_wgt() // 安装包/升级包更新
                } else if (/\.wgt$/.test(this.update_info.now_url)) {
                    // 如果是更新包
                    this.download_wgt() // 安装包/升级包更新
                } else {
                    plus.runtime.openURL(this.update_info.now_url, function() { //调用外部浏览器打开更新地址
                        plus.nativeUI.toast("打开错误");
                    });
                }
            },
            // 下载升级资源包
            download_wgt() {
                plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
                let options = {
                    method: "get"
                };
                let dtask = plus.downloader.createDownload(this.update_info.now_url, options);
                dtask.addEventListener("statechanged", (task, status) => {
                    if (status === null) {} else if (status == 200) {
                        //在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                        this.downstatus = task.state;
                        switch (task.state) {
                            case 3: // 已接收到数据
                                plus.nativeUI.closeWaiting();
                                this.downSize = task.downloadedSize;
                                if (task.totalSize) {
                                    this.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
                                }
                                break;
                            case 4:
                                this.installWgt(task.filename); // 安装
                                break;
                        }
                    } else {
                        plus.nativeUI.closeWaiting();
                        plus.nativeUI.toast("下载出错");
                        this.downing = false;
                        this.downstatus = 0;
                    }
                });
                dtask.start();
            },
            // 安装文件
            installWgt(path) {
                plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
                plus.runtime.install(path, {}, function() {
                    plus.nativeUI.closeWaiting();
                    // 应用资源下载完成！
                    plus.nativeUI.alert("更新完成,请重启APP！", function() {
                        plus.runtime.restart(); //重启APP
                    });
                }, function(e) {
                    plus.nativeUI.closeWaiting();
                    // 安装更新文件失败
                    plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
                });
            },
            // 取消更新
            closeUpdate() {
                uni.setStorageSync("update_ignore", this.update_info.version);
                uni.navigateBack()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page-height {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba($color: #000000, $alpha: .7);
    }

    .popup-bg {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 750rpx;
    }

    .popup-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-content-show {
        animation: mymove 300ms;
        transform: scale(1);
    }

    @keyframes mymove {
        0% {
            transform: scale(0);
            /*开始为原始大小*/
        }

        100% {
            transform: scale(1);
        }

    }

    .update-wrap {
        width: 580rpx;
        border-radius: 18rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        padding: 170rpx 30rpx 0;

        .top-img {
            position: absolute;
            left: 0;
            width: 100%;
            height: 256rpx;
            top: -128rpx;
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 40rpx;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #6526f3;
            }

            .title-sub {
                text-align: center;
                font-size: 24rpx;
                color: #666666;
                padding: 30rpx 0;
            }

            .btn {
                width: 460rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 30rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 100px;
                background-color: #6526f3;
                margin-top: 20rpx;
            }
        }
    }

    .close-ioc {
        width: 70rpx;
        height: 70rpx;
        margin-top: 30rpx;
    }

    .sche-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 10rpx 50rpx 0;

        .sche-wrap-text {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 20rpx;
        }

        .sche-bg {
            position: relative;
            background-color: #cccccc;
            height: 30rpx;
            border-radius: 100px;
            width: 480rpx;
            display: flex;
            align-items: center;

            .sche-bg-jindu {
                position: absolute;
                left: 0;
                top: 0;
                height: 30rpx;
                min-width: 40rpx;
                border-radius: 100px;
                background: url(../components/yzhua006-update/images/round.png) #5775e7 center right 4rpx no-repeat;
                background-size: 26rpx 26rpx;
            }
        }

        .down-text {
            font-size: 24rpx;
            color: #5674e5;
            margin-top: 16rpx;
        }
    }
</style>

3、在项目 pages.json 文件新增更新弹出页面，如下

[
    ...
    {
        "path": "pages/app-update",  //第2步新建的app-uodate.vue文件
        "style": {
            "navigationBarTitleText": "APP更新",
            "navigationStyle": "custom",
            "app-plus": {
                "background": "transparent",
                "webviewBGTransparent": true, //webview的背景是否透明//配合background属性防止跳转闪白
                "popGesture": "none" //禁止侧滑关闭（ios）
            }
        }
    }
    ...
]

4、app.vue 文件，加入样式（这里修改样式需要重启项目生效，这个 page 的样式）

<style lang="scss">
    page {
        background: transparent;
    }
</style>

5、在需要检测更新的页面

<template>
...
</template>
<script>
    import { checkUpdate } from "@/components/yzhua006-update/js/app-update-check.js";
    export default {
        onLoad() {
            //这里可以适当延时执行
            this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
        },
        methods:{
            //获取线上APP版本信息
            getAppInfo(type) {
                const system_info = uni.getSystemInfoSync();
                let params = {
                    os: system_info.platform //本机设备操作系统  （android || ios）
                }
                if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

                //这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

                //请求获取最新版本
                setTimeout(() => {
                    let update_info = {
                        version: '1.0.2', //线上版本
                        now_url: "https://dldir1.qq.com/weixin/android/weixin802android1860_arm64.apk", //更新链接
                        silent: 0, //是否是静默更新
                        force: 1, //是否是强制更新
                        net_check: 1, //非WIfi是否提示
                        note: "产品汪汪要改这个字的颜色", //更新内容
                    }
                    checkUpdate(update_info, type).then(res => {
                        if (res.msg) {
                            plus.nativeUI.toast(res.msg);
                        }
                    }); ///检查更新
                    //checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
                    //跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
                }, 200)
            },
        }
    }
</script>