【uniapp】安卓app版本对比 更新下载

通过对比线上版本号和当前app版本号，判断是否需要更新升级

要求uniapp版本 3.4.15+ （当前使用版本3.8.12）

data数据

data() {
  return {
	  isShowVersion: false, // 升级弹窗
      isVersionUpdate: 0, // 是否版本更新  0:未更新 1:正在更新 2:更新完成
      percent: 0, // 升级进度
      version: '0.0.0', // 线上版本
	  versionUrl: '', // 线上版本下载地址
      updateNotice: '' // 线上版本更新内容
   }
}

版本对比

支持线上版本格式：v0.0.0、V0.0.0、0.0.0

version.js

/**
 * 比较版本号
 * @versionNo 线上最新版本号 例：v1.1.1 V1.1.1 1.1.1
 * @return -1：当前版本小于最新版本 0：当前版本等于最新 1：当前版本大于最新
 * */
export function getVersionComparison(versionNo) {
  // 分割版本号
  const versionList = versionNo.toUpperCase().split('V')
  const version = versionList[versionList.length - 1]
  console.log('this.version', version, versionNo.toUpperCase())
  // 初始化本地版本
  let appVersion = '0.0.0'
  // 获取当前app的版本
  const systemInfo = uni.getSystemInfoSync()
  // #ifdef APP-PLUS || APP
  appVersion = systemInfo.appWgtVersion
  console.log('systemInfoApp', systemInfo)
  console.log('appVersionApp', plus.runtime)
  // 异步获取当前版本
  // plus.runtime.getProperty(plus.runtime.appid, (info) => {
  //  console.log('info', info)
  //  appVersion = info.version
  // })
  // #endif
  // #ifdef H5
  appVersion = systemInfo.appVersion
  console.log('systemInfoH5', systemInfo)
  // #endif
  const appVersionArr = appVersion.split('.').map(e => e * 1)
  const versionArr = version.split('.').map(e => e * 1)

  const len = Math.max(appVersionArr.length, versionArr.length)
  for (let i = 0; i < len; i++) {
    // 当前版本大于最新版
    if ((appVersionArr[i] || 0) > (versionArr[i] || 0)) {
      console.log('已是最新版')
      return 1
    }
    // 当前版本小于最新版本
    if ((appVersionArr[i] || 0) < (versionArr[i] || 0)) {
      console.log('需要更新版本')
      return -1
    }
  }
  return 0
}

使用

1. 引入version.js

import { getVersionComparison } from '@/utils/version.js'

2. 使用

 onShow() {
     // #ifdef APP-PLUS || APP
    uni.getNetworkType({ // 首次判断网络状态
      success: (res) => {
        const networkType = res.networkType
        if (networkType != 'none') { // 有网络
          setTimeout(() => {
          	// 版本对比
            this.getVersionInfo()
            this.$forceUpdate()
          })
        }
      }
    })
    // #endif
 },

  methods: {
    // 获取版本信息
    getVersionInfo() {
      // 获取线上app最新版本
      getLastVersion({ status: 1 }).then(res => {
        console.log('res', res)
        // 获取版本号
        const versionNo = res.versionNo
        const versionList = versionNo.toUpperCase().split('V')
        this.version = versionList[versionList.length - 1]
        console.log('versionList', versionList)
		// 获取版本内容
        this.updateNotice = res.versionContent
        // 获取版本下载地址
        this.versionUrl = res.url

        // 判断是否下载过最新版(高版本安卓直接唤醒是否允许安装界面，会刷新当前页面导致升级弹窗再次弹出)
        const downloadNewVersion = uni.getStorageSync('downloadNewVersion')
        console.log('判断是否下载过最新版====', downloadNewVersion)
        if (downloadNewVersion) {
          // 重置下载状态
          uni.setStorageSync('downloadNewVersion', false)
          return
        }
        // 版本比较
        const versionComparison = getVersionComparison(res.versionNo)
        if (versionComparison == -1) {
          this.isShowVersion = true
        } else {
          this.isShowVersion = false
        }
        console.log('versionComparison', versionComparison)
      })
    },
  }

