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

这篇具有很好参考价值的文章主要介绍了UNIAPP中IOS和安卓应用热更新和整包更新app的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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

UNIAPP中IOS和安卓应用热更新和整包更新app的方法
此方法经验证可以实现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, function(widgetInfo) {
				uni.setStorageSync("curversion", widgetInfo.version);
				let curversion = widgetInfo.version;
				console.log("当前版本", curversion);
				hotupdate.getAppByVersion(curversion, 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: "下载失败",
			mask: false,
			duration: 1500,
		});
	}
};
 
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",
				type: "ios",
				appversion: curversion,
			};
		} else {
			params = {
				app: "kdapp",
				type: "android",
				appversion: curversion,
			};
		}
		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',    //如果要纯文本,不要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://www.toymoban.com/news/detail-404405.html

到了这里,关于UNIAPP中IOS和安卓应用热更新和整包更新app的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 安卓/ios app获取权限授权,获取权限(相机权限,相册权限 等),App权限判断和提示

    (华为app市场要求:需要用户授权才能操作,然后用的这个。。。) uniapp插件市场:App权限判断和提示 作者信息 (如果需要可直接下载资源,版本看图片,这里不在更新,最新的可以去看看插件市场)

    2024年02月04日
    浏览(53)
  • uniapp - 安卓|苹果App软件实现调用百度人脸识别接口服务及人脸活体认证功能,uniapp苹果ios、安卓Android手机app平台,人脸认证、活体检测、身份证与人脸验证(示例代码,一键复制

    在uniapp手机App开发中(安卓Android|苹果ios系统),利用百度人脸识别api接口对接uniapp APP进行人脸识别、人脸检测、活体验证、人脸对比、人脸搜索、身份证信息是否与人脸匹配,支持离线SDK集成、离线无网络正常使用功能、自定义人脸识别框附近的页面样式和大小等。 提供详

    2024年04月11日
    浏览(68)
  • uniapp:蓝牙设备ios与安卓端deviceId不一致问题及ios端获取蓝牙mac地址方法

    在uniapp开发项目中,主要是指APP端,使用API接口: uni.getBluetoothDevices 或者 uni.onBluetoothDeviceFound 查找到的蓝牙设备数据里deviceId值不一样: 在安卓中deviceId即mac地址 在ios中deviceId即uuid 如何在ios端也能获取到mac地址? 通常情况下,蓝牙设备必定是有独一无二的mac地址,只是在

    2024年02月09日
    浏览(48)
  • uniapp对于android和ios退出app的方法

    当涉及到在 UniApp 中实现 Android 和 iOS 平台上退出应用程序的功能时,可以根据操作系统的不同使用不同的方法。下面是一篇详细的图文博客,介绍了如何在 UniApp 中实现 Android 和 iOS 的退出应用程序功能。 UniApp 提供了跨平台开发的能力,同时也支持原生应用程序的退出功能。

    2024年02月09日
    浏览(43)
  • uniapp 打包安装(安卓和ios)

    所需要的文件 包名 证书别名 证书私钥密码 证书文件 准备好文件后点击hbuilder的发行-原生app-云打包 注意:要选择自用证书及打正式包及快速安心打包,第一次打包时可能会勾选基础广告,取消即可。打包前需要在 DCloud里进行绑定手机号和实名认证的操作,否则会打包失败

    2024年02月02日
    浏览(41)
  • 聊天uniapp 微信小程序以及安卓app键盘弹出会把底部fixed定位的textarea输入框覆盖掉的解决方法

    采用此方法解决 将pages.json文件在指定的页面中加入以下配置 “softinputMode”: “adjustResize” 具体代码如下,将container的高度设置为100vh 注意: 虽然加了100vh后,但是聊天窗口底部还是会被遮挡,这怎么办那?办法就是:把内框view设置成95vh,小于100vh就行。

    2024年02月05日
    浏览(62)
  • 【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS(iphoneX 机型)底部安全区域适配(避开底部黑条虚拟键)

    一、前言 在使用 uniapp 进行应用开发时,可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计,屏幕底部有一个黑色的虚拟键区域,俗称\\\"刘海\\\"或\\\"黑条\\\"。为了避免应用内容被底部安全区域遮挡,需要进行

    2024年02月19日
    浏览(74)
  • uniapp安卓ios打包上线注意事项

    1、安卓包注意事项 隐私政策弹框提示   登录页面隐私政策默认不勾选 隐私政策同意前不能获取用户权限 APP启动时,在用户授权同意隐私政策前,APP及SDK不可以提前收集和使用IME1、OAID、IMS1、MAC、应用列表等信息   ios包注意事项 需要有注销账号的功能 3、安卓包基本资料

    2024年02月12日
    浏览(54)
  • uniapp 蓝牙小程序-兼容安卓和iOS

    withTimeout方法可以在搜寻设备时等待指定的秒数,如果30秒内未搜索到则取消搜索  计算数据校验和: 校验字节等于命令字节与所有数据字节之和的反码。求和按带进位加 (ADDC)方式计算,每个进位都被加到本次结果的最低位(LSB)。 vue页面代码   js函数代码 

    2024年02月03日
    浏览(43)
  • uniapp 安装安卓、IOS模拟器并调试

    一、安装Android模拟器并调试 1.下载并安装Android Studio。 2.创建简单project。 3.安装模拟器。  完成安卓模拟器的安装。 4.启动模拟器。 5.hbuilderx选择模拟器、运行。 点击刷新按钮后出现模拟器,勾选并运行。 6.调试。 在  HBuilderX  中,项目启动后,在下方的控制台选择  deb

    2024年04月25日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包