uniapp校验app版本并更新

最近用uniapp写了一个安卓壳子做app，遇到一个需求，校验app版本并更新

通过对比线上版本号和app自己的版本号的差异，唤起更新弹窗

相关代码

App.vue

<script>export default {onLaunch: function() {this.checkVersion()},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},methods: {checkVersion() {
//https://www.xxxx.com.cn/api/App/GetAppVersion   用来获取app信息的接口uni.request({url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',method: 'get',data: {},header: {'Content-Type': 'application/json', // 设置请求头},success: (res) => {console.log('success', res)if (res.data.Flag == 1) {let {Data} = res.dataif (Data.VersionCode) {plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {const newVersionCode = Data.VersionCode; //线上最新版本号const selfVersionCode = wgtinfo.versionCode //当前APP应用版本console.log('newVersionCode:',newVersionCode)console.log('selfVersionCode:',selfVersionCode)//线上版本号和当前不一样，进行在线升级if (selfVersionCode != newVersionCode) {let platform = uni.getSystemInfoSync().platform //手机平台//安卓手机弹窗升级if (platform === 'android') {uni.navigateTo({url: '/pages/upgrade/index'})}}});}}},fail: (err) => {console.log('err', err)},});}}}
</script><style>/*每个页面公共css */
</style>

pages下的upgrade    index.vue

<template><view class="upgrade-popup">
<!--    <image class="header-bg" src="../../static/upgrade_bg.png" mode="widthFix"></image>--><view class="upgrade-main"><view class="version">发现新版本</view><view class="upgrade-content"><text class="title">更新内容</text><view class="desc" v-html="versionDesc"></view></view><!--下载状态-进度条显示 --><view class="footer" v-if="isStartDownload"><view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp"><!-- 进度条 --><view v-if="hasProgress" style="height: 100%;"><view class="txt">{{percentText}}</view><view class="progress" :style="setProStyle"></view></view><view v-else><view class="btn upgrade force">{{ isDownloadFinish  ? '立即安装' :'下载中...'}}</view></view></view></view><!-- 强制更新 --><view class="footer" v-else-if="isForceUpdate"><view class="btn upgrade force" @click="handleUpgrade">立即更新</view></view><!-- 可选择更新 --><view class="footer" v-else><view class="btn close" @click="handleClose">以后再说</view><view class="btn upgrade" @click="handleUpgrade">立即更新</view></view></view></view>
</template><script>
import {downloadApp,installApp
} from './upgrade.js'
export default {data() {return {isForceUpdate: false, //是否强制更新versionName: '', //版本名称versionDesc: '', //更新说明downloadUrl: '', //APP下载链接isDownloadFinish: false, //是否下载完成hasProgress: false, //是否能显示进度条currentPercent: 0, //当前下载百分比isStartDownload: false, //是否开始下载fileName: '', //下载后app本地路径名称}},computed: {//设置进度条样式，实时更新进度位置setProStyle() {return {width: (290 * this.currentPercent / 100) + 'px' //510：按钮进度条宽度}},//百分比文字percentText() {let percent = this.currentPercent;if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'if (percent < 100) return `下载中${percent}%`return '立即安装'}},onLoad() {this.init()},onBackPress(options) {// 禁用返回if (options.from == 'backbutton') {return true;}},methods: {//初始化获取最新APP版本信息init() {uni.request({url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',method: 'get',data: {},header: {'Content-Type': 'application/json', // 设置请求头},success: (res) => {console.log('success', res)if (res.data.Flag == 1) {let {Data} = res.dataif (Data.VersionCode) {this.versionName = Data.VersionCode; //版本名称this.versionDesc = Data.Describe; //更新说明this.downloadUrl = Data.Url; //下载链接this.isForceUpdate = false; //是否强制更新}}},fail: (err) => {console.log('err', err)},});},//更新handleUpgrade() {if (this.downloadUrl) {this.isStartDownload = true//开始下载AppdownloadApp(this.downloadUrl, current => {//下载进度监听this.hasProgress = truethis.currentPercent = current}).then(fileName => {//下载完成this.isDownloadFinish = truethis.fileName = fileNameif (fileName) {//自动安装Appthis.handleInstallApp()}}).catch(e => {console.log(e, 'e')})} else {uni.showToast({title: '下载链接不存在',icon: 'none'})}},//安装apphandleInstallApp() {//下载完成才能安装，防止下载过程中点击if (this.isDownloadFinish && this.fileName) {installApp(this.fileName, () => {//安装成功,关闭升级弹窗uni.navigateBack()})}},//关闭返回handleClose() {uni.navigateBack()// uni.navigateTo({//   url: '/pages/login/index'// })},}
}
</script><style>
page {background: rgba(0, 0, 0, 0.5);/**设置窗口背景半透明*/
}
</style>
<style lang="scss" scoped>
.upgrade-popup {width: 290px;height: auto;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border-radius: 10px;box-sizing: border-box;border: 1px solid #eee;
}.header-bg {width: 100%;margin-top: -112rpx;
}.upgrade-main {padding: 5px 15px 15px;box-sizing: border-box;.version {font-size: 18px;color: #026DF7;font-weight: 700;width: 100%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;letter-spacing: 1px;}.upgrade-content {margin-top: 30px;.title {font-size: 14px;font-weight: 700;color: #000000;}.desc {box-sizing: border-box;margin-top: 10px;font-size: 14px;color: #6A6A6A;max-height: 80vh;overflow-y: auto;}}.footer {width: 100%;display: flex;justify-content: center;align-items: center;position: relative;flex-shrink: 0;margin-top: 50px;.btn {width: 123px;display: flex;justify-content: center;align-items: center;position: relative;z-index: 999;height: 48px;box-sizing: border-box;font-size: 16px;border-radius: 5px;letter-spacing: 1px;&.force {width: 250px;}&.close {border: 1px solid #E0E0E0;margin-right: 12px;color: #000;}&.upgrade {background-color: #026DF7;color: white;}}.progress-view {width: 255px;height: 24px;display: flex;position: relative;align-items: center;border-radius: 3px;background-color: #dcdcdc;display: flex;justify-content: flex-start;padding: 0px;box-sizing: border-box;border: none;overflow: hidden;&.active {background-color: #026DF7;}.progress {height: 100%;background-color: #026DF7;padding: 0px;box-sizing: border-box;border: none;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}.txt {font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;}}}
}
</style>

pages下的upgrade    upgrade.js

export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {return new Promise((resolve, reject) => {//创建下载任务const downloadTask = plus.downloader.createDownload(downloadUrl, {method: "GET"}, (task, status) => {console.log(status,'status')if (status == 200) { //下载成功resolve(task.filename)} else {reject('fail')uni.showToast({title: '下载失败',duration: 1500,icon: "none"});}})//监听下载过程downloadTask.addEventListener("statechanged", (task, status) => {switch (task.state) {case 1: // 开始break;case 2: //已连接到服务器break;case 3: // 已接收到数据let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小if (hasProgress) {let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比progressCallBack(current)}break;case 4: // 下载完成break;}});//开始执行下载downloadTask.start();})
}
/*** @description H5+安装APP* @param fileName:app文件名* @param callBack:安装成功回调*/
export const installApp = (fileName, callBack = () => {}) => {//注册广播监听app安装情况onInstallListening(callBack);//开始安装plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {//成功跳转到安装界面}, function(error) {uni.showToast({title: '安装失败',duration: 1500,icon: "none"});})}
/*** @description 注册广播监听APP是否安装成功* @param callBack:安装成功回调函数*/
const onInstallListening = (callBack = () => {}) => {let mainActivity = plus.android.runtimeMainActivity(); //获取activity//生成广播接收器let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {onReceive: (context, intent) => { //接收广播回调plus.android.importClass(intent);mainActivity.unregisterReceiver(receiver); //取消监听callBack()}});let IntentFilter = plus.android.importClass('android.content.IntentFilter');let Intent = plus.android.importClass('android.content.Intent');let filter = new IntentFilter();filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装filter.addDataScheme("package");mainActivity.registerReceiver(receiver, filter); //注册广播}

pages.json 

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationStyle": "custom"}},{"path": "pages/upgrade/index", //升级窗口页面"style": {"navigationBarTitleText": "","navigationStyle": "custom","app-plus": {"bounce": "none","animationType":"none", //取消窗口动画"background": "transparent" // 设置背景透明}}}],"globalStyle": {"navigationBarTextStyle": "black",// "navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/691026.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Hack The Box-Office

Hack The Box-Office

端口扫描&信息收集 使用nmap对靶机进行扫描 nmap -sC -sV 10.10.11.3开放了80端口&#xff0c;并且注意到该ip对应的域名为office.htb&#xff0c;将其加入到hosts文件中访问之 注意到扫描出来的还有robots文件&#xff0c;经过尝试后只有administrator界面是可以访问的 …
阅读更多...
详解平面点云面积计算

详解平面点云面积计算

部分代码展示&#xff1a; &#xff08;1&#xff09;利用格网法计算面积&#xff1a; //&#xff08;2&#xff09;测试使用格网法计算平面点云面积 void main() {char *inputpath "D:\\testdata\\data.txt";vector<pcl::PointXYZ> points ReadPointXYZIn…
阅读更多...
Java 21 新特性的扫盲级别初体验

Java 21 新特性的扫盲级别初体验

一、前言 JDK 21 于 2023 年 9 月发布&#xff0c;作为目前讨论热度最高的JDK&#xff0c;虽然大家都开玩笑说你发任你发&#xff0c;我用Java8&#xff0c;但是作为一个Javaer&#xff0c;对JDK21的新特性还是要有所了解的。 以下是 JDK 21 的新功能列表&#xff1a; 虚拟线…
阅读更多...
element-plus日期选择器2次封装

element-plus日期选择器2次封装

预期效果 官网默认样式&#xff1a; 修改后的样式&#xff1a; 代码实现 DatePicker.vue <template><div class"date-picker-container"><el-date-picker v-model"date" change"handleChange" type"date" value-for…
阅读更多...
CMake无Name和Value部分界面

CMake无Name和Value部分界面

鼠标会变成以下 拉开后就 出现想要的部分
阅读更多...
PTA-九九乘法表

PTA-九九乘法表

从键盘输入n&#xff08;n为1~9&#xff09;&#xff0c;输出九九乘法表的前n行&#xff0c;每个式子按“a * b c”形式输出&#xff0c;其中a和b各占1位列宽&#xff0c;c占4位列宽并左对齐。 输入格式: 一个1~9之间的整数n&#xff0c;如&#xff1a;9 输出&#xff1a; …
阅读更多...
牛客小白月赛87 D 小苯的IDE括号问题（hard）

牛客小白月赛87 D 小苯的IDE括号问题（hard）

原题链接&#xff1a;D-小苯的IDE括号问题&#xff08;hard&#xff09; 题目大意&#xff1a;给定一个长度为n的字符串&#xff0c;字符串由&#xff08;&#xff0c;&#xff09;和I构成&#xff0c;m组询问&#xff0c;如果输入backspace&#xff0c;如果I左右是&#xff0…
阅读更多...
15个学习Go语言的网站推荐

15个学习Go语言的网站推荐

1. Tour of Go 网站地址&#xff1a;tour.golang.org 网站介绍&#xff1a;Tour of Go是一个关于Go语言特性的交互式游览和教程 2. Go by Example 网站地址&#xff1a;gobyexample.com 网站介绍&#xff1a;Go by Example是一个通过一系列可执行代码实例来学习Go语言的优…
阅读更多...
Java解决删除某些元素后的数组均值

Java解决删除某些元素后的数组均值

Java解决删除某些元素后的数组均值 01 题目 给你一个整数数组 arr &#xff0c;请你删除最小 5% 的数字和最大 5% 的数字后&#xff0c;剩余数字的平均值。 与 标准答案 误差在 10-5 的结果都被视为正确结果。 示例 1&#xff1a; 输入&#xff1a;arr [1,2,2,2,2,2,2,2,…
阅读更多...
最优字符串分隔符：零宽度空格和字符

最优字符串分隔符：零宽度空格和字符

引言 在文本处理和格式化中&#xff0c;选择合适的分隔符是至关重要的。 本文将在介绍两个不常见但功能强大的分隔符&#xff1a;零宽度空格和&#x10000;字符。 零宽度空格&#xff08;Zero Width Space&#xff09; 零宽度空格是Unicode字符集中的一个特殊字符&#xff…
阅读更多...
2024前端面试准备之uniapp篇

2024前端面试准备之uniapp篇

全文链接！！！！！！！ 1. UniApp和其他跨平台框架（如React Native、Flutter）有什么区别？ 语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而React Native使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。 性能和体验：Uni…
阅读更多...
vue3项目配置按需自动引入自定义组件unplugin-vue-components

vue3项目配置按需自动引入自定义组件unplugin-vue-components

我们通常在项目中&#xff0c;需要手动引入自定义的各种组件&#xff0c;如果涉及的页面功能比较多的话&#xff0c;光是import的长度都能赶上春联了。 如果&#xff0c;能有一个插件帮我们实现自动引入&#xff0c;是不是要谢天谢地了呢&#xff1f; 接下来就进入我们的主角u…
阅读更多...
uni-app判断不同端

uni-app判断不同端

大家好&#xff0c;今天给大家分享的知识是在uni-app中如何区分是在什么端操作的程序 话不多说直接上代码&#xff1a; // #ifdef APP-PLUS<view>APP端</view>// #endif// #ifdef H5<view>H5端</view>// #endif// #ifdef MP<view>小程序端</v…
阅读更多...
centos中安装go

centos中安装go

安装过程 &#xff08;1&#xff09;源码二进制下载地址 wget https://dl.google.com/go/go1.13.5.linux-amd64.tar.gz &#xff08;2&#xff09;将下载的二进制包解压至 /usr/local目录。 tar -C /usr/local/ -xzf go1.13.5.src.tar.gz &#xff08;3&#xff09;设置环…
阅读更多...
XR行业首家｜李未可科技通过深度合成服务算法备案

XR行业首家｜李未可科技通过深度合成服务算法备案

2月18日&#xff0c;国家网信办发布第四批深度合成服务算法备案。 根据《互联网信息服务深度合成管理规定》第十九条规定&#xff0c;具有舆论属性或者社会动员能力的深度合成服务提供者&#xff0c;应当按照《互联网信息服务算法推荐管理规定》履行备案和变更、注销备案手续。…
阅读更多...
人工智能_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_003---人工智能工作笔记0098

人工智能_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_003---人工智能工作笔记0098

前面的环境安装差不多了,这里我没有安装git,因为我认为用不到,好下面去下载算法: 首先是算法下载: https://codeload.github.com/THUDM/ChatGLM-6B/zip/refs/heads/main 算法的下载连接是这里: 可以看到下载以后得到这个ChatGLM-6B-main这个算法压缩包 然后我们再去: 然后…
阅读更多...
Guitar Pro8最新官方破解版下载步骤教程

Guitar Pro8最新官方破解版下载步骤教程

使用Guitar Pro 8的步骤如下&#xff1a; 安装Guitar Pro 8软件。双击打开安装包&#xff0c;按照提示完成安装过程。打开软件后&#xff0c;使用左侧工具栏上的按钮输入谱号和拍号。点击左侧工具栏的和弦图按钮&#xff0c;输入所需要的和弦。使用鼠标和键盘在乐谱中输入乐曲…
阅读更多...
MCAL知识点（二十七）：TC275如何通过GPT12实现ABZ解码

MCAL知识点（二十七）：TC275如何通过GPT12实现ABZ解码

目录 1、概述 2、代码实现 1、概述 GPT12 - General Purpose Timer Unit (GPT12):通用定时器单元，具备较为灵活的定时器结构，可以用来做定时器、事件计数、脉冲宽度测量、产生PWM、频率调制、ABZ编码器增量测量。文章记录一下如何通过GPT12实现编码器ABZ信号的测量。 注意…
阅读更多...
P14 前缀和原理和特点

P14 前缀和原理和特点

prefix表示前缀和&#xff0c;前缀和由一个用户输入的数组生成 prefix可以用于快速生成prefix prefix可以o&#xff08;1&#xff09;求数组a[]的一段区间的和&#xff1b; sum(l,r)prefix[r]-prefix[l-1] prefix是一种预处理算法&#xff0c;只适用于a数组为静态数组的情况…
阅读更多...
修复 Android 手机陷入恢复模式的 5 种方法

修复 Android 手机陷入恢复模式的 5 种方法

您的手机卡在 Android Recovery 模式且无法退出此模式&#xff1f;无论您按什么按钮组合&#xff0c;甚至在取出并重新插入电池后重新启动手机&#xff0c;手机都会启动回到恢复模式吗&#xff1f; Android卡在recovery模式的情况并不罕见&#xff0c;各种品牌的Android手机都…
阅读更多...
最新文章

Copyright @ 2022~2023