版本更新

  methods: {
  ...
    // 版本更新
    handleChangeVersion() {
      this.percent = 0
      this.isVersionUpdate = 1
      const _this = this
      // 下载
      const download = uni.downloadFile({
        url: _this.versionUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.hideLoading()
            uni.showToast({
              title: '下载成功',
              icon: 'success'
            })
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: function(res) {
                uni.openDocument({
                  filePath: res.savedFilePath,
                  success: function(res) {
                    console.log(res, '打开安装包')
                    // 安装完成
                    _this.isVersionUpdate = 2
                    _this.isShowVersion = false
                    // 标识下载过最新版(高版本安卓直接唤醒是否允许安装界面，会刷新当前页面导致升级弹窗再次弹出)
                    uni.setStorageSync('downloadNewVersion', true)
                  }
                })
              },
              fail: (err) => {
                console.log(err, '打开安装包-失败')
              }
            })
          }
        },
        fail: (err) => {
          console.log(err, '下载失败')
          uni.hideLoading()
          uni.showToast({
            title: '下载失败,请检查网络',
            icon: 'none',
            duration: 1500
          })
          this.isVersionUpdate = 0
        }
      })
      // 监听网络状态变化
      uni.onNetworkStatusChange(function(res) {
        console.log('当前是否有网络连接====', res.isConnected)
        console.log('网络类型====', res.networkType)
        const _this = this
        if (!res.isConnected) {
          _this.isVersionUpdate = 0
          _this.isShowVersion = false
          uni.showToast({
            title: '下载失败,请检查网络',
            icon: 'none',
            duration: 1500
          })
          return
        }
      })
      // 下载进度
      download.onProgressUpdate((res) => {
        console.log('======进度===========', res.progress)
        this.percent = res.progress
        if (res.progress == 100) {
          this.isVersionUpdate = 2
        }
      })
    }
  }

页面样式

	<u-popup :show="isShowVersion" mode="center" class="version-popup" @close="closeVersionPopup">
	  <view class="version-box">
	    <view class="version-top">V{{ version }}</view>
	    <view class="version-bottom">
	      <view class="version-notice">
	        <view style="height: 180rpx;overflow: auto;" v-html="updateNotice" />
	      </view>
	      <view class="version-foot">
	        <u-button v-if="isVersionUpdate == 0" text="立即升级" color="#0069FF" class="version-button" shape="circle" @click="handleChangeVersion" />
	        <view v-else-if="isVersionUpdate == 1" class="version-update">
	          <view class="">
	            <u-line-progress :percentage="percent" height="32rpx" active-color="#0069FF" inactive-color="rgba(0, 105, 255, 0.1)" style="width: 430rpx;" />
	            <view class="version-tips">正在下载……</view>
	          </view>
	        </view>
	        <u-button v-else text="下载完成" color="#0069FF" class="version-button" shape="circle" @click="closeVersionPopup" />
	      </view>
	    </view>
	  </view>
	</u-popup>

	.version-popup {
		// 实现升级弹窗背景透明
		::v-deep .u-popup__content{
			background-color: transparent !important;
		}
	}
	.version-box {
		width: 556rpx;
		height: 604rpx;
		background-color: transparent !important;
		background: url('../../static/version.png') left top no-repeat;
		background-size: 100% 264rpx;
		position: relative;
		.version-top {
			position: absolute;
			top: 142rpx;
			left: 42rpx;
			font-size: 32rpx;
			color: #fff;
			z-index: 99;
		}
		.version-bottom {
			background-color: #fff;
			height: 380rpx;
			margin-top: 224rpx;
			border-radius: 32rpx;
			position: relative;
			.version-notice {
				padding: 40rpx 32rpx;
				font-size: 24rpx;
			}
			.version-foot {
				position: absolute;
				bottom: 48rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				.version-button {
					width: 300rpx;
					height: 96rpx;
					font-size: 32rpx;
				}
				.version-update {
					display: flex;
					justify-content: center;
					text-align: center;
				}
				.version-tips {
					color: #7C8493;
					font-size: 24rpx;
					margin-top: 24rpx;
				}
			}
		}
	}