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

前提概要

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

先脑袋想一下逻辑

  1. 判断,我现在的版本比较低需要更新。
  2. 显示,强制你更新apk
  3. 下载,下载apk
  4. 安装,安装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中,不知道为啥!能写的话给我看看啊!

相关推荐
zepcjsj08011 小时前
简单实现支付密码的页面及输入效果
android
小阳睡不醒2 小时前
小白成长之路-部署Zabbix7(二)
android·运维
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
mmoyula4 小时前
【RK3568 PWM 子系统(SG90)驱动开发详解】
android·linux·驱动开发
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw5 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友