uniapp开发APP之强制更新和热更新的实现

目录
  • 前言
  • 整包更新和热更新
  • 版本号约束
  • 实现原理
  • 其他方案
  • 参考资料
  • 总结

前言

app和h5相比,有着更新延迟和更新难的特性,h5在部署更新后可以保证所有用户访问的都是最新的功能,而app则可能存在多个版本,用户也可以选择不升级继续使用;

但是有时候,app进行了大规模的调整,导致之前所有版本的app都不可用,或者一些重要功能作出了调整(比如收费内容发生改变),强制用户需要更新app,这样的情况并不少见;

因此在第一版本的app内,就应该把包内更新的功能加上,以保证app的更新续航。

整包更新和热更新

APP的更新分为整包更新和热更新。

整包更新是指下载完整apk文件进行覆盖安装。

热更新是指把app有改动的地方打包进wgt文件,只更新wgt文件中的内容,不进行整包安装,在用户视角也叫做省流量更新

版本号约束

既然是版本更新,那就离开版本号的约束。

因为涉及两种更新方式,所以要先制定版本号的规范:
建议 严格遵循 Semantic Versioning 2.0.0 语义化版本规范。

主版本号:不兼容的 API 修改

次版本号:向下兼容的功能性新增

修订号:向下兼容的问题修正

实现原理

  • 开发后台版本管理功能,每次发版上传android安装包,记录版本号、是热更新还是整包更新、是否强制更新等
  • 每次打开app(onLaunch生命周期)的时候,通过接口请求最新版本信息,再获取当前安装包信息,对比版本号
  • 如果版本号不一致,且接口获取的版本号大于当前应用的版本号,则进行整包更新或热更新。
  • 需要注意的是,ios并不存在下载安装包覆盖安装这种操作,所以在ios平台需要跳转到appstore进行更新
export default {
 onLaunch: function() {
     // 条件编译,只在app环境下进行更新操作
  // #ifdef APP-PLUS
  if (process.env.NODE_ENV === 'production') { // 只在正式环境下启用,避免更新影响开发和测试环境(这步取决于你的需求)

      // 获取app运行信息
   plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {

       // 通过接口获取最新版本信息,具体请求不演示
    getVersion({
     platform: '1'
    }).then(res => {

     if (!res) {
      return;
     }

                    // 版本号得到的是类似 '7.0.1'的字符串,把它去除.并转为纯数字
     const appCode = parseInt(res.app_code.split('.').join(''))
     const version = parseInt(widgetInfo.version.split('.').join(''))

     if (appCode > version) { // 只有接口版本号 > 当前包版本号才进行更新
         // type为0热更新(看接口设计)
      if (res.type == '0') { // 热更新,下载更新文件,这一步可以先显示更新提示的ui,用户点击更新后再下载更新
       this.updateHot(res.download_url)
      } else if (res.type == '1') { // 整包更新,这一步可以先显示更新提示的ui,用户点击更新后再下载更新
          this.updatePackage(res.download_url)
      }
     }
    }).catch(err => {
     console.error(err)
    })
   });
  }
 },
 methods: {
     // 整包更新
     updatePackage(url) {

         // ios平台不允许这样更新,所以我们需要跳转到appstore进行更新
        if (uni.getSystemInfoSync().platform === 'ios') {
          plus.runtime.launchApplication({
     action: 'itms-apps://xxx' // 链接可以通过接口获取
    });
         } else {
          this.isDownloading = true

          // 构建了下载任务,但此时并未开始下载
          const dtask = plus.downloader.createDownload(url, {},
           (downloadResult, status) => {
            if (status === 200) {
             plus.runtime.install(downloadResult.filename, {
           force: false
          },
          function() {
           plus.runtime.restart(); // 安装成功后重启
          },
          function(e) {
           uni.showToast({
            icon: 'none',
            title: '下载更新失败'
           })
          });
            }
           }
          );

                // 执行安装包下载
          dtask.start();
         }
     },
     // 热更新
     updateHot(url) {
         uni.downloadFile({
    url,
    success: (downloadResult) => {
     if (downloadResult.statusCode === 200) {
         // 下载更新文件成功后进行安装
      plus.runtime.install(downloadResult.tempFilePath, {
       force: false // 是否强制安装, 如果将要安装应用的版本号不高于现有应用的版本号则终止安装,并返回安装失败。
      },
      function() {
       uni.showToast({
        title:'更新完毕,即将重启',
        icon: 'none',
        position: 'bottom'
       })
       setTimeout(() => {
        plus.runtime.restart(); // 安装完成后重启应用
       },2000)
      })
     }
    }
   });
     }
 }
}

其他方案

插件市场提供了uni-upgrade-center升级方案,包含了后台管理app版本以及app自动更新的逻辑,需要注意的是后台管理是基于uni-admin框架的插件,如果应用内没有使用uni-admin,集成起来会相对麻烦

参考资料

