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

　　带进度条的app自动更新，效果如下图所示：

 　  技术：vue、vant-ui、5+

　　封装独立组件appprogress.vue：

<template>
  <div>
    <van-dialog v-model="show" confirm-button-text="后台下载" class="app-update">
      <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
    },
    // 是否显示弹窗
    show: {
      type: boolean,
      default: false
    }
  },
  data() {
    return {}
  }
}
</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>

app升级代码，封装独立js文件：appupdateoptions.js

/**
 * 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 {
      show: false,
      percentageval: 0
    };
  },
  methods: {
    appupdate(ismanual) {
      const that = this;
      console.log('appupdate');
      // 获取5+运行环境的版本号
      console.log('5+ runtime version：' + plus.runtime.innerversion);
      plus.runtime.getproperty(plus.runtime.appid, function(inf) {
        const ver = inf.version;
        console.log('ver:' + ver);
        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;
                console.log('normitem:' + normitem);
                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 => {
            console.log('data:' + json.stringify(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
                  // 执行升级操作
                  console.log('apkurl :', apkurl);
                  // plus.nativeui.toast('正在准备环境，请稍后！');
                  that.show = 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.show = false;
                      } else {
                        plus.nativeui.alert('版本更新失败:' + status);
                        that.show = false;
                      }
                    }
                  );
                  try {
                    dtask.start(); // 开启下载的任务
                    var prg = 0;
                    // var showloading = plus.nativeui.showwaiting(
                    //   '版本更新中，请稍后！'
                    // ); // 创建一个showwaiting对象
                    dtask.addeventlistener('statechanged', function(
                      task,
                      status
                    ) {
                      // 给下载任务设置一个监听 并根据状态  做操作
                      switch (task.state) {
                        case 1:
                          // showloading.settitle('正在下载');
                          break;
                        case 2:
                          // showloading.settitle('已连接到服务器');
                          break;
                        case 3:
                          prg = parseint(
                            (parsefloat(task.downloadedsize) /
                              parsefloat(task.totalsize)) *
                              100
                          );
                          that.percentageval = prg;
                          break;
                        case 4:
                          that.show = false;
                          break;
                      }
                    });
                  } catch (err) {
                    that.show = false;
                    if (ismanual) {
                      plus.nativeui.toast('网络异常,请稍候再试' + err);
                    }
                  }
                })
                .catch(error => {
                  // on cancel
                  console.log('error :', error);
                  that.show = false;
                  expiredstorage.setitem('$upgradetip', false, 1 / 12); // 1/12天内不再显示升级提示
                });
            } else {
              console.log('当前版本号已是最新');
              if (ismanual) {
                plus.nativeui.toast('当前版本号已是最新');
              }
            }
          });
        }
      });
    }
  }
};

调用代码：

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);
      });
    },

结束.......