vue app 自动检查更新下载

下面是用element ui 封装的安装进度条组件

<template>
  <div>
    <el-dialog
      :title="msg"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-progress
        :text-inside="true"
        :stroke-width="14"
        :percentage="percentage"
      ></el-progress>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  name: "Progress",
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    msg:{
      type: String,
      default: '正在检查版本',
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认后台下载？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

下面是js代码，实现检测版本，安装版本

// app是否需要更新
    app_update() {
    //调用接口获取最新的app版本
      appEdition().then((res) => {
      // config.version是package.json中的version
      //如果版本号相同就return,终止更新
        if (res.data.app_version == config.version) {
          return;
        } else if (
        //检测当前版本是否为必须更新的版本
          res.data.app_version != config.version &&
          res.data.app_type != 2
        ) {
        //不是必须更新的版本询问用户是否更新
          this.$confirm("有可用软件更新, 是否继续?", "更新提示", {
            confirmButtonText: "立即更新",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "立即更新",
              });
              this.dialogVisible=true;
              this.download();
            })
            .catch(() => {
              console.log(1111)
              this.$message({
                type: "info",
                message: "取消更新",
              });
            });
            //必须更新的版本直接更新不给任何面子，培养用户体验从我开始
        } else if (res.data.app_type == 2) {
          this.dialogVisible=true;
          this.download();
        }
      });
    },
    //查询安装包
    download() {
      let that = this;
      //文件名称可以在上传时进行保存，下载时取出，当文件名称中存在单双引号时，要做好处理，否则会报错
      var url = "https://xxxxxxxxxxx.com/appdown/xxxx.apk";
      var dtask = plus.downloader.createDownload(url, {}, function (d, status) {
      	//这个function我的理解是下载结果的回调，会返回两个值，一个是d是下载文件的对象里面包含了下载文件的路径等内容，status就是状态码用于判断下载是否成功
        if (status == 200) {
          //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
          // var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
          that.path = d.filename;
          that.installApk();
        } else {
          //下载失败
          plus.downloader.clear(); //清除下载任务
        }
      });
      try {
        dtask.start(); // 开启下载的任务
        dtask.addEventListener("statechanged", function (task, status) {
          // 给下载任务设置一个监听 并根据状态  做操作
          switch (task.state) {
            case 1:
              //'正在下载';
              that.progressMsg='正在连接服务器'
              break;
            case 2:
              // '已连接到服务器';
              that.progressMsg="已连接服务器"
              break;
            case 3:
              that.progressMsg="正在下载"
              that.percentage = parseInt(
                (parseFloat(task.downloadedSize) / parseFloat(task.totalSize))*100
              );
              break;
            case 4:
             //下载完成
             that.progressMsg="下载完成"
             that.percentage=100;
              break;
          }
        });
      } catch (err) {
        that.dialogVisible = false;
        if (ismanual) {
          plus.nativeUI.toast("网络异常,请稍候再试" + err);
        }
      }
    },
    // 安装apk
    installApk() {
      plus.runtime.install(
        this.path,
        {},
        function () {
          plus.nativeUI.alert("更新完成！", function () {
            //  更新完成后重启应用
            plus.runtime.restart();
          });
        },
        function (e) {
          plus.nativeUI.toast("安装更新失败！");
        }
      );
    },

小白一个错的地方指正