进度条提示基于uView框架，如何安装使用请查看官方文档，这里不做赘述 uView文档地址 介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)
在App.vue中的onLaunch或者onShow里写方法获取服务器版本数据
<script lang="ts">
import {
baseURL
} from '../services/request'
import Vue from 'vue';
export default Vue.extend({
mpType: 'app',
onLaunch() {
},
onShow() {
// #ifdef APP-PLUS
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid, (inf) => {
uni.setStorageSync('versionInfo', inf)
uni.request({
url: baseURL + '/edition_manage/get_edition', //后台接口地址
data: {
edition_type: plus.runtime.appid, //应用的appid
version_type: uni.getSystemInfoSync().platform, // android还是ios
},
success: (res: any) => {
if (res.data.payload.edition_number > inf.versionCode &&res.data.payload.edition_issue === "1") {
uni.reLaunch({
url: '../update/update?obj=' + JSON.stringify(res.data.payload)
})
}
}
})
});
// #endif
},
onHide() {
},
globalData: {
},
});
</script>
res.data.payload.edition_number是服务器的版本号 例如111
inf.versionCode是 manifest基础配置里的应用版本号，整数那个 例如111，
res.data.payload.edition_issue 代表是否提示更新，如果在提交ios应用审核期间，千万不要提示更新
更新页update.vue 如下
<template>
<view class="">
<u-modal v-model="show1" confirm-text="升级" :show-cancel-button="cancelButton" :title='title'
@confirm="confirm(1)">
<view class="u-update-content">
<rich-text :nodes="data.describe"></rich-text>
</view>
</u-modal>
<u-modal v-model="show2" @confirm="confirm(2)" title="升级APP" ref="uModal" :show-confirm-button="false">
<view class="tec fs24 mtb40">
正在为您更新，请耐心等待
</view>
<view class="plr32 mb40">
<u-line-progress :striped="true" :percent="percent" :striped-active="true"></u-line-progress>
</view>
</u-modal>
</view>
</template>
<script>
const app = getApp()
export default {
data() {
return {
title: '发现新版本',
percent: 0,
show1: true,
show2: false,
content: '',
cancelButton: false,
data: {
application_name: "",
describe: "",
edition_name: "",
edition_number: "",
edition_type: "",
edition_url: "",//下载地址
edition_force: "",
id: "",
package_type: "",
version_type: "",
}
}
},
onLoad(options) {
this.data = JSON.parse(options.obj)
if (this.data.edition_force === "0") { //是否强制更新
this.cancelButton = true
}
},
methods: {
download() {
const downloadTask = uni.downloadFile({
url: this.data.edition_url,
success: (res) => {
if (res.statusCode === 200) {
plus.runtime.install(res.tempFilePath, {
force: true, //true表示强制安装，不进行版本号的校验；false则需要版本号校验，
}, function() {
// console.log('install success...');
plus.runtime.restart();
}, function(e) {
console.log(e);
console.error('install fail...');
});
}
}
});
downloadTask.onProgressUpdate((res) => {
this.percent = res.progress
});
},
cancel() {
uni.navigateBack({
delta: 1
})
},
confirm(num) {
if (num == 1) {
this.show1 = false
if (this.data.package_type === '0') { //整包升级
if (this.data.edition_url.indexOf(".apk") != -1) {
this.show2 = true
this.download();
} else {
plus.runtime.openURL(this.data.edition_url);
}
} else { //资源包升级
this.show2 = true
this.download();
}
} else {
this.show2 = false
}
},
}
}
</script>
<style scoped lang="scss">
.u-full-content {
background-color: #00C777;
}
.u-update-content {
font-size: 26rpx;
color: $u-content-color;
line-height: 1.7;
padding: 30rpx;
}
.plr32 {
padding: 0 32rpx;
}
.mb40 {
margin-bottom: 40rpx;
}
</style>
在pages.json配置
{
"path": "pages/update/update",
"style": {
"navigationStyle": "custom", // 取消本页面的导航栏
"app-plus": {
"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
"background": "transparent", // 背景透明
"backgroundColor": "rgba(0,0,0,0)", // 背景透明
"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
}
}
},