UNIAPP中IOS和安卓应用热更新和整包更新app的方法

分类：iOS作者：北漂燕郊杨哥

文章目录

前言

公司有一个项目《配送APP》是用uniapp开发的，用于公司几百号骑士员工使用，功能已经很完备，具有分配配送任务，接单，取餐，完成，打卡等功能，用得一直很好，但唯一一个缺点是，当APP功能上有升级时需要通知全体骑手手动把旧版本卸载了，再手工下载新版本安装，更新升级是十分麻烦，尤其年龄稍大一些人员在升级和更新时操作上有些困难，为了解决了这个问题，反反复复百度了一下相关的UNIAPP热更新方案是可以做到的，那我们来一步步的为项目增加热更新和升级的功能

在这里插入图片描述


此方法经验证可以实现android app,ios app,企业版iosapp的热更新

一、在应用启动的APP.VUE里增加版本检测代码

1.APP.VUE里引入hotupdate包

  import hotupdate from './common/hotupdate.js';

// #ifdef APP-PLUS
			console.log('APP-PLUS 1');
			plus.runtime.getProperty(plus.runtime.appid,function(widgetInfo) {
				uni.setStorageSync("curversion",widgetInfo.version);
				let curversion = widgetInfo.version;
				console.log("当前版本",curversion);
				hotupdate.getAppByVersion(curversion,true);
			});
			// #endif

完整代码如下:

<script>
  // import api from './api/api.js';
  import websocket from './common/websocketStore.js';
  import hotupdate from './common/hotupdate.js';
	export default {
		onLaunch: function() {
			
			console.log('App Launch 1');
			// #ifdef APP-PLUS
			console.log('APP-PLUS 1');
			plus.runtime.getProperty(plus.runtime.appid,true);
			});
			// #endif
			
			// 初始换 建立websocket连接
			websocket.dispatch('WEBSOCKET_INIT',"ws://1.1.1.1:9501");
		},onShow: function() {
			console.log('App Show')
		},onHide: function() {
			console.log('App Hide')
		},}
</script>

<style>
	/*每个页面公共css */
</style>

二、第二步增加hotupdate包用于处理热更新下载安装包

1.在项目录的common目录新增加hotupdate.js文件

import api from '../api/api.js';
async function getversion(success,fail) {
	let params = {};
	if (uni.getSystemInfoSync().platform == "ios") {
		params = {
			app: "kdapp",type: "ios",};
	} else {
		params = {
			app: "kdapp",type: "android",};
	}
	console.log("api");

	api.version(params,function(res) {
		console.log('version res');
		console.log(res);
		if(res.status == 0)
		{
			if(res.data.version != 1)
			{
				
			}
		}
		else
		{
			console.log('error');
			uni.showToast({
				title: res.msg,icon: 'none',//如果要纯文本，不要icon，将值设为'none'
				duration: 3000    //持续时间为 2秒
			});
		}
	});
}
 
function update(fileName) {
	let downURL =  fileName;
	console.log('下载地址',downURL);
	//后台显示进度条
	let dtask = plus.downloader.createDownload(
		downURL,{},function(d,status) {
			//下载完成
			uni.showModal({
				title: "更新提示",content: "新版本已经准备好，是否更新应用？",success: (res) => {
					if (res.confirm) {
						install(d,status);
					}
				},});
		}
	);
	start(dtask);
};
 
function start(dtask) {
	try {
		dtask.start(); //开启下载任务
		let prg = 0;
		let showLoading = plus.nativeUI.showWaiting("正在下载");
		dtask.addEventListener("statechanged",function(task,status) {
			switch (task.state) {
				case 1:
					showLoading.setTitle("正在下载");
					break;
				case 2:
					showLoading.setTitle("已连接到服务器");
					break;
				case 3:
					prg = parseInt(
						(parseFloat(task.downloadedSize) /
							parseFloat(task.totalSize)) *
						100
					);
					showLoading.setTitle("  正在下载" + prg + "%  ");
					break;
				case 4:
					plus.nativeUI.closeWaiting();
					break;
			}
		});
 
	} catch (err) {
		plus.nativeUI.closeWaiting();
		uni.showToast({
			title: "更新失败-03",mask: false,duration: 1500,});
	}
};
 
function install(d,status) {
	//下载完成
	if (status === 200) {
		plus.runtime.install(d.filename,{
			force: false
		},function() {
			plus.nativeUI.closeWaiting();
			plus.nativeUI.alert("应用资源更新完成！是否重启应用！",function() {
				plus.runtime.restart();
			});
		},function(e) {
			plus.nativeUI.closeWaiting();
			console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
			plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
		});
	} else {
		uni.showToast({
			title: "下载失败",});
	}
};
 
