Uniapp app在线升级版本

Uniapp app在线升级版本

提示:本文章主要实现了检测当前版本是否为最新版本,弹窗可选择更新版本


|
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

一、判断版本是否是最新版

1.通过获取线上的版本号和app的版本号进行对比 查看是不是最新版 — app版本号小于线上版本号则不是最新版 提示更新


在这里插入图片描述

二、实现步骤

1.线上新建文件 smartAppversion.json

用于存储版本号和更新网址
代码如下(示例):

{
  "code": 0,
  "msg": "success",
  "version": "153", // 线上版本号
  "url": "http://172.24.241.145:8080/download/hunan.wgt" // 更新下载地址
}

2. 检测是否最新版本

代码如下(示例):

<view class="user-info" >
	<view class="uni-user" @click="handleCheckVersion">
		<view class="uni-user-title">检测更新</view>
	</view>
</view>
data() {
	return {
		innerVer: null,
		version: null,
		isCheckVersion: false
	}
}
handleCheckVersion() {
	let _this = this;
	// #ifdef APP-PLUS 
	_this.isCheckVersion = true;
	plus.screen.lockOrientation('portrait-primary') // 竖屏锁定
	plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
		_this.innerVer = widgetInfo.version;
		_this.version = widgetInfo.versionCode;
		uni.request({
			url: 'http://172.24.241.145:8080/download/smartAppversion.json?_t='+ new Date().getTime(),  //版本检测
			data: {},
			header: {},
			success: (result) => {
				if (result.data.code === 0) {
					setTimeout(() => {
						_this.isCheckVersion = false;
					}, 1000);
					if (result.data.version - _this.version > 0) { // 如果最新版本大于现在已经安装的App的版本
						uni.showModal({
							title: "更新提示",
							content: "发现新版本,请确认下载更新?",
							success: (res) => {
								if (res.confirm) {
									uni.showLoading({
										title: '下载更新包中...'
									});
									uni.downloadFile({
										url: result.data.url,
										success: (downloadResult) => {
											uni.hideLoading();
											if (downloadResult.statusCode === 200) {
												plus.runtime.install(downloadResult.tempFilePath, {
													force: true
												}, function() {
													console.log('App安装成功!');
													uni.showModal({
														title: 'App安装成功!',
														showCancel: false
													})
													plus.runtime.restart();
												}, function(e) {
													console.log('App安装失败!');
												})
											}
										}
									});
								}
							}
						})																	
					} else {
						uni.showModal({
							 title: '当前已是最新版本',
							 showCancel: false
						})
					}
				}
			}
		})
	})
	// #endif
}

3. 更新包安装

菜单 – 发行 – 原生App-制作应用wgt包–确定

在这里插入图片描述
打包完成后把smartAppversion.json 文件中的url换成对应的wgt包即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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,并且在下载过程中可以实时查看下载进度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值