uniapp自动更新

news2025/1/22 15:50:48

一uniapp自动更新流程逻辑

实现检测版本更新并下载新版本:通过后台返回更新版本的版本号和当前版本号做比较,不同则提示有新版本需要更新,下载地址又后台返回

uniapp自动更新设计思路

  1. 在服务端配置一个最新的应用版本号;
    并将打包生成的 apk(安卓应用) 置于服务器,保证可成功访问的链接
  2. 在前端 Uniapp 的最常用的访问页面 ;
    设置当前应用的版本号;

    在这里插入图片描述


并进行代码编写,判断缓存时间和版本号的大小;
进而通过提示窗口,指导用户实现版本的更新下载等 …

1、客户端检查手机型号

let that = this;
uni.getSystemInfo({
  success:(res) => {  
    console.log(res.platform);  
    //检测当前平台,如果是安卓则启动安卓更新  
    if(res.platform=="android"){  
      that.AndroidCheckUpdate();  
    }  
  }  
})

2、、检查版本更新差异

进入app登录页面检测系统版本是否是新版本,如果不是新版本,下载安装包,安装新版本。

AndroidCheckUpdate() {
  let that = this;
  plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
    that.version = wgtinfo.version //客户端版本号
    console.log('当前app版本信息:' + that.version);
  })
  that.getUpdateVersion()
},
getUpdateVersion() {
  let that = this;
  // 获取当前app版本信息
  that.$req.get("/appUpdate/queryUpdate", {
  }, {}).then(function (res) {
    console.log('res.data:' + JSON.stringify(res.data))
    console.log("现在的版本"+ that.version +"数据库版本"+ res.data.data.version +"进入查找app版本");
    if(res.data.data.version>that.version){
      // 这里下载apkurl从/appUpdate/queryUpdate接口请求返回数据中获取
      that.downloadUrl = BaseUrl + '/' + res.data.data.androidUrl
      // 是否强制更新(0 否;1 是)
      that.isForceUpdate = res.data.data.isForceUpdate
      uni.showModal({
        // 更新提醒
        title: '发现新版本,是否更新',
        content: '此版本号:'+ that.version + '\xa0\xa0\xa0' + '待更新版本号:' + res.data.data.version,
        success: res => {
          if (res.confirm) {
            that.downWgt();//下载文件
            // that.showdownLine = true;
            // plus.runtime.openURL(androidUrl)
          } else if (res.cancel) {
            console.log('that.isForceUpdate:' + that.isForceUpdate);
            // 不更新强制退出app
            if (that.isForceUpdate == 1) {
              console.log('that.isForceUpdate1:' + that.isForceUpdate);
              uni.showModal({
                // 更新提醒
                title: '发现新版本,是否更新',
                content: '此版本为强制更新版本如不升级将退出APP',
                success: res => {
                  if (res.confirm) {
                    console.log('不更新强制退出app');
                    plus.runtime.quit();
                  } else if (res.cancel) {
                    that.AndroidCheckUpdate();
                  }
                }
              });
            }
          }
        }
      });
      //dtask.start();   
    } 
  }).catch(error => {
    uni.showToast({
      title: '调用请求失败',  
      mask: false,  
      duration: 5000,  
      icon:"none"  
    });  
  });
  complete: () => {}  
},

/appUpdate/queryUpdate此服务端接口仅仅请求数据库保存版本更新表返回,最新版本数据,请自行编写。接口返回数据

{
  "code":0,
  "data":{
    "androidUrl":"static/appupload/android_debug.apk",
    "appUpdateId":"2",
    "iosUrl":"static/appupload/android_debug.apk",
    "isForceUpdate":"1",
    "updateContent":"测试更新",
    "version":"1.0.1",
    "versionCode":"20220721"
  },
  "msg":"Ok",
  "time":1658817101226
}

我的返回下载地址指向:127.0.0.1:8088/static/appupload/android_debug.apk,resources下static文件夹已在yml中配置暴露直接访问下载。

在这里插入图片描述

