带进度条的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); }); },
结束.......