进度条提示基于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屏幕左边滑动关闭当前页面的功能 } } },