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

插件地址: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>

猜你喜欢

转载自blog.csdn.net/spring_007_999/article/details/131578904