Skip to content

uni-app 自动检测更新-下载-安装

js
//store全局存储app信息
getAppInfo(state){
			uni.getSystemInfo({
				success:(res)=>{
//全局存入的app信息
					state.appInfo = res
				}
			})
		}
//app首页onLoad,根据接口获取app最新版本号
getAppVersion().then((res) => {
      // #ifdef APP
      const version = this.appInfo.appWgtVersion;
      // #endif
      // #ifdef H5
      const version = this.appInfo.appVersion;
      // #endif

      if (res.data.clientVersion !== version) {//接口拿到的版本号与app启动时拿到的版本号对比,如果不同就需要更新
        uni.showModal({
          title: "版本更新提示",
          content: "当前版本不是最新,点击更新最新版本!",
          success: (result) => {
            if (result.confirm) {
              //打开下载进度弹窗,传入下载链接
              this.$refs.downLoadAppModalRef.open(res.data.clientDownloadUrl);
            } else if (result.cancel) {
              if (res.data.requiredUpdate) {
                //点取消,如果app需要强制更新,就退出.
                uni.onBackPress(function () {
                  plus.runtime.quit();
                });
              }
            }
          },
        });
      }
    });

进度条弹窗

html
<template>
  <u-popup :show="show" mode="center" :closeOnClickOverlay="false" :round="10">
    <view class="popup-content">
      <u-line-progress
        :percentage="progress"
        activeColor="#faa63a"
        height="24"
      ></u-line-progress>
      <view class="popup-content-text"> 下载中,请稍后~ </view>
    </view>
  </u-popup>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      progress: 0,
    };
  },
  methods: {
    open(url) {
      this.show = true;
      //下载安装包
      let downloadTask = uni.downloadFile({
        url: url,
        success: (res) => {
          //下载完成后关闭弹窗
          this.show = false;
          this.progress = 0;
          if (res.statusCode === 200) {
            //200后打开已下载的文件进行安装
            uni.openDocument({
              filePath: res.tempFilePath,
              success() {},
            });
          }
        },
      });
      downloadTask.onProgressUpdate((res) => {
        //当前下载进度
        this.progress = res.progress;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-content {
  padding: 50rpx;
  justify-content: center;
  align-items: center;
  width: 500rpx;
  height: 100rpx;
  &-text {
    text-align: center;
    margin-top: 20rpx;
    font-size: 32rpx;
  }
}
</style>