uniapp的安卓升级功能说明

目录

1.实现思路

2.app代码示例

3.说明


1.实现思路

①将安装包存储在后台服务器。

创建版本信息表,存储安装包的相关信息。保存安装包的名称,版本号,网络地址,是否强制升级,发布时间信息及升级内容等。表结构如下:

CREATE TABLE `tb_app_version` (
  `ID` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `APP_NAME` varchar(50) DEFAULT NULL COMMENT '应用名称',
  `VERSION` varchar(20) DEFAULT NULL COMMENT '版本名称',
  `VERSION_CODE` int(11) DEFAULT NULL COMMENT '版本号',
  `FILE_NAME` varchar(50) DEFAULT NULL COMMENT '文件名',
  `APP_PATH` varchar(255) DEFAULT NULL COMMENT 'APP的网络路径',
  `APP_SIZE` int(11) unsigned zerofill DEFAULT NULL COMMENT '大小',
  `UPLOAD_TIME` datetime DEFAULT NULL COMMENT '上传时间',
  `RELEASE_TIME` datetime DEFAULT NULL COMMENT '发布时间',
  `FORCE_TYPE` int(11) DEFAULT NULL COMMENT '是否强制',
  `CONTENT` varchar(100) DEFAULT NULL COMMENT '更新内容',
  `CREATOR_ID` varchar(50) DEFAULT NULL COMMENT '创建人编号',
  `CREATOR_NM` varchar(50) DEFAULT NULL COMMENT '创建人姓名',
  `MODIFIER_ID` varchar(50) DEFAULT NULL COMMENT '最近更新人编号',
  `MODIFIER_NM` varchar(50) DEFAULT NULL COMMENT '最近更新人编号',
  `ORG_ID` varchar(50) DEFAULT NULL COMMENT '所属组织编号',
  `ORG_NM` varchar(50) DEFAULT NULL COMMENT '所属组织名称',
  `CREATE_TIME` datetime DEFAULT NULL COMMENT '创建时间',
  `MODIFY_TIME` datetime DEFAULT NULL COMMENT '最近更新时间',
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=79 DEFAULT CHARSET=utf8;

开发前端画面,设置版本的发布时间,版本号,是否强制及升级内容,并上传安装包。

后端将安装包的信息存储到数据库的版本表中,并将安装包上传到服务器上。

②获取后端的版本信息

获取发布时间小于等于系统时间的按照版本号或者创建时间进行降序排列的第一条数据,即最新的版本信息。

如果app的版本号和最新的版本号差了不只一个版本,则设置为强制升级;否则则按照最新app的强制升级区分进行处理。

3.app端处理

将app的版本号作为参数,获取后端的版本信息。

将app的版本号和后端最新的版本号进行比较。

相等则不做任何处理。

当小于最新的版本号时,再判断强制类型。强制时,弹出强制升级框,只有更新按钮,没有取消按钮,安卓的原生返回按钮失效。也就是说必须点击更新按钮,无法进行其他操作。非强制升级时,弹出升级框,有更新按钮和取消按钮,按照需要进行升级。

2.app代码示例

①升级判断方法

import { getUpdateInfo } from '@/api/appUpdate'
import { ref } from 'vue';

export default function AppUpdate() {
	// 获取运行平台
	let platform = uni.getSystemInfoSync().platform
	// 获取appid
	const appId : any = plus.runtime.appid
	// 获取当前app的版本信息
	const version = ref();
	plus.runtime.getProperty(appId, (inf) => {
		version.value = inf.versionCode
		/*
		2, 用当前版本号提交给服务端,判断是否需要更新,接口返回信息如下
		 versionCode	版本号	string
		 appPath	apk地址	string
		 forceType	是否强制更新	string
		 content	升级内容	string
		 */
		getUpdateInfo({ versionCode: version.value }).then((res) => {
			if (res.data.resHdr && res.data.resHdr.resCode != "0000") {
				return
			}
			if (!res.data.resBody) {
				return
			}
			const {
				versionCode,
				appPath,
				forceType,
				content
			} = res.data.resBody;
			// 后台返回的版本号大于现有的版本号
			if (Number(versionCode) > Number(inf.versionCode)) {
				//modify 1 强制更新 0 自然更新
				if (forceType) {
					uni.showModal({
						title: '紧急升级通知',
						content: '尊敬的用户,为了您更好的使用体验,请进行系统升级,否则将无法正常使用。感谢您的配合与支持!\r\n升级内容:' + content,
						confirmText: '立即更新',
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '有新的版本发布,程序已启动自动更新。',
								// 	duration: 2000
								// });
								//设置 最新版本apk的下载链接 这是固定的
								let downloadApkUrl = appPath
								console.log(downloadApkUrl);
								uni.downloadFile({
									url: downloadApkUrl, //仅为示例,并非真实的资源
									success: (res) => {
										if (res.statusCode === 200) {
											console.log('下载成功');
											plus.runtime.install(res.tempFilePath, {
												force: false
											}, () => {
												console.log("更新成功")
												// uni.hideToast();
												plus.runtime.restart();
												return;
											}, err => {
												console.log("更新失败")
												uni.showToast({
													icon: "none",
													title: "更新失败" + JSON.stringify(err),
													duration: 2000
												})
											})
										}
									}
								});
								// plus.runtime.openURL(downloadApkUrl);
							} else {
								AppUpdate()
							}
						}
					})
				} else {
					uni.showModal({
						title: '升级通知',
						content: '尊敬的用户,我们为您准备了最新的版本,点击立即升级,享受更多精彩和便利。\r\n升级内容:' + content,
						confirmText: '立即更新',
						cancelText: '取消',
						success: function (res) {
							if (res.confirm) {
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '有新的版本发布,程序已启动自动更新。',
								// 	duration: 5000
								// });
								//设置 最新版本apk的下载链接 这是固定的 每次把包放在这个链接里里面即可 由后端制作
								let downloadApkUrl = appPath
								uni.downloadFile({
									url: downloadApkUrl, //仅为示例,并非真实的资源
									success: (res) => {
										if (res.statusCode === 200) {
											console.log('下载成功');
											plus.runtime.install(res.tempFilePath, {
												force: false
											}, () => {
												plus.runtime.restart();
												console.log("重启成功")
												return;
											}, err => {
												console.log("更新失败")
												uni.showToast({
													icon: "none",
													title: "更新失败" + JSON.stringify(err),
													duration: 2000
												})
											})
										}
									}
								});

							} else if (res.cancel) {
								console.log('下次一定');
							}
						}
					});
				}
			} else {
				console.log("版本号已经是最新不用升级")
			}
		}
		).catch((res) => {
			uni.showToast({
				title: '获取版本号失败',
				icon: 'error'
			})
		})
	});


}

