帶進度條的App自動更新，效果如下圖所示：

?　? 技術：vue、vant-ui、5+

　　封裝獨立組件AppProgress.vue：

<template><div><van-dialogv-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>

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 {showProgress: 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 cancelexpiredStorage.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.showProgress = true;var dtask = plus.downloader.createDownload(apkUrl,{},function(d, status) {if (status == 200) {// sleep(1000);var path = d.filename; // 下載apkplus.runtime.install(path); // 自動安裝apk文件that.showProgress = false;} else {plus.nativeUI.alert('版本更新失敗:' + status);that.showProgress = 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);// 讓百分比 10% 增長，如果這里不這么處理  出現 堆棧內存溢出的問題// if (prg % 10 == 0) {//   // showLoading.setTitle(//   //   '已下載' + prg + '%'//   // );//   that.percentageVal = prg;// }that.percentageVal = prg;break;case 4:// plus.nativeUI.closeWaiting();that.showProgress = false;break;}});} catch (err) {that.showProgress = false;if (ismanual) {plus.nativeUI.toast('網絡異常,請稍候再試' + err);}}}).catch(error => {// on cancelconsole.log('error :', error);that.showProgress = false;expiredStorage.setItem('$upgradeTip', false, 1 / 12); // 1/12天內不再顯示升級提示
                });} else {console.log('當前版本號已是最新');if (ismanual) {plus.nativeUI.toast('當前版本號已是最新');}}});}});},// 點擊確定按鈕
    confirmClick() {this.showProgress = false;}}
};

?

調用代碼：

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

結束.......

轉載于:https://www.cnblogs.com/jiekzou/p/11544116.html

總結

以上是生活随笔為你收集整理的web app升级—带进度条的App自动更新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。