uniapp开发的APP升级、整包更新和热更新组件

最新推荐文章于 2024-09-25 09:57:31 发布
最新推荐文章于 2024-09-25 09:57:31 发布
阅读量1.4k 收藏 3
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spring_007_999/article/details/131578904
版权

插件地址：app升级、整包更新和热更新组件

  • 仔细阅读说明文档，后台接口返回的数据格式要严格按照文档要求的格式返回，
  • 前端示例代码 或者根据实际业务修改 如果需要自动检测新版本，建议写在App.vue的onShow中，
  • <script>
	import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' //引入静默更新!!!!!!!!!!!!!!!!!!
	
	export default {
		globalData: {
			
		},
		onLaunch: function() {
			
		},
		onShow: function() {
			console.log('App Show')
			let that=this
			console.log('检测更新接口',that.globalData.jsonPath+'mobile/MobileAdminController/checkupdate')
			
			//#ifdef APP-PLUS 
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (inf) => {
				console.log("检测更新接口传参：")
				console.log("edition_type:", plus.runtime.appid)
				console.log("version_type: ",uni.getSystemInfoSync().platform)
				console.log("edition_number: ",inf.versionCode)
				//获取服务器的版本号
				uni.request({
					url: that.globalData.jsonPath+'mobile/MobileAdminController/checkupdate', //更新示例接口
					data: {
						edition_type: plus.runtime.appid,
						version_type: uni.getSystemInfoSync().platform, //android或者ios
						edition_number: inf.versionCode // 打包时manifest设置的版本号 
					},
					success: (res) => {
						console.log("57检测更新返回res：",res)
						//res.data.xxx根据后台返回的数据决定（我这里后端返回的是data），所以是res.data.data 
						//判断后台返回版本号是否大于当前应用版本号 && 是否发行 （上架应用市场时一定不能弹出更新提示）
						if (Number(res.data.data.edition_number) > Number(inf.versionCode) && res
							.data.data.edition_issue == 1) {
				
							//如果是wgt升级，并且是静默更新 （注意！！！ 如果是手动检查新版本，就不用判断静默更新，请直接跳转更新页，不然点击检查新版本后会没反应）
							if (res.data.data.package_type == 1 && res.data.data.edition_silence == 1) {
				
								//调用静默更新方法 传入下载地址
								silenceUpdate(res.data.data.edition_url)
				
							} else {
								//跳转更新页面 （注意！！！如果pages.json第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在setTimeout里面设置延时3到5秒再执行）
								uni.navigateTo({
									url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
										JSON.stringify(res.data.data)
								});
							}
						} else {
				
							// 如果是手动检查新版本 需开启以下注释
							//  uni.showModal({
							// 	title: '提示',
							// 	content: '已是最新版本',
							// 	showCancel: false
							// }) 
						}
					}
				
				})
				
			});
				
			//#endif  
		},
		onHide: function() {
			console.log('App Hide')
		}
	
	}
</script>

<style lang="scss">
	
</style>

 

在某个菜单加一个版本升级页面，

 

<template>
	<view class="container">
		<view class="content">
			<view class="box1">
				<image src="../../static/logo.png" class="img-logo"></image>
				<view class="h-name">{{appName}}</view>
				<view class="h-banben">版本号：{{appVersion}}</view>
			</view>
			<view class="box2">
				<view class="n-one" @click="jiancegengxin">
					<text class="n-one-text">检查新版本</text>
					<text class="iconfont icon-you"></text>
				</view>
				
			</view>
			
			
		</view>
		<view class="foot">
			<!--引入再main.js页面引入的全局的自定义底部组件-->
			<!--<footixinxi></footixinxi>-->
		</view>
	</view>
</template>

