web app升级—带进度条的App自动更新_百厌_前端开发者

  带进度条的App自动更新,效果如下图所示:

    技术:vue、vant-ui、5+

  封装独立组件AppProgress.vue

<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>
<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>

dialog
v

confirm

class

@confirm
// app下载进度组件default {
props: {
// 进度值 percentageVal: {
type: Number,
default
},
// 是否显示弹窗 showProgress: {
type: Boolean,
defaultfalse
}
},
data() {
return {}
},
methods: {
confirmClick() {
this);
}
}
}

img {
width: 270px;
height: 163px;
position: fixed;
top:
35px;
z
;
}

.app
dialog {
overflow: visible;
width: 270px;
border
radius: 12px;
.van
progress {
margin
top: 124px;
z
;
}
.msg {
font
size: 16px;
font
;
color: white;
position: absolute;
top: 50px;
z
;
width:
;
text
align: center;
}
.van
dialog__footer {
border
radius: 12px;
.van
default {
.van
button__text {
width: 105px;
height: 26px;
border
radius: 13px;
background
color: #006eff;
color: white;
font
;
font
size: 12px;
display: inline
block;
margin
top: 10px;
line
height: 26px;
}
}
}
}

app升级代码,封装独立js文件:appUpdateOptions.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 {
      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;
    }
  }
};
/**
 * 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;
    }
  }
};

/**
* IOS 包发布到应用市场后要更新此处的ID,替换掉测试ID:1053012308
*//* eslint-disable no-undef */
import { getVersion } from
;
import request from
;
import { Dialog } from
;
import expiredStorage from
;

function sleep(numberMillis) {
varnew Date();
var numberMillis;
whiletrue) {
now
new Date();
ifreturn;
}
}

// vue继承的基础对象default {
data() {
return {
showProgress:
false,
percentageVal:

};
},
methods: {
appUpdate(ismanual) {
const that
this;// 获取5+运行环境的版本号
plus.runtime.getProperty(plus.runtime.appid,
function(inf) {
const ver
inf.version;var navigator.userAgent.toLowerCase();
// 苹果手机if.test(ua)) {
// 获取当前上架APPStore版本信息 request
.get(
, {
id:
// APP唯一标识ID })
.then(data
{
console.log(
JSON.stringify(data));
var data.resultCount;
forvar) {
var data.results[i].version;if ver) {
var normItem;
// plus.nativeUI.alert(“发现新版本:V” + normItem); Dialog.confirm({
title:
,
message: _msg
})
.then(()
{
// on confirm// 执行升级操作// 上新APPStore下载地址 })
.
catch {
// on cancelfalse// 1/12天内不再显示升级提示 });
return;
}
}
if (ismanual) {
plus.nativeUI.toast(
);
}
});
}
elseif.test(ua)) {
getVersion().then(res
{if ver)) {
var res.data.version;
const apkUrl
res.data.redirectUrl;
Dialog.confirm({
title:
,
message: _msg
})
.then(()
{
// on confirmtrue;
var plus.downloader.createDownload(
apkUrl,
{},
function(d, status) {
if) {
// sleep(1000);var// 下载apk// 自动安装apk文件false;
}
else {
plus.nativeUI.alert(
status);
that.showProgress
false;
}
}
);
try {
dtask.start();
// 开启下载的任务var;function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作switch (task.state) {
case:
//‘正在下载’;break;
case:
// ‘已连接到服务器’;break;
case:
prg
parseInt(
(parseFloat(task.downloadedSize)

parseFloat(task.totalSize))

);
prg;
break;
case:false;
break;
}
});
}
catch (err) {
that.showProgress
false;
if (ismanual) {
plus.nativeUI.toast(
err);
}
}
})
.
catch {
// on cancel
that.showProgress
false;
expiredStorage.setItem(
false// 1/12天内不再显示升级提示 });
}
else {if (ismanual) {
plus.nativeUI.toast(
);
}
}
});
}
});
},
// 点击确定按钮 confirmClick() {
thisfalse;
}
}
};

 注意:这里的版本号以字符串比较的方式可能会出现问题,正确的方式应该是:

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要老
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要老

function compareVersion(v1, v2) {
v1
)
v2
)
var Math.max(v1.length, v2.length)

while len) {
v1.push(
)
}
while len) {
v2.push(
)
}

forvar) {
var parseInt(v1[i])
var parseInt(v2[i])

if num2) {
return
}
elseif num2) {
return
}
}
return
}

compareVersion(// => 1 // 1表示 1.11.0比1.9.9要新// => 0 // 0表示1.11.0和1.11.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);
      });
    },
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);
      });
    },


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

结束…….

» 本文来自:前端开发者 » 《web app升级—带进度条的App自动更新_百厌_前端开发者》
» 本文链接地址:https://www.rokub.com/73223.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!