APP强制更新(uni
- APP强制更新(uni 推荐度:
- 相关推荐
APP强制更新(uni
项目要求:
用户打开APP后,检测是否是最新版本,不是最新版本提示用户更新。
解决思路:
步骤一:需要一个接口,用来和本地版本号对比判断是不是最新的版本。
步骤二:需要一个弹框,提示用户更新。
步骤三:下载状态显示
效果图:
先有提示框
用户点击更新后按钮文字改为正在更新(图没截好,但是代码以实现)
具体代码:
先来弹框样式代码
<!-- #ifdef APP-PLUS --><view v-show="isupAppStatu" class="upAppBg"><view class="upAppBox"><view class="upAppBox_title">发现新版本<text >{{isupAppList.version}}</text></view><view class="upAppBox_content">{{isupAppList.descrption}}<!-- 版本描述 --></view><view v-show="updateprogress" style="width: 80%;margin-bottom: 30rpx;"><progress :percent="updatesum" activeColor="red" stroke-width="8" /></view><view @click="upApp" class="upAppBox_btn">{{updateprogresstxt}}</view></view></view><!-- #endif -->
<!-- css样式 -->
<style>.upAppBg{position: fixed;width: 750rpx;height: 100vh;background: rgba(0,0,0,0.3);z-index: 100;display: flex;align-items: center;justify-content: center;}.upAppBox{width: 600rpx;padding: 20rpx 0 50rpx;background: #FFFFFF;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;}.upAppBox_title{line-height: 80rpx;font-weight: bold;}.upAppBox_content{padding: 20rpx 0 40rpx;font-size: 26rpx;}.upAppBox_btn{width: 400rpx;line-height: 60rpx;text-align: center;background: rgb(250, 66, 55);border-radius: 20rpx;color: #FFFFFF;}
</style>
弹框需要的data中的变量,首页是否显示提示框,以及更新按钮的方法
export default {data() {return {isupAppStatu:false, // 更新提示框updatesys:'', // 更新系统型号isupAppList:'', // 更新系统型号updateprogresstxt :'更新',updatesum:0, // 更新进度条updateprogress: false, // 更新进行状态}},onShow() {//#ifdef APP-PLUS//发起http请求,res中包含安卓和ios最新版本号,更新描述等数据getVersion().then(res => {// 需要区分ios和安卓(两者更新APP方式不一致)if (/android/.test(uni.getSystemInfoSync().platform)) {var _this = this // 改变this的指向在下面方法可使用thisplus.runtime.getProperty(plus.runtime.appid, function(inf) {const ver = inf.version; //测试if (res.data.android.version > ver) {uni.hideTabBar()//隐藏底部导航栏_this.isupAppList = res.data.android // 更新描述_this.isupAppStatu = true // 显示更新提示框}})}else if (/ios/.test(uni.getSystemInfoSync().platform)){var _this = this // 改变this的指向在下面方法可使用thisplus.runtime.getProperty(plus.runtime.appid, function(inf) {const ver = inf.version; //测试if (res.data.ios.version > ver) {uni.hideTabBar()//隐藏底部导航栏_this.isupAppList = res.data.ios // 更新描述_this.isupAppStatu = true // 显示更新提示框}})}})//#endif},methods: {// 更新APPupApp(){// 防止用户多次点击if (this.updateprogress) {return} else {if (/android/.test(uni.getSystemInfoSync().platform)) {this.updateprogress = true //显示进度条this.updateprogresstxt = '正在更新...' //更改按钮文字 // console.log(this.isupAppList)const downloadTask = uni.downloadFile({url: this.isupAppList.address,success: (res) => {if (res.statusCode === 200) {this.updateprogress = falseplus.runtime.install(res.tempFilePath); // 自动安装apk文件plus.runtime.quit();} else {this.updateprogress = false}}})// 监控下载apk的进度downloadTask.onProgressUpdate((res) => {this.updatesum = res.progress});}else {// 苹果更新需要携带参数打开APPStore跳转到上架的应用上var urlStr = encodeURI("APPStore中你们ios的地址")plus.runtime.openURL(urlStr, function(res) {})}}}}}
总结
最开始的时候底部导航栏无法被覆盖,
使用uni.hideTabBar()隐藏底部导航栏。
最新文章
- 你手机的“升级版短信”要来了!功能有多强大?
- JAVA里面继承和接口
- AQS是什么?都是怎么用的?
- Xmanager5 Passive 图形界面安装oracle,无法使用鼠标
- 在Linux中安装JKD(详细教学)
- BookList
- 什么是API测试?开发必知的8种API自动化测试类型
- 强化学习及Python代码示例
- 01
- 什么是长连接?长连接、短连接、三次握手
- 三维偏序cdq
- Swing中如何实现二级联动下拉列表
- 详解Node.js API系列 Module模块(2) 案例分析
- 中文去停用词
- Android 强制设置横屏或竖屏
- gzip and deflate
- hadoop安装与启动
- Hadoop安装(二)
- Java中带返回值的线程池Future
- db4o数据库的基本操作