3、确认更新后下载安装包

downWgt() {
  let that=this;
  console.log('url:' + that.downloadUrl)
  uni.showLoading({
    title: '更新中……'
  })

  const downloadTask = uni.downloadFile({//执行下载
    url: that.downloadUrl, //下载地址
    timeout: 1000 * 30, //30秒超时时间
    success: downloadResult => {//下载成功
      that.showdownLine = false
      uni.hideLoading();
      console.log('downloadResult.statusCode' + downloadResult.statusCode)
      if (downloadResult.statusCode == 200) {
        console.log('更新中')
        uni.showModal({
          title: '',
          content: '更新成功,确定现在重启吗?',
          confirmText: '重启',
          confirmColor: '#EE8F57',
          success: function(res) {
            if (res.confirm == true) {
              plus.runtime.install(//安装
                downloadResult.tempFilePath, {
                  force: true
                },
                function(res) {
                  utils.showToast('更新成功,重启中');
                  plus.runtime.restart();
                }
              );
            }
          }
        });
      }
    },
    fail: err => {
      uni.hideLoading();
      that.showdownLine = false
      that.$u.toast(err.errMsg)
      console.log(err)
    },
    complete: com => {
      console.log(com)
    }
  });

  // 下载进度
  downloadTask.onProgressUpdate(res => {
    // that.$u.toast(res.progress)
    that.downloadNum = res.progress
    console.log('下载进度' + that.downloadNum);
    // console.log('已经下载的数据长度' + res.totalBytesWritten);
    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

    // 满足测试条件,取消下载任务。
    // if (res.progress > 50) {
    // 	downloadTask.abort();
    // }
  });
},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【jQuery从入门到精通】

文章目录jQuery简介jQuery下载与安装下载版本说明优点安装jQuery核心DOM对象和Jquery包装集对象dom对象的获取获取一个不存在的dom对象jQuery对象的获取获取一个不存在的jQuery对象DOM对象与jQuery对象的转换dom对象转jQuery对象jQuery对象转dom对象jQuery选择器基础选择器层次…

【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型

CSDN话题挑战赛第2期 参赛话题:面试宝典 目录​​​​​​​ 前言 一,函数参数的默认值设置 二,rest参数 三,扩展运算符 扩展运算符应用 1.合并数组 2.数组的克隆 3.伪数组转化成真正的数组 四,Symbol第7种数…

vue脚手架(2022年9月份nodejs16.17.0版本)

vue脚手架(2022年9月份nodejs16.17.0版本) 目录 vue脚手架(2022年9月份nodejs16.17.0版本) 下载地址 环境变量设置 全局文件夹与缓存文件夹设置 修改国内的【阿里】镜像 查看vue信息 更新npm 新增环境变量 安装vue与router 安装vue脚手架 Vue项目创建 项目层级 …

GitHub Copilot的下载使用方法(2022最新)

流程 1.去官网提交申请 填写邮件 2.等待几天收到邮件 3.点击邮件链接下载copilot-docs-main 4.打开vsCode,在扩展商店搜索下载github copilot 5.安装完成之后会在vsCode右下角提示登录github以及允许copilot 6.如果你有资格那么vsCode右下角就会出现copilot的…

Window.location用法

Window.location 详细介绍 本文翻译自 samanthaming 发表于 dev.to 的博文 原文地址 window.location Cheatsheet - DEV Community 👩‍💻👨‍💻 如果你需要获取网站的 URL 信息,那么 window.location 对象就是为你准备…

【vue2可视化开发】新手会遇到的问题——大屏自适应

简要描述 开发可视化大屏第一步,必须要考虑适配不同屏幕的问题,在网络上查看资料,总结了一个目前最适合可视化开发的自适应方案——v-scale-screen组件 1. 安装 注:vue2使用v-scale-screen1.0.0版本,vue3使用v-scal…

Qt 下拉复选框(MultiSelectComboBox)(一) 实现下拉框多选,搜索下拉框内容

