進度條提示基於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屏幕左邊滑動關閉當前頁面的功能
}
}
},