uni-app安卓端强制更新apk包

前提概要

uni-app+vue3项目开发安卓端
不使用uni自带的uni-upgrade-center,因为自带的免费地址只有30天。而且我是前端不想了解公司的服务器配置。
使用uni-ui组件！我感觉还是u-view好用。

先脑袋想一下逻辑

判断，我现在的版本比较低需要更新。
显示，强制你更新apk
下载，下载apk
安装，安装apk

具体代码

1.判断，我现在的版本比较低需要更新。

js 复制代码

// #ifdef APP-PLUS
const {
    versionCode//获取当前apk的版本，当前的apk在manifest.json中配置的：具体如下图《应用版本》
} = plus.runtime;
uni.request({
    url: `/system/user/getAPPNewVersionVO/1`,
    success({
        data
    }) {//网络接口获取，最新的apk
        if (versionCode < parseInt(data.data.version)) {
            show.value = true//显示强制更新弹出框
            info.value = data.data
        }
    }
})
// #endif

2.显示，强制你更新apk

html 复制代码

<template>
    <uni-popup ref="popup" border-radius="18rpx" :is-mask-click="false">
            <view class="update-pop">
                    <view class="update-pop-content">
                            <view class="update-pop-versions">发现新版本<text
                                            style="font-size: 10.55rpx;padding-left: 7.5rpx;">V{{info.versionNum}}</text></view>
                            <view style="height:15rpx"></view>
                            <scroll-view class="versions-text" scroll-y>
                                    <text>{{info.releaseNote}}</text>
                            </scroll-view>
                    </view>
                    <image src="@/static/update-pop/r-img.png" mode="widthFix" class="r-img"></image>
                    <progress v-if="percent>0" style="margin-top: 18rpx;" :percent="percent" activeColor="#10AEFF" stroke-width="10" show-info
                            border-radius="5" />
                    <view class="update-btn" v-else @click="downLoadApk">立即更新</view>
            </view>
    </uni-popup>
</template>
<script setup>
    import {
        ref,
        watch,
        watchEffect
    } from 'vue'
    const show = ref(false)
    const popup = ref(null)
    const info = ref({})
    const percent = ref(0)
    watchEffect(() => {
        if (show.value) {
            popup.value?.open()
        } else {
            popup.value?.close()
        }
    })
</script>

3.下载，下载apk

js 复制代码

function downLoadFail() {
    uni.showModal({
        title: '下载失败',
        content: '是否重新下载:',
        success: (res) => {
            if (res.confirm) {
                downLoad();
            }
        }
    });
}

function downLoadApk() {
    //官方注释：下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
    //fixme:‌**Android平台**‌：临时文件通常存储在设备的内部存储中，
    //具体路径为`/data/data/<应用包名>/cache`。这些文件在应用卸载后会被清除‌
    let downloadTask = uni.downloadFile({
        url: 'https://#%#@%@&#^%&#^@^#@&#/app.apk',
        success: (res) => {
            percent.value = 1
            if (res.statusCode == 200) {
                // #ifdef APP-PLUS
                uni.openDocument({//fixme:关注！4.安装，安装apk
                    filePath: res.tempFilePath,
                });
                // #endif
            } else {
                this.downLoadFail();
            }
        },
        fail: (res) => {
            console.log('失败！')
            this.downLoadFail();
        }
    })

    downloadTask.onProgressUpdate((res) => {//进度条
        if (percent.value != res.progress) {
            percent.value = parseInt(res.progress);
        }
    });
}

实现的样式

注意

好像并不能写在APP.vue中，不知道为啥！能写的话给我看看啊！