web app升级—带进度条的App自动更新

<template>  <div>    <van-dialog      v-model="showProgress"      confirm-button-text="后台下载"      class="app-update"      @confirm="confirmClick"    >      <img src="../../assets/imgs/progress-bar.png" />      <van-progress :percentage="percentageVal" />      <div class="msg">版本更新中，请稍后...</div>    </van-dialog>  </div></template><script>// app下载进度组件export default {  props: {    // 进度值    percentageVal: {      type: Number,      default: 0    },    // 是否显示弹窗    showProgress: {      type: Boolean,      default: false    }  },  data() {    return {}  },  methods: {    confirmClick() {      this.$emit('confirm');    }  }}</script><style lang="scss" scoped>img {  width: 270px;  height: 163px;  position: fixed;  top: -35px;  z-index: 2200;}</style><style lang="scss">.app-update.van-dialog {  overflow: visible;  width: 270px;  border-radius: 12px;  .van-progress {    margin-top: 124px;    z-index: 2300;  }  .msg {    font-size: 16px;    font-weight: 600;    color: white;    position: absolute;    top: 50px;    z-index: 2300;    width: 100%;    text-align: center;  }  .van-dialog__footer {    border-radius: 12px;    .van-button--default {      .van-button__text {        width: 105px;        height: 26px;        border-radius: 13px;        background-color: #006eff;        color: white;        font-weight: 600;        font-size: 12px;        display: inline-block;        margin-top: 10px;        line-height: 26px;      }    }  }}</style>

/** * IOS 包发布到应用市场后要更新此处的ID，替换掉测试ID：1053012308 *//* eslint-disable no-undef */import { getVersion } from '@/services/login';import request from '../../api/ajax.js';import { Dialog } from 'vant';import expiredStorage from '@/utils/expiredStorage.js';function sleep(numberMillis) {  var now = new Date();  var exitTime = now.getTime() + numberMillis;  while (true) {    now = new Date();    if (now.getTime() > exitTime) return;  }}// Vue继承的基础对象export default {  data() {    return {      showProgress: false,      percentageVal: 0    };  },  methods: {    appUpdate(ismanual) {      const that = this;// 获取5+运行环境的版本号      plus.runtime.getProperty(plus.runtime.appid, function(inf) {        const ver = inf.version;var ua = navigator.userAgent.toLowerCase();        // 苹果手机        if (/iphone|ipad|ipod/.test(ua)) {          // 获取当前上架APPStore版本信息          request            .get('https://itunes.apple.com/lookup?id=1053012308', {              id: 1053012308 // APP唯一标识ID            })            .then(data => {              console.log('data:' + JSON.stringify(data));              var resultCount = data.resultCount;              for (var i = 0; i < resultCount; i++) {                var normItem = data.results[i].version;if (normItem > ver) {                  var _msg = '发现新版本:V' + normItem;                  // plus.nativeUI.alert("发现新版本:V" + normItem);                  Dialog.confirm({                    title: '升级确认',                    message: _msg                  })                    .then(() => {                      // on confirm                      // 执行升级操作                      document.location.href =                        'https://itunes.apple.com/cn/app/id1053012308?mt=8'; // 上新APPStore下载地址                    })                    .catch(() => {                      // on cancel                      expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示                    });                  return;                }              }              if (ismanual) {                plus.nativeUI.toast('当前版本号已是最新');              }            });        } else if (/android/.test(ua)) {          getVersion().then(res => {if ((res.code = 200 && res.data.version > ver)) {              var _msg = '发现新版本:V' + res.data.version;              const apkUrl = res.data.redirectUrl;              Dialog.confirm({                title: '升级确认',                message: _msg              })                .then(() => {                  // on confirm                  that.showProgress = true;                  var dtask = plus.downloader.createDownload(                    apkUrl,                    {},                    function(d, status) {                      if (status == 200) {                        // sleep(1000);                        var path = d.filename; // 下载apk                        plus.runtime.install(path); // 自动安装apk文件                        that.showProgress = false;                      } else {                        plus.nativeUI.alert('版本更新失败:' + status);                        that.showProgress = false;                      }                    }                  );                  try {                    dtask.start(); // 开启下载的任务                    var prg = 0;                    dtask.addEventListener('statechanged', function(                      task,                      status                    ) {                      // 给下载任务设置一个监听 并根据状态  做操作                      switch (task.state) {                        case 1:                          //'正在下载';                          break;                        case 2:                          // '已连接到服务器';                          break;                        case 3:                          prg = parseInt(                            (parseFloat(task.downloadedSize) /                              parseFloat(task.totalSize)) *                              100                          );                          that.percentageVal = prg;                          break;                        case 4:                          that.showProgress = false;                          break;                      }                    });                  } catch (err) {                    that.showProgress = false;                    if (ismanual) {                      plus.nativeUI.toast('网络异常,请稍候再试' + err);                    }                  }                })                .catch(error => {                  // on cancel                  that.showProgress = false;                  expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天内不再显示升级提示                });            } else {if (ismanual) {                plus.nativeUI.toast('当前版本号已是最新');              }            }          });        }      });    },    // 点击确定按钮    confirmClick() {      this.showProgress = false;    }  }};

function compareVersion(v1, v2) {  v1 = v1.split('.')  v2 = v2.split('.')  var len = Math.max(v1.length, v2.length)  while (v1.length < len) {    v1.push('0')  }  while (v2.length < len) {    v2.push('0')  }  for (var i = 0; i < len; i++) {    var num1 = parseInt(v1[i])    var num2 = parseInt(v2[i])    if (num1 > num2) {      return 1    } else if (num1 < num2) {      return -1    }  }  return 0}compareVersion('1.11.0', '1.9.9') // => 1 // 1表示 1.11.0比1.9.9要新compareVersion('1.11.0', '1.11.0') // => 0 // 0表示1.11.0和1.11.0是同一个版本compareVersion('1.11.0', '1.99.0') // => -1 // -1表示1.11.0比 1.99.0要老

import appUpdateOptions from '@/utils/mixins/appUpdateOptions.js'import AppProgress from '@/components/common/AppProgress.vue';export default {  components: { AppProgress },  props: {},  mixins: [appUpdateOptions],  methods: {    // app更新    appUpdateFuc() {      const that = this;      that.$mui.plusReady(function() {        that.appUpdate(true);      });    },