<script>
	import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' //引入静默更新 https://ext.dcloud.net.cn/plugin?id=7286
	
	export default {
		data() {
			return {
				appVersion:"",//版本号
				appName:"",//应用名称
				
			}
		},
		methods: {
			//检测版本更新方法
			jiancegengxin(){
				let that=this
				console.log('57检测更新接口',getApp().globalData.jsonPath+'mobile/MobileAdminController/checkupdate')
				
				//#ifdef APP-PLUS 
				
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					//获取服务器的版本号
					//if(uni.getSystemInfoSync().platform=='android'){
						//console.log("是Android系统的")
					
						uni.request({
							url: getApp().globalData.jsonPath+'mobile/MobileAdminController/checkupdate', //示例接口
							data: {
								edition_type: plus.runtime.appid,
								version_type: uni.getSystemInfoSync().platform, //android或者ios
								edition_number: inf.versionCode // 打包时manifest设置的版本号 
							},
							success: (res) => {
								console.log("57检测更新返回res：",res)
								//res.data.xxx根据后台返回的数据决定（我这里后端返回的是data），所以是res.data.data 
								//判断后台返回版本号是否大于当前应用版本号 && 是否发行 （上架应用市场时一定不能弹出更新提示）
								if (Number(res.data.data.edition_number) > Number(inf.versionCode) && res
									.data.data.edition_issue == 1) {
						
									//如果是wgt升级，并且是静默更新 （注意！！！ 如果是手动检查新版本，就不用判断静默更新，请直接跳转更新页，不然点击检查新版本后会没反应）
									if (res.data.data.package_type == 1 && res.data.data.edition_silence == 1) {
						
										//调用静默更新方法 传入下载地址
										silenceUpdate(res.data.data.edition_url)
						
									} else {
										//跳转更新页面 （注意！！！如果pages.json第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在setTimeout里面设置延时3到5秒再执行）
										uni.navigateTo({
											url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
												JSON.stringify(res.data.data)
										});
									}
								} else {
						
									// 如果是手动检查新版本 需开启以下注释
									 uni.showModal({
										title: '提示',
										content: '已是最新版本',
										showCancel: false
									}) 
								}
							}
						
						})
					
					// }else{
					// 	console.log("是IOS系统的")
						
					// }
					
					
				});
					
				//#endif  
			}
		},
		
		onLoad() {
			// #ifdef APP-PLUS
				 plus.screen.lockOrientation('portrait-primary'); 
			// #endif
			let that=this
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					console.log("获取设备信息826：",res)
					console.log(res.platform);
					console.log("版本号：",res.appVersion)
					console.log(res.appVersionCode)
					that.appVersion=res.appVersion
					that.appName=res.appName
					//检测当前平台，如果是安卓则启动安卓更新  
					// if (res.platform == "android") {
					// 	//this.AndroidCheckUpdate();
					// }
				}
			})
			
		},
		onUnload() {
			// #ifdef APP-PLUS
				  plus.screen.lockOrientation('portrait-primary'); 
			// #endif
		},
		onShow(){
			
		}
	}
</script>

