h5 app版本管理

深藏阁楼爱情的钟 2022-03-07 00:30 290阅读 0赞

基于mui框架做一个简单的版本管理；

原理：

在通用js中设置一个版本号，然后在个人中心界面设置一个版本管理li

![20190315201126543.png][]

点击这个 版本就像后台发起请求最新版的版本号和链接，

然后将版本号和app内置的版本号，做比较，如果有新版，就开始下载文件。否则就是最新版

这是事件，然后跳转到 版本页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

因为是自己做的 所以很简陋，如果有更好看的样式，可以自己修改

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title></title>
    		<link href="css/mui.min.css" rel="stylesheet" />
    		<link rel="stylesheet" type="text/css" href="css/general.css" />
    		<style>
    			.versiondiv {
    				width: 100%;
    				height: 100%;
    				background-color: rgba(162, 167, 173, 0.5);
    				z-index: 999;
    				position: fixed;
    				left: 0;
    				top: 0;
    			}
    			
    			.version-main {
    				width: 100%;
    				height: 100%;
    				background-color: white;
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    				align-items: center;
    			}
    			
    			.version-main>h4 {
    				padding: 0.5em;
    			}
    			.vcontent {
    				width: 90%;
    				height: 75%;
    				margin: 0.5em auto;
    				text-align: left;
    				overflow: hidden;
    				overflow-y: initial;
    			}
    			.vfoot {
    				bottom: 0;
    				width: 100%;
    				height: 2.5em;
    				border-top: 1px solid #c7c7c7;
    				display: flex;
    				align-items: center;
    			}
    			.vfoot>div:first-child {
    				border-right: 1px solid #c7c7c7;
    			}
    			
    			.vfoot>div {
    				width: 50%;
    				text-align: center;
    				line-height: 2.5em;
    			}
    			.span{
    				font-family:'宋体';
    				white-space:pre;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="versiondiv">
    			<div class="version-main">
    				<h4>版本升级</h4>
    				<div class="vcontent" id="vcent">
    					
    					
    				</div>
    				<div style="padding:20px;">
    			        <div style="line-height:38px;" id="dstatus">下载状态</div>
    			        <div class="mui-progressbar" id="psb1">
    			            <span></span>
    			        </div>
    			    </div>
    				
    				<div class="vfoot">
    					<div class="" id="skip">跳过</div>
    					<div class="" id="updateVersion">更新</div>
    				</div>
    			</div>
    		</div>
    		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
    		<script>
    			var vurl = "",	//下载路径
    				content = "",	//更新内容
    				dtask = null,	//下载对象
    				flag = false;	//下载成功
    			var psb1 = mui('#psb1');	//下载状态
    			var dstatus   = mui('#dstatus');
    			window.onload = function(){
    				mui.init();
    				var list = getrequest().list||"";
    				vurl = JSON.parse(list).vurl;
    				content = JSON.parse(list).content;
    				
    				mui.plusReady(function(res){
    					 var view = plus.webview.currentWebview();
    					 vurl = view.vurl||"";
    					 content = view.content||"";
    					 
    					 
    				})
    				console.log("vurl:"+vurl)
    				console.log("content:"+content)
    				g("skip").addEventListener("tap",function(e){
    					console.log("跳过")
    					mui.back();
    				})
    				
    				g("vcent").innerHTML = "更新内容："+content;
    				
    				g("updateVersion").addEventListener("tap",function(){
    					 	plus.io.resolveLocalFileSystemURL(vurl,function(entry){
    				            if(entry.isFile){
    				                mui.toast('已经下载');
    				                mui.alert(entry.fullPath);
    				               
    				            }
    				        },function(e){dBase();});
    				})
    			}
    			
    			    function dBase(){
    			        if(dtask){
    			            mui.toast('下载任务已经存在');
    			            if(flag){
    			            	 //解决下载完成，可以点击安装
    			            	plus.runtime.openFile(dtask.filename,{},function(err){  
                                	mui.alert('打开失败');  
                           	 	});
    			            }
    			              
    			            return;
    			        }
    			        dtask = plus.downloader.createDownload(
    			            vurl,{method:'GET'},function(d,status){
    			            mui.toast(d.filename);
    			        });
    			        dtask.addEventListener("statechanged",function(task,status){
    			            if(!dtask){return;}
    			            switch(task.state){
    			                case 1: 
    				                mui.toast('开始下载...');
    				                break;//开始
    			                case 2: 
    			                	mui.toast('链接到服务器...');
    			                	break;//链接到服务器
    			                case 3:
    			                //缩小单位
    			                var dsize = parseFloat(task.downloadedSize/1000000).toFixed(2);//下载进度
    			                var tsize = parseFloat(task.totalSize/1000000).toFixed(2);	//总大小
    			                    var progressval = parseInt((dsize/tsize)*100);
    			                        psb1.progressbar({progress:progressval}).show();
    			                        dstatus[0].innerHTML = dsize+'m/'+tsize+'m<span class="span">     <span>'+progressval+'%';
    			                    break;
    			                case 4: 
    				                mui.toast('下载完成');
    				                //下载完成 可以安装
    				                flag = true;
    				                plus.runtime.openFile(dtask.filename,{},function(err){  
    	                                mui.alert('打开失败');  
    	                            }); 
    	                            
    				                break;
    			            }
    			        });
    			        dtask.start();
    			    }
    			
    		</script>
    	</body>
    
    </html>

ok，如果需要在主页查看，可以在主页面直接调用是否新版本链接，如果有，就跳转到版本页

版本管理都可以通用，只要参数对就没问题。

提示一下，此方法只支持安卓的，因为ios需要特殊处理，才能下载，我自己也不会，所以没办法

如果感兴趣，也可以关注我的微信公众号，因为刚起步，所以只有几篇文章，之后会慢慢更新。

![20190314150402813.jpg][]

[20190315201126543.png]: /images/20220307/5871f2353ced4a7686f50746c7804f79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220307/132777265a18447993f2ae6d4184da4a.png
[20190314150402813.jpg]: /images/20220307/8210fc00143c44d6826dd7f8f1b329ad.png