标签：vue app 更新 version plus type 下载

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("安装更新失败！");
        }
      );
    },

小白一个错的地方指正

标签：vue,app,更新,version,plus,type,下载
来源： https://blog.csdn.net/weixin_44739820/article/details/116657245

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。