uni-app 资源在线升级/热更新

总结

到此这篇关于uniapp开发APP之强制更新和热更新的文章就介绍到这了,更多相关uniappAPP强制更新和热更新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 手把手教你写一个uniapp通用页面组件

    目录 前言 需求 开发 初始化页面数据 实现状态栏与底部配置 页面使用 总结 前言 做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否显示头部导航,是否空出底部区域等等,本篇会带大家从零到一开发一个 uniapp 的通用页面组件 需求 本次开发的页面,组件,需要完成以下功能 可配置控制是否显示原生导航,显示状态栏,并且也可以控制状态栏颜色 可配置控制是否留出底部固定区域 开发 初始化页面数据 编写页面组件类,获取系统配置,初始化样式

  • uniapp开发打包多端应用完整方法指南

    一.uni-app项目介绍 用uni-app开发多端项目,一套代码可同时打包出各端小程序.h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目,下面示例项目采用 HBuilderX可视化界面 的方式创建,cli项目可参考uni文档,大部分流程都是通用的. 项目结构: ├── components 公用组件 ├── libs 公共方法 ├── pages 页面 ├── static 本地静态资源,注意:静态资源只能存放于此 ├── stor

  • uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

  • uniapp打包安卓App的两种方式(云打包、本地打包)方法详解

    在HBuilder上对APP提供了两种打包方式,云打包和本地打包,下面主要对这两种打包方式做个介绍 两者的区别:云打包相对简单,但是每天最多只能打包五次,而且在高峰期打包时间可能会很长,本地打包相对比较复杂,但是不限制次数,打包时间也短 一. uniapp云打包安卓App: 只需要设置相应参数即可.比较复杂的地方可能就是证书,如果你是测试包,Android的话直接选择共用证书即可,ios则需要申请相应证书,申请证书的具体方法官方也介绍的很清楚了,就不赘述了. 二. uniapp本地打包安卓App

  • uniapp小程序和h5如何使用three.js详解

    目录 前言 h5 在写之前我们需要先导入必要的包 小程序 安装依赖 绘制立方体 绘制一个可以旋转的立方体 接下来获取canvas three绘制立方体的代码(这里就不介绍了,基本上和上面的h5代码类似) 让立方体可以自动旋转 效果 总结 前言 个人认为uniapp同时开发小程序和h5多多少少在某些地方存在不兼容问题,这也比较苦恼,特别是在使用某些ui库的时候更加让人头大,要边看边对比,有时候h5那边样式或者什么的都ok,但是小程序那边就直接拉胯,着实有点难受,好了废话不多说了 h5 threej

  • uniapp页面间传参的几种方法实例总结

    目录 前言 一.上级页面 → 下级页面(单向) uni.navigateTo:URL编程式传参 <navigator>标签传参 二.上级页面 ← 下级页面(单向) uni.$on(eventName,callback):监听事件 触发事件 三.上级页面 ↔ 下级页面(双向) 上级页面内代码 总结 前言 在Uniapp中的传参主要分为以下三种类型: 上级页面 → 下级页面(单向)上级页面 ← 下级页面(单向)上级页面 ↔ 下级页面(双向) 本文将围绕这三种传参展开,分享其使用方法以及我使用中所遇

  • uniapp使用高德地图的超详细步骤

    目录 1.项目前准备 2.页面创建引入 3.地图实现js 4.地图实现单点标记 5.地图实现终点与起点标记 6.最后 上代码~ 总结 1.项目前准备 1.1.首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2.链接: 高德地图申请key直通车,点击前往. 有一个uniapp项目. 2.页面创建引入 新建一个uniapp的空白页 使用web-view 渲染html文件页 <web-view src="/hybrid/html/adminr.html"

  • uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操作 根据场景需求进行选择即可 <template> <div> <!-- #ifdef APP-PLUS --> <button @click="test.e

  • 使用uniapp打包上架微信小程序完整教程

    首先打开manifest.json下的微信小程序配置 ,勾选所有 点击“发行” 点击发行 这时候就会跳转到微信小程序中,如果没出现以下错误可以跳过此步骤 在本地设置中勾选“不校验合法域名........” 输入版本号和备注后点击上传   在微信小程序官网中点击“版本管理”,下面有个刚刚的开发版本 点击提交审核 填写信息 直接提交会出现以下问题 点击我知道了,再次点击 “更新当前版本的用户隐私协议” 进入后填写以下信息 填写完成后返回再次提交 以上就是使用uniapp打包上架微信小程序完整教程的详

  • uniapp使用scroll-view实现左右上下滑动功能

    目录 阐述 实现左右滑动 实现上下滑动 去掉scroll-view的滚动条 总结 阐述 我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求,不需要安装 better-scroll uniapp 自带的scroll-view 就可以实现了. 实现左右滑动 <view class="model_scrollx flex_row"> <scroll-view class="uni-swiper-tab" scroll-x :style="'h

随机推荐