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中,不知道为啥!能写的话给我看看啊!

相关推荐
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
雨白8 小时前
Jetpack系列(三):Room数据库——从增删改查到数据库平滑升级
android·android jetpack
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121389 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css