function close(version) {
	try {
		console.log( '保存要跳过的版本',version)
	    uni.setStorageSync('skip_version',version);
	} catch (e) {
	    // error
	}
};
 
function signOut() {
	// #ifdef APP-PLUS
	plus.runtime.quit();
	// #endif
}
 
export default{
	getAppByVersion(curversion,back) {
		console.log("came in");
		let params = {};
		if (uni.getSystemInfoSync().platform == "ios") {
			params = {
				app: "kdapp",appversion: curversion,};
		} else {
			params = {
				app: "kdapp",};
		}
		api.version(params,function(res) {
			console.log('version res');
			console.log(res);
			if (res.status == 0 && res.data) {
				let result = res.data;
				if(back){
					try {
					    const value = uni.getStorageSync('skip_version');
						console.log( '是否跳过当前版本',value,result.version)
					    if (value && value === result.version) {
					        return;
					    }
					} catch (e) {
						
					}
				}
				if (result.version != curversion) {
					console.log('有新版本要更新',result);
					console.log('新版本',result.version);
					console.log('目前版本',curversion);
					result.back = back;
					if (uni.getSystemInfoSync().platform != "ios") {
						plus.nativeUI.confirm("系统提示",function(e) {
							console.log(e); 
							if (e.index == 0) {
								console.log('update');
								update(result.downurl);
							} else if (result.strategy == 'force') {
								signOut();
							} else if (result.strategy == 'recommend') {
								close(result.version);
							}
						},{
							"title": "新版本","buttons": ["立即更新",result.strategy == 'force' ? "退出应用" : "暂不更新"]
						});
					}
					else
					{
						uni.showModal({
							title:"更新提示",content: "请点击按钮复制链接，粘贴到Safari浏览器打开，下载最新版本",confirmText: "点击复制",showCancel:false,success:()=>{
								uni.setClipboardData({
									data:"https://xxxx.xxxxx.xxxx/upload/peisong/index.html",success:()=>{
										uni.showToast({
											title:"复制链接成功，请粘贴到Safari浏览器打开"
										})
									}
								})
							}
						});
					}
				} else if (!back) {
					//plus.nativeUI.alert("当前已是最新版本！");
				}
			}
			else if (res.status != 0)
			{
				console.log('error');
				uni.showToast({
					title: res.msg,//如果要纯文本，不要icon，将值设为'none'
					duration: 3000    //持续时间为 2秒
				});
			}else if (!back) {
					//plus.nativeUI.alert("当前已是最新版本！");
			}
		});
		
	}
	
}

三、服务器端需要增加一个接口用于查询是否有新版本

如果有返回新版本的详细信息，包括下载地址，这里简单提供一下存储app版本的mysql数据表结构，每个版本的每一端存放一条记录

CREATE TABLE `my_db`.`dbpree_app_version`(
  `id` int(11) NOT NULL AUTO_INCREMENT,`type` varchar(20)  NOT NULL default '' COMMENT 'type: android ios ',`version` varchar(32)  NOT NULL default '' COMMENT 'app版本号',`is_new` tinyint(1)  NOT NULL default '0' COMMENT '是否最新版本',`des` varchar(255)  NOT NULL default '' COMMENT '版本描述',`downurl` tinyint(1)  NOT NULL default '0' COMMENT '下载地址',`add_time` int(10) UNSIGNED NOT NULL default 0 COMMENT '添加时间',PRIMARY KEY (`id`),INDEX `type`(`type`),INDEX `version`(`version`),INDEX `is_new`(`is_new`)
)ENGINE=InnoDB AUTO_INCREMENT=1;

简单的PHP查询数据库后返回的版本信息：

if($receive_data['c'] == 'version'){
    $type = $_REQUEST['type'] ? trim($_REQUEST['type']) : '';
    $sql = "select * from " . $GLOBALS['site']->table('app_version') . " where is_new=1 and type='$type'";
    $version = $db->getRow($sql);
    if($version){
        appMake_json_result($version);
    }else{
        appMake_json_error(3001,"没有查到对应版本信息");
    }
}

基本上这样就实现的uniapp打包的anorid和ios app的热更新的效果，非常好用

总结

uniapp实现app热更新,经过简单改进就可以用上，挺不错的，分亨出来供大家参考。最后，提醒一下，android,ios 和企业版ios的应用下载方式和不一样：
android 直接下载就可以了
ios 可以提示跳到苹果的应用市场
企业版的ios 可以提示复制下载地址后，到Safari浏览器粘贴地址下载的方式实现更新

文章中的方法项目组中的张同学也参与了开发与测试

如有问题请留言反馈，若对您有帮助，请帮点个赞，谢谢！

