带进度条的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>
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;// 获取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; } }};
注意：这里的版本号以字符串比较的方式可能会出现问题，正确的方式应该是：
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要老
调用代码：
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); }); },
结束…….