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="../../asts/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: fal    }  },  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 '@/rvices/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: fal,      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.uragent.tol从善如流的意思owerca();        // 苹果手机        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.titem('$upgradetip', fal, 1 / 12); // 1/12天内不再显示升级提示                    });                  return;                }              }              if (ismanual) {                plus.nativeui.toast('当前版本号已是最新');              }            });        } el 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 = fal;                      } el {                        plus.nativeui.alert('版本更新失败:' + status);                        that.show = fal;                      }                    }                  );                  try {                    dtask.start(); // 开启下载的任务                    var prg = 0;                    // var showloading = plus.nativeui.showwaiting(                    //   '版本更新中，请稍后！'                    // ); // 创建一个showwaiting对象                    dtask.addeventlistener('statechanged', function(                      task,                      status       一个月英语             ) {                      // 给下载任务设置一个监听 并根据状态  做操作                      switch (task.state) {                        ca 1:                          // showloading.ttitle('正在下载');                          break;                        ca 2:                          // showloading.ttitle('已连接到服务器');                          break;                        ca 3:                          prg = parint(                            (parfloat(task.downloadedsize) /                              parfloat(task.totalsize)) *                              100                          );                          that.percentageval = prg;                          break;                        ca 4:                          that.show = fal;                          break;                      }                    });                  } catch (err) {                    that.show = fal;                    if (ismanual) {                      plus.nativeui.toast('网络异常,请稍候再试' + err);                    }                  }                })                .catch(error => {                  // on cancel                  console.log('error :', error);                  that.show = fal;                  expiredstorage.titem('$upgradetip', fal, 1 / 12); // 1/12天内不再显示升级提示                });           给闺蜜的一段暖心话 } el {              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);      });    },

结束…….