原文地址：https://blog.csdn.net/itopit

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

10个常见的苹果iOS16问题及解决方法
当我们远离最新的 iOS 16 更新版本时，我们听到了困扰 Apple 最新软件的错误和性能问题。
怎么激活苹果手机？苹果手机激活步骤详解
欧版/美版 特别说一下，美版选错了 可能会永久丧失4G，不过只有5%的概率会遇到选择运营商界面且部分必须连接到iTunes才可以激活
借助辅助工具appuploader iOS应用上架流程
一般在接外包的时候, 通常第三方需要安装你的app进行测试(这时候你的app肯定是还没传到app store之前)。
Flutter中实现整个App变为灰色
前言为了让更多的人永远记住12月13日，各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的，只需要在最外层的控件上包裹ColorFiltered，用法如下：ColorFiltered（颜色过滤器）看名字就知道是增加颜色滤镜效果的，ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.
【Cocos creator】Cocos creator介绍和入门
Cocos creator介绍和入门
Vue3使用axios的配置教程详解
vue3.0 axios封装
flutter升级/版本切换
flutter升级/版本切换
【C++入门】文件流fstream介绍和使用
(1)在C++11标准时，open函数的文件路径可以传char指针也可以传string指针，而在C++98标准，open函数的文件路径只能传char指针；(2)open函数的第二个参数是打开文件的模式，从函数定义可以看出，如果调用open函数时省略mode模式参数，则默认按照可读可写(ios_base:in | ios_base::out)的方式打开；(3)打开文件时的mode的模式是从内存的角度来定义的，比如：in表示可读，就是从文件读数据往内存读写；out表示可写，就是把内存数据写到文件中；
iOS App页面置灰
文章目录方法一：分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二：给App整体添加灰色滤镜参考App页面置灰，本质是将彩色图像转换为灰度图像，本文提供两种方法实现，一种是App整体置灰，一种是单个页面置灰，可结合具体的业务场景使用。方法一：分别将图片和文字置灰一般情况下，App页面的颜色深度是24bit，也就是RGB各8bit；如果算上Alpha通道的话就是32bit，RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit，这8bit表示的颜色不是彩色，而是256
iOS黑(灰)白化实现方案---记录
领导让调研下黑(灰)白化实现方案，自己调研了两天，根据网上资料，做下记录只是学习过程中的记录，还是写作者牛逼
让学前端不再害怕英语单词二
让学前端不再害怕英语单词（二），通过本文，可以对css，js和es6的单词进行了在逻辑上和联想上的记忆，让初学者更快的上手前端代码
电视剧里的代码真能运行吗？
用Python送你一颗跳动的爱心
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app项目中实现人脸识别，既使用uni-app中的live-pusher开启摄像头，创建直播推流。通过快照截取和压缩图片，以base64格式发往后端。
vue支付项目-APP微信支付功能
商户APP调用微信提供的SDK调用微信支付模块，商户APP会跳转到微信中完成支付，支付完后跳回到商户APP内，最后展示支付结果。CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；4.可取消支付，放弃支付会返回会员页面，页面提示支付取消；2.判断支付方式，如果是1，则是微信支付方式。1.判断是否在微信内支付，需要在微信外支付。
U3D热更新技术
iOS修改ipa并重新签名打包
Mac命令行修改ipa并重新签名打包
UniApp 在 iOS 16 下真机自定义基座调试指南，可解决模拟器无法输出调试日志问题
首先在 iOS 设备中打开开发者模式。位于：设置 - 隐私&安全 - 开发者模式（需重启）
IOS开发之——Undefined symbol:_OBJC_CLASS
一 现象导入MBProgressHUD显示信息时，出现如下异常现象Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MBProgressHUD", referenced from: objc-class-ref in ViewController.old: symbol(s) not found for architecture x86_64clang: error: linker command failed wit
uni-app开发App上架Apple Store流程简略版
Profiles >> 加号添加 >> Distribution >> "App Store" >> 选择 2.1 创建的App ID >> 选择绑定 2.3 的发布证书（.cer）>> 输入描述文件名称 >> Generate 生成描述文件 >> Download。Certificates >> 加号添加 >> "App Store and Ad Hoc" >> “Choose File...” >> 选择上一步生成的证书请求文件 >> Continue >> Download。
Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解
今天有需求，要实现的功能大致如下：在安卓和ios端实现分享功能可以分享链接，图片，文字，视频，文件，等欢迎大佬多多来给萌新指正，欢迎大家来共同探讨。如果各位看官觉得文章有点点帮助，跪求各位给点个“一键三连”，谢啦~声明：本博文章若非特殊注明皆为原创原文链接。
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot