uniapp实现app自动更新详细步骤

 更新时间:2023年08月25日 10:00:28   作者:怀中猫@j  
这篇文章主要给大家介绍了关于uniapp实现app自动更新的详细步骤,文中给出了详细的代码示例以及图文教程,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下

需求概述:

最近遇到的需求,扫码核验的app需要在线自动升级安装(因app简单上不了应用市场,所以调研用在线更新的办法)

第一步:首先需要一个可以更新和获取数据的接口(后端)

  • 比如第一次打包时的版本名称是1.0.1,那第一次将这个1.0.1版本的手动安装到手机上后,后续想要实现自动更新,再次打包的版本名称就必须大于1.0.1(因为本次实现的逻辑就是根据版本名称)
    版本号位置:manifest.json >> 基础配置 >> 应用版本名称

  • 当需要更新app的时候,改变版本名称(必须大于上一个版本),开始打包

  • 同时在后端的接口里同步更新你的此次打包的版本名称

第二步:打包后的apk文件需要放在服务器上,然后拿到在服务器上的文件的地址(后续有用)

第三步:开始在App.vue里书写前端逻辑(直接贴代码)

  • onLoad() : 在页面加载的时候触发,只会调用一次,在onLoad() 函数中,可以通过 option获取当前页面路径中的参数
  • onShow(): 在页面显示时调用,也就是切换页面的时候,或者切入前台的时候触发,可以多次触发
    根据自己的需求来确定是写在onShow还是onLoad

原理:获取当前app的版本名称,在onShow触发的时候调接口比对当前app版本名称和线上最新版本名称,如果线上最新版本名称大于当前版本名称则下载最新的apk安装更新

onShow: function() {
	console.log('App Show')
	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
	this.version = widgetInfo.version
	uni.request({
		url: 'http://xxxx.cczu.edu.cn:8081/api/dict',
		success: (res) => {
			function compareVersion(version1, version2) {
				const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
				const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
				  //计算版本号大小,转化大小
				 function toNum(a){
				 	const c = a.toString().split('.');
				 	const num_place = ["", "0", "00", "000", "0000"],
				 		r = num_place.reverse();
				 	for (let i = 0; i < c.length; i++){
				 		const len=c[i].length;
				 		c[i]=r[len]+c[i];
				 	}
				 		return c.join('');
				 	}
				 	// 检测版本号是否需要更新
				 	function checkPlugin(a, b) {
				 		const numA = toNum(a);
				 		const numB = toNum(b);
				 		return numA > numB ? 1 : numA < numB ? -1 : 0;
				 	}
				 		return checkPlugin(newVersion1 ,newVersion2);
				 	}
				 	for (let i of res.data.content) {
				 		if (i.description === 'app版本') {
							// 1代表app新包版本号大于本地版本号
				 			if (compareVersion(i.dictDetails[0].value, this.version) === 1) {
				 				uni.showModal({
				 					title: '提示',
				 					content: '发现新的应用安装包,点击确定立即更新',
				 					success: function (res) {
				 					   if (res.confirm) {
				 					       	console.log('用户点击确定');
											uni.showLoading({
												title: '更新中……'
											})
				 							uni.downloadFile({
				 								// 存放最新安装包的地址
				 								url: 'http://xxxx.xxxx.com/__UNI__xxxx.apk',
				 								success: (downloadResult) => {  
													uni.hideLoading();
				 								    if (downloadResult.statusCode === 200) { 
														uni.hideLoading();
				 								        plus.runtime.install(downloadResult.tempFilePath,{ 
				 								        	force: false 
				 								        }, function() {
				 								        	console.log('install success...');  
				 								            plus.runtime.restart();  
				 								        }, function(e) {  
															uni.hideLoading();
				 								            console.error('install fail...');  
				 								        });  
				 								    }
				 								}  
				 							}); 
				 					   } else if (res.cancel) {
				 					   		console.log('用户点击取消');
				 					   }
				 					}
				 				});
				 			} else {
				 		}
				 	}
				 }
			}
		});
	});
},

总结 

到此这篇关于uniapp实现app自动更新详细步骤的文章就介绍到这了,更多相关uniapp app自动更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用原生JavaScript实现放大镜效果

    使用原生JavaScript实现放大镜效果

    这篇文章主要为大家详细介绍了如何使用原生JavaScript实现放大镜效果(可自由大小适配),文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-03-03
  • Jsonp 跨域的原理以及Jquery的解决方案

    Jsonp 跨域的原理以及Jquery的解决方案

    JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。
    2010-05-05
  • JavaScript极简入门教程(二):对象和函数

    JavaScript极简入门教程(二):对象和函数

    这篇文章主要介绍了JavaScript极简入门教程(二):对象和函数,本文讲解了对象基础知识、函数基础知识、函数调用、异常、继承等内容,需要的朋友可以参考下
    2014-10-10
  • 浅谈javascript中call()、apply()、bind()的用法

    浅谈javascript中call()、apply()、bind()的用法

    一直对Javascript中的apply/call/bind的用法很模糊,恰好看到了这篇文章。对三者之间的区别与联系算是有了比较清晰的认识。这里记录下来,分享给大家。
    2015-04-04
  • JS中常见的8种继承方法总结

    JS中常见的8种继承方法总结

    这篇文章主要给大家介绍了关于JS中常见的8种继承方法,在js中所有的引用类型都继承了Object,而继承也是通过原型链实现的,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 微信小程序实现简单购物车功能

    微信小程序实现简单购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 微信小程序实现树莓派(raspberry pi)小车控制

    微信小程序实现树莓派(raspberry pi)小车控制

    这篇文章主要为大家详细介绍了微信小程序实现树莓派(raspberry pi)小车控制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JS localStorage存储对象,sessionStorage存储数组对象操作示例

    JS localStorage存储对象,sessionStorage存储数组对象操作示例

    这篇文章主要介绍了JS localStorage存储对象,sessionStorage存储数组对象操作,结合实例形式详细分析了JS使用localStorage存储对象以及sessionStorage存储数组对象相关操作技巧与注意事项,需要的朋友可以参考下
    2020-02-02
  • JS实现点击颜色块切换指定区域背景颜色的方法

    JS实现点击颜色块切换指定区域背景颜色的方法

    这篇文章主要介绍了JS实现点击颜色块切换指定区域背景颜色的方法,涉及javascript操作cookie及背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 原生JS面向对象实现打砖块小游戏

    原生JS面向对象实现打砖块小游戏

    这篇文章主要为大家详细介绍了原生JS面向对象实现打砖块小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09

最新评论