可以通过以下步骤实现App版本更新弹窗及自主更新与强制更新的功能:
-
获取App版本信息:
首先,您需要从服务器或其他途径获取最新的App版本信息,包括版本号和是否需要强制更新等。 -
检查当前App版本:
使用uni-app提供的API,如plus.runtime.getProperty
来获取当前App的版本号,并与最新版本进行比较。// 1. 获取当前版本号 let curversion = 100; plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { curversion = widgetInfo.version; console.log("当前版本", curversion); });
-
弹窗逻辑:
根据比较结果,决定是否弹出版本更新的弹窗。如果需要更新,根据更新类型(自主更新或强制更新)显示相应的弹窗。 -
自主更新弹窗:
自主更新的弹窗可以提供一个提示信息,告知用户有新版本可用,并提供一个按钮供用户点击进行更新。您可以使用uni-app的弹窗组件,如uni.showModal()或者自定义弹窗组件来实现。 -
强制更新弹窗:
强制更新的弹窗通常会中断用户的操作,并要求用户立即进行更新。您可以使用uni-app的弹窗组件,如uni.showModal()或者自定义弹窗组件来实现。在弹窗中禁用关闭按钮,或者提供一个单一的更新按钮,并在点击后跳转到更新页面或进行自动更新。 -
更新逻辑:
根据用户的选择,如果用户点击了更新按钮,您可以使用uni-app的网络请求API,如uni.downloadFile()
下载最新的App安装包。下载完成后,使用uni.saveFile()
保存安装包到本地,然后调用uni.openDocument()
打开安装包进行安装。ios则直接调整到AppStore
以上是大致的实现步骤,接下来展示运行效果图以及代码
新建一个AppUpdate.js文件来存放方法,全部代码如下
import {
BASE_URL
} from '@/common/config.js';
export default function AppUpdate() {
const appleId = 2021004105638058
let _this = this
let platform = uni.getSystemInfoSync().platform
//1. 获取当前版本号
let curversion = 100;
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
curversion = widgetInfo.version;
console.log("当前版本", curversion);
});
/*
2, 用当前版本号提交给服务端,判断是否需要更新,接口返回信息如下
versionId integer(int64)
versionNo 版本号 string
intro 版本描述 string
modify 是否强制更新 boolean
news 是否是最新版本 boolean
url apk地址 string
createTime 创建时间
*/
uni.request({
url: BASE_URL + '/choker-api-test/version/get',
method: 'GET',
data: {
versionNo: curversion
},
success: res => {
const {
versionNo,
intro,
modify,
news,
url,
createTime
} = res.data.data
let currTimeStamp = new Date(createTime).getTime();
console.log("是否是最新版= " + news + ",是否是最强制更新=" + modify + ",后台版本号=" + versionNo);
/* 判断是否是最新版 */
if (!news) {
//modify true 强制更新 false 自然更新
if (modify) {
uni.showModal({
title: '紧急升级通知',
content: '亲爱的用户,为了提供更好的使用体验与功能改进,我们进行了系统升级。请立即完成强制升级,否则将无法正常使用APP。感谢您的配合与支持!',
confirmText: '立即更新',
showCancel: false,
success: function(res) {
if (res.confirm) {
if (platform == "ios") {
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
}, function(e) {
console.log(
'Open system default browser failed: ' +
e.message);
});
} else{
uni.showToast({
icon: 'none',
mask: true,
title: '有新的版本发布,程序已启动自动更新。',
duration: 5000
});
//设置 最新版本apk的下载链接 这是固定的
let downloadApkUrl = url
console.log(downloadApkUrl);
plus.runtime.openURL(downloadApkUrl);
}
}
}
})
} else {
uni.getStorage({
key: 'tip_version_update_time',
success: function(res) {
var lastTimeStamp = res.data; // 本地时间戳
var tipTimeLength = 0; // 时间间隔
let cha = lastTimeStamp + tipTimeLength - currTimeStamp;
if (lastTimeStamp + tipTimeLength > currTimeStamp) {
console.log('当后台时间戳大于本地时间戳才会进入');
} else {
console.log('立即更新');
//重新设置时间戳
uni.setStorage({
key: 'tip_version_update_time',
data: currTimeStamp,
success: function() {
console.log('setStorage-success');
}
});
uni.showModal({
title: '版本更新',
content: '尊敬的用户,我们为您准备了最新的版本更新,内含诸多新功能与用户体验优化。点击立即升级,享受更多精彩和便利。',
confirmText: '立即更新',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
if (platform == "ios") {
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
}, function(e) {
console.log(
'Open system default browser failed: ' +
e.message);
});
} else {
uni.showToast({
icon: 'none',
mask: true,
title: '有新的版本发布,程序已启动自动更新。',
duration: 5000
});
//设置 最新版本apk的下载链接 这是固定的 每次把包放在这个链接里里面即可 由后端制作
let downloadApkUrl = url
plus.runtime.openURL(
downloadApkUrl);
}
} else if (res.cancel) {
console.log('下次一定');
}
}
});
}
},
fail: function(res) {
uni.setStorage({
key: 'tip_version_update_time',
data: currTimeStamp,
success: function() {
console.log('setStorage-success');
}
});
}
});
console.log(createTime, 'createTimecreateTime')
}
}
},
fail: () => {},
complete: () => {}
})
}
然后在App.vue
中的onLaunch()
钩子中执行该方法
import AppUpdate from "./common/AppUpdate.js"
onLaunch: function() {
// #ifdef APP-PLUS
AppUpdate()
// #endif
}
另外弹窗逻辑方面借鉴另一位博主的文章,地址附下
https://blog.csdn.net/wh20141212/article/details/106901120/