通过plus命令获取当前app的相关信息,如下:

HTML5+ API Reference

获取后端的版本信息后,进行版本号的比较,如果存在最新的版本号,则进行强制区分的判断,强制时则弹出强制升级框,否则弹出非强制升级模态框。

升级框通过uni.showModal实现。

强制升级时,设置标题,升级内容,按钮的名字,并设置取消按钮不显示。在打开模态框成功的方法中,通过res.confirm判断点击了升级按钮,点击了升级按钮后,进行安装包的下载,下载成功后进行安装,安装成功后进行重启。如果没有点击升级按钮,则再次执行此方法。

非强制升级时,设置了取消按钮显示,点击了取消按钮,不进行升级操作。点击升级按钮,进行升级操作。

②在首页的setup函数中执行此方法

3.说明

①强制升级安装过程中避免取消操作

安装包安装时,用户可以在安装过程中进行取消,如何避免这个问题?

执行plus.runtime.install方法时,即使用户取消操作,还是会执行成功方法,在成功的方法中添加restart方法,则会避免这个问题,如果用户取消了,则app会重新启动,登录之后再次弹出升级框。

②规避安卓手机原生的返回按钮

弹出强制升级框后,点击原生的返回按钮,可以关闭强制升级框,如何避免这个问题?

(1)通过判断是否点击的升级按钮,如果res.confirm返回true,则代表点击了升级按钮,如果为false,则代表没有点击升级按钮,则再次调用此升级方法进行升级

(2)不使用模态框方式,如果需要强制升级,跳转到强制升级画面,设置画面不能进行返回。

参照:

uniapp实现app版本更新弹窗,处理自主更新以及强制更新_uni-app检测app版本更新-CSDN博客

uniapp APP端在线升级功能实现讲解——强制或可选升级,下载进度显示_plus.runtime.install-CSDN博客

uniapp实现app检查更新与升级-uni-upgrade-center详解-CSDN博客

  • 15
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp是一个基于Vue.js框架的跨平台应用开发框架,可以使用一套代码同时在多个平台上进行开发,例如iOS、Android和Web等。在uniapp中实现app端的在线升级功能以及下载进度调控需经过以下步骤: 首先,在后端服务器上准备好最新版本的app文件,并提供相应的下载链接。 其次,在uniappApp.vue文件中,监听app的启动事件,通过调用uni.request方法向后端发送请求获取最新版本的信息。 然后,与服务器端返回的版本信息进行比较,判断是否有新版本需要更新。如果有新版本需要更新,将服务器端返回的下载链接存储到本地。 接下来,通过uni.downloadFile方法进行文件下载,同时使用uni.showLoading方法显示下载进度。 在下载过程中,可以通过uni.onDownloadProgress方法监听下载进度变化,并根据下载进度进行相应的界面更新或用户提示。 当下载完成后,使用uni.hideLoading方法隐藏下载进度提示,并提示用户是否立即安装新版本。如果用户选择立即安装,可以通过uni.openDocument方法打开下载的app文件进行安装。 最后,如果用户选择稍后安装或者取消安装,可以在合适的时机再次提醒用户是否需要更新,重复上述步骤。 总之,通过以上步骤,可以实现uniapp app端的在线升级功能以及下载进度调控,让用户可以方便地获取到最新版本的app,并且在下载过程中可以实时查看下载进度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值