文章目录本系列目录前言一、QCombobox的组成二、MultiSelectComboBox实现1. 总体实现2. QLineEdit部分3. QListWidget部分1. 搜索框部分2. 选项部分4. 对外接口定义5. 代码实现总结本系列目录 Qt 下拉复选框(MultiSelectComboBox)(一) 实现下拉框多选&a…

vue3中使用ref语法糖

自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉 .value 以上是官方原话,大概…

webrtc streamer前端页面js播放摄像头rtsp流

webrtc streamer 大致的了解了一下,就是使用js来播放rtsp视频流的一个技术。目前实现的厂家有很多,但是要收费。我这里是找了一个开源免费的项目,使用起来有一定的局限性,需要根据自己的业务自己去实现逻辑,目前我只做…

盘点那些神级uniapp插件,总有一款让你事半功倍

自从有了uniapp,各位做小程序,app是不是感觉快起飞了,如果你想快速推出自己的移动端(各平台小程序,安卓、苹果),那么uniapp还是很不错的,至少时间和研发成本可以帮你降低很多很多。 …

VUE+BPMN.JS右侧属性栏自定义功能

博主最近项目需求要实现BPMNVUE实现流程自定义, 在完成基础功能后,要求右侧属性栏内的一些属性需要根据后端返回内容进行动态渲染, 这时候,用原来的属性栏明显就不满足需求,我找到的大部分博客包括官方都是建议你根据项目需求来全部重写一个属性栏.但是项目时间紧的情况下这种…

React基础-JSX的本质-虚拟DOM的创建过程

文章目录JSX的本质虚拟DOM的创建过程JSX的本质 实际上,jsx仅仅只是 React.createElement(component, props, ...children) 这个函数的语法糖。 所有的jsx最终都会被转换成React.createElement的函数调用。 createElement需要传递三个参数: 参数一:type 当前元素的…

Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“,深层次数据处理报错????

vue中出现很烦人的红色报错,例如,如下图: 1. 2. Error in render: “TypeError: Cannot read properties of undefined (reading ‘name‘)“ 一般这样的length读取出现的报错,往往很令人苦恼,vue虽然正常渲染&#x…

炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】

一:源码获取 🔍说明: 这篇文章是完整功能的登录注册,包含了基于本地存储的注册,登录,以及密码修改功能,登录包含错误三次冻结账户1000s等细微功能,适合新入门前端的小伙伴拿来学习使…

前端页面显示的时间格式为:2022-03-18T01:46:08.000+00:00 如何转换为:年-月-日 时:分:秒 ?

解决办法: 第一种办法:后端格式处理,在后端转数据格式为字符串类型 第二种办法:前端格式处理, ElementUI 中 Table-column Attributes 列属性中有一个 formatter参数 ,用来格式化内容 , 里面可…

SpringBoot+Vue实现文件上传下载功能

前言 本文主要实现了以下功能: 1、 单文件上传以及多文件上传功能 2、 输入文件名下载文件功能 3、 输入音频文件名在线播放音频功能 一、项目基础部分搭建 1.1 前端项目搭建 1.1.1 新建前端项目 打开命令行输入以下命令,使用Vue CLI创建前端项目&a…

浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--(后端、nginx、前端)

目录 现象 原因 浏览器同源策略 导致结果: 解决方案 跨源资源共享(CORS) 各个端解决方法: 后端: 方式1:重载WebMvcConfigurer方法 方式2:配置监听CorsFilter 方式3:相关类…

微信小程序--》你真的了解小程序组件的使用吗?

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

JAVA-分页查询

分页查询 分页查询将数据库中庞大的数据分段显示,每页显示用户自定义的行数,提高用户体验度,最主要的是如果一次性从服务器磁盘中读出全部数据到内存,有内存溢出的风险 真假分页 假分页: 其原理还是将所有的数据读到内存中,翻页从内存中读取数据, 优点: 实现简单,性能高 缺点…

HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画

Web前端开发技术 描述 网页设计题材,DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业,茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 在操作…