带进度条的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="percentageva l" /> <div class="msg">版本更新中,请稍后...</div> </van-dialog> </div> </template> <script> // app下载进度组件 export default { props: { // 进度值 percentageva l: { 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, percentageva l: 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天内不再显示升级提示 }