uniapp项目实践总结(十九)版本更新和热更新实现方法

导语：当一个 APP 应用开发完成以后，就要上架应用商店，但有时候修改一些小问题或者推出一些活动，又不想频繁地提交应用商店审核，那么就可以使用应用内更新功能来进行应用的版本升级更新或热更新，下面就介绍一下实现的方法。

目录

• 准备工作
• 原理分析
• 实战演练
• 案例展示

准备工作

• 在/pages/index文件夹下面新建一个version.vue的组件；
• 按照前面文章所说的页面结构，编写好预定的页面；

原理分析

下面是应用更新的原理总结。

安装包版本更新

• 通过uni.getSystemInfoSync方法的appVersion属性获取到应用当前安装包版本号;
• 通过请求版本更新接口获取线上的安装包版本号;
• 比较两个安装包版本号的大小,如果一致不更新,如果不一致,线上大于当前更新版本,线上小于当前不更新;

资源包版本更新

• 通过uni.getStorage获取本地资源包版本号,如不存在,则通过uni.setStorage设置默认版本号;
• 通过请求版本更新接口获取线上的资源包版本号;
• 比较两个资源包版本号的大小,如果一致不更新,如果不一致,线上大于当前更新版本,线上小于当前不更新;

实战演练

模板使用

• 比较版本号

<view class="version-box">
  <view class="version-item">
    版本1:
    <input
      class="version-item-ipt"
      type="text"
      placeholder="请输入版本1"
      v-model="versionInfo.v1" />
  </view>
  <view class="version-item">
    版本2:
    <input
      class="version-item-ipt"
      type="text"
      placeholder="请输入版本2"
      v-model="versionInfo.v2" />
  </view>
  <view class="version-item">
    <button class="version-item-btn" type="primary" size="mini" @click="compareVersion('test')">
      比较版本
    </button>
  </view>
  <view class="version-item" v-show="versionInfo.text">
    <text>比较结果:</text>
    <text class="version-item-txt">{
  
   
   { versionInfo.text }}</text>
  </view>
</view>

• 获取线上版本

<!-- #ifdef APP-PLUS -->
<view class="version-box">
  <view class="version-item">
    <button class="version-item-btn" type="primary" size="mini" @click="getVersion">
      获取版本
    </button>
  </view>
  <view class="version-item"> 当前版本: {
  
   
   { checkInfo.current }} </view>
  <view class="version-item"> 线上版本: {
  
   
   { checkInfo.online }} </view>
  <view class="version-item"> 当前资源包版本: {
  
   
   { checkInfo.currentSource }} </view>
  <view class="version-item"> 线上资源包版本: {
  
   
   { checkInfo.onlineSource }} </view>
</view>
<!-- #endif -->

• 检测更新

<!-- #ifdef APP-PLUS -->
<vi