uniapp实现app版本更新弹窗,处理自主更新以及强制更新

可以通过以下步骤实现App版本更新弹窗及自主更新与强制更新的功能:

  1. 获取App版本信息:
    首先,您需要从服务器或其他途径获取最新的App版本信息,包括版本号和是否需要强制更新等。

  2. 检查当前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);
     });
    
  3. 弹窗逻辑:
    根据比较结果,决定是否弹出版本更新的弹窗。如果需要更新,根据更新类型(自主更新或强制更新)显示相应的弹窗。

  4. 自主更新弹窗:
    自主更新的弹窗可以提供一个提示信息,告知用户有新版本可用,并提供一个按钮供用户点击进行更新。您可以使用uni-app的弹窗组件,如uni.showModal()或者自定义弹窗组件来实现。

  5. 强制更新弹窗:
    强制更新的弹窗通常会中断用户的操作,并要求用户立即进行更新。您可以使用uni-app的弹窗组件,如uni.showModal()或者自定义弹窗组件来实现。在弹窗中禁用关闭按钮,或者提供一个单一的更新按钮,并在点击后跳转到更新页面或进行自动更新。

  6. 更新逻辑:
    根据用户的选择,如果用户点击了更新按钮,您可以使用uni-app的网络请求API,如uni.downloadFile()下载最新的App安装包。下载完成后,使用uni.saveFile()保存安装包到本地,然后调用uni.openDocument()打开安装包进行安装。ios则直接调整到AppStore

以上是大致的实现步骤,接下来展示运行效果图以及代码
uniapp实现app版本更新弹窗,处理自主更新以及强制更新_第1张图片
新建一个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/

你可能感兴趣的:(uni-app)