<style>
.box1{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.img-logo{
	border-radius: 5px;
	width: 60px;
	height: 60px;
	margin: 30px 0 20px;
}
.h-name{
	font-size: 18px;
	font-weight: bold;
}
.h-banben{
	font-size: 12px;
	
}
.box2{
	padding: 30px 20px;
	font-size: 14px;
}
.n-one{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f5f5f5;
	padding: 10px 5px;
}
.n-one .iconfont{
	color: #999;
}

</style>

 

spring_007_999
关注
uniapp版本更新
m0_51431448的博客
04-23 3372
app往往在关于我们的页面会有版本更新操作，还有一种情况是，我们要不要强制更新，一般后端都要去加个字段，就是标识着要不要强制更新，如果是强制更新这种，那还得在刚进入到app的时候就进行版本的检测对比，如果版本和最大版本不一致，就必须更新，不更新的话就用不了该app，如果版本一致就不需要做提示了，其实逻辑基本一样，就是在刚进入页面检测版本的时候，如果版本一直就不需要更新了。uniapp每次修改了代码，或是增加了功能都得重新打包，显得尤为麻烦，所以做了个自动更新的功能。下面说下app端实现自动更新的功能。
uniapp [安卓苹果App端] - 最新实现“热更新“在线版本升级详细教程，支持后端服务器、云开发2种后台热更新版本控制逻辑，提供制作wgt包、精美更新提示弹框、资源在线更新、wgt静默更新无感知
王佳斌
09-01 3717
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果安卓app，热更新，wgt，在线升级，整包更新，app升级，UniApp热更新，详细教程，wgt静默更新怎么做，后台无感知悄悄升级版本，热更新弹框，如何覆盖底部tabbar不被点击，云空间，云开发，云函数，服务器，版本号控制，热更新报错，显示下载进度，下载后无法安装，中途卡住不动，如何解决更新失败，强制更新，ios跳转更新，vue，跳转appStore，资源热更新组件，完整流程，前端后端都做什么，热更新详细流程(Ap
uni-app更新某个组件版本；uni-app更新插件版本；uni-app更新uni_modules插件；uni-app小程序更新某一个组件的版本库
i_am_a_div的博客
02-25 3483
uni-app官方介绍的更新某一个组件的uni_modules方法 注意：本篇只是记录更新uni-app的组件库下某一个组件的版本。不是更新微信小程序版本。 场景原因：项目最初是去年开发的，当时下载了uni-app的自带组件库。但是时间筛选器uni-datetime-picker，当时的版本是2.0.13，就存在清空按钮不显示的bug。最新版本2.2.2就解决了以前的bug，但是旧版本官方又不维护。那么就导致我们项目中存在bug。 只有将此组件升级即可解决。我们不可能升级整个uni-app的组件库，那
uniapp之app在线升级
weixin_53420085的博客
09-14 1169
app两种在线更新的详细操作说明
uniapp之app版本更新，整体更新和热更新
Jocelyn_书
08-26 2893
工作中遇到一个需求，app上架各个市场后，用户 需要版本更新检验，下载最新的版本。每次升级之前，不管是热更新还是整体更新，都需要去更新。
**uniapp实现app版本更新：整包更新与热更新**
weixin_64648211的博客
08-27 879
本博客将详细介绍如何通过后台接口获取最新的版本信息，检测更新并执行相应的更新操作。
uniapp整包更新和热更新
zhuxichong123的博客
07-11 453
uniapp整包更新和热更新
uniapp打包APP实现应用内整包更新或热更新
weixin_53339757的博客
07-12 3836
uniapp实现APP内更新
uniapp 打包App 电商源码
06-01
5. **热更新**：uniapp支持热更新机制，开发者可以无需用户手动更新应用，即可实现代码的实时部署和修复。 6. **社区生态**：uniapp拥有活跃的开发者社区，提供各种插件和教程，方便开发者扩展功能和学习。 在...
uni-app整包更新与热更新方案(安卓和IOS)
唐先森的博客
12-25 6716
提供一种uni-app整包更新与热更新的方案，包括APP和后台客户端版本管理。
uview 商城中的 使用uniapp开发的一整套电商app的源码
03-03
《使用uniapp开发的电商app源码解析》 在当今移动互联网时代，电商应用程序已经成为商业领域不可或缺的一部分。本文将深入探讨一个基于uniapp框架开发的电商应用源码，旨在为开发者提供一个完整的参考实例，帮助...
专属uniapp的APP升级插件「geek-app-update」，打造一流的用户体验！
qq_43402051的博客
07-22 325
它是一款为uniapp量身打造的APP升级神器，提供多种升级方式、自带后台管理系统以及灵活的定制能力，让你的APP升级体验焕然一新。首先，让我们强调一下「geek-app-update」插件的独特性：它是专为uniapp开发的，所以它能够与uniapp完美契合，让你轻松为uniapp应用提供卓越的APP更新服务。现在是时候升级你的APP体验了！「geek-app-update」插件的config.js文件包含各种属性，让你可以轻松定制更新界面的样式和文字，让用户感受到你APP的独特魅力。
Uniapp在数据更新后立刻更新组件的方法
moeyui的博客
11-27 1234
数据更新后的组件强制刷新
uni-app之APP版本更新
XiaoHuiwei的博客
03-03 852
uni-app APP版本更新。
uniapp 实战 -- app 的自动升级更新（含生成 app 发布页）
朝阳39的博客
01-12 5930
修改 app 项目的代码，增加配置文件里的版本号后再次打包，得到升级后的apk，本范例版本配置为 1.0.2 版。会下载得到一个 index.html 文件，可根据需要修改名称。手机打开任意浏览器，扫描 app发布页的二维码即可下载安装。将项目免费托管到 unicloud 更方便，不托管也行。打开手机上的app，会弹出升级弹窗，按提示下载更新即可。运行 uni-admin 项目并登录。本范例中，版本配置为1.0.1版。（已托管的直接访问线上链接登录）将其托管到unicloud。
uniapp APP自动更新组件
最新发布
luck332的专栏
09-25 901
在uniapp中实现APP自动更新功能，主要涉及到客户端和服务器端的协同工作。
uniapp热更新和整包更新思路
林恒的博客
10-27 5361
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 我们知道，在打包Android App之前，我们需要先通过HX生成打包资源。如果是通过cli创建的项目，则通过以下命令生成打包资源： yarn build:app-plus 生成打包资源后的目录长这样： 然后将整个目录中的所有文件拷贝到Android项目的assets/apps/<appid>/www中： 可以...
uniapp 版本检查更新
carbonzhao的专栏
05-10 2134
总体来说uniapp的跨平台还是很不错的，虽然里面各种坑要去踩，但是踩坑也是开发人员的必修课和成长路。这不，今天就来研究了一下版本检查更新就踩到坑了。先来看看检查更新及下载、安装的实现。从左到右依次为检查到版本更新，下载安装过程，下载完成提示安装。我使用的是这个UI，你可以用也可以换掉！
uniapp app开发热更新
11-22
uniapp app开发热更新可以通过以下步骤实现： 1. 在uni-app项目的根目录下创建一个名为`update`的文件夹，用于存放热更新的资源文件。 2. 在`update`文件夹中创建一个名为`manifest.json`的文件，用于记录热更新的版本信息和资源文件列表。示例内容如下： ```json { "version": "1.0.0", "packages": [ { "path": "update.zip", "md5": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx" } ] } ``` 其中，`version`表示当前热更新的版本号，`packages`数组中的每个对象表示一个资源包，`path`表示资源包的路径，`md5`表示资源包的MD5值。 3. 将需要热更新的资源文件打包成一个zip文件，命名为`update.zip`，并放置在`update`文件夹中。 4. 在uni-app项目的`main.js`文件中添加热更新的代码。示例代码如下： ```javascript import { checkUpdate, downloadUpdate, applyUpdate } from 'uni-updater'; // 检查是否有新版本 checkUpdate({ url: 'http://example.com/update/manifest.json', // 热更新资源的manifest.json文件的URL success: (res) => { if (res.hasUpdate) { // 下载新版本资源 downloadUpdate({ url: 'http://example.com/update/update.zip', // 热更新资源的zip文件的URL success: (res) => { // 应用新版本资源 applyUpdate({ success: () => { // 热更新成功 }, fail: (err) => { // 热更新失败 } }); }, fail: (err) => { // 下载资源失败 } }); } }, fail: (err) => { // 检查更新失败 } }); ``` 以上代码中，`checkUpdate`函数用于检查是否有新版本的热更新资源，`downloadUpdate`函数用于下载新版本的热更新资源，`applyUpdate`函数用于应用新版本的热更新资源。 请注意，以上代码中的URL需要替换为实际的热更新资源的URL。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值