版本管理_html ${version}-优快云博客

本文链接：https://blog.youkuaiyun.com/gaoduicai/article/details/82943022

本文介绍了一个智慧付油系统的版本检查与自动更新机制，通过与服务器交互获取最新版本信息，实现安卓设备上的无缝更新。文章详细展示了前端代码如何调用后端接口，获取应用程序版本详情，并在检测到新版本时提示用户进行下载和安装。

前

<!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>
		<script src="js/server.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/echart_theme.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<script>
			mui.init();
			var icon = server_address.substring(0, 33)

			function AutoScroll(obj) {
				$(obj).find("ul:first").animate({
					marginTop: "-45px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				});
			}
			setInterval('AutoScroll("#scrollDiv")', 5000);
			$(function() {
				var login_name = localStorage.getItem("loginname");
				var rdata = {
					"login_name": login_name
				}
				fun_server.actionAjax("/getMenuByLoginName", rdata, loginSuccess, loginFailure);

				function loginSuccess(data) {
					if(data != null && data != "") {
						var htmlstring = '<div class="mui-table-view" >'
						var datalist = data.data;
						for(var i = 0; i < datalist.length; i++) {
							htmlstring += '<div class="mui-card"><div class="mui-card-header">' + datalist[i].first.menuName + '</div></div>'
							htmlstring += '<div class="mui-card-content"><ul class="home-item">'
							for(var j = 0; j < datalist[i].childMenus.length; j++) {
								var icon_i = datalist[i].childMenus[j].icon;
								htmlstring += '<li><a href="' + datalist[i].childMenus[j].path + '"><span class="' + icon_i + '"></span>' + datalist[i].childMenus[j].menuName + '</a></li>'
							}
							htmlstring += '</div> '
							document.getElementById("begin").innerHTML = htmlstring
						}
					}
				}

				function loginFailure(data) {
					mui.alert("fail");
				}
				var loginname = localStorage.getItem("loginname");
				if(loginname == '' || loginname == 'undefined') {
					mui.toast("用户未登录，返回重新登录！", {
						duration: 'long',
						type: 'div'
					});
					//返回登录页面
					setTimeout(function() {
						mui.openWindow({
							url: "login.html"
						});
					}, 1000);
				} else {
					checkUpdate_wgt();
				}
			});

			function checkUpdate_wgt() {
				mui.plusReady(function() {
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						version = inf.version;
						$("#versionSpan").html(version);
						//alert(version);
						//alert(file_address + "login/appVersion");
						if(mui.os.android) { //如果是android系统，开始更新
							mui.ajax(server_address + "/getVersionByNo?app_no=" + app_no + " ", {
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 60000, //超时时间设置为10秒；
								success: function(res) {
									var obj = JSON.parse(res.data);
									var serverVersion = obj.app_version;
									if(version != serverVersion) {
										//有新版本,如果是android系统
										mui.confirm('<p style="text-align: left;">检测到有新版本' + serverVersion + '发布,</br>当前版本' + version + ',更新内容：</br></p><p style="text-align: left;">' + obj.remarks + '</p>是否更新?', '提示', ['取消', '确认'], function(e) {
											if(e.index == 1) {
												var uri = file_address + obj.app_download_url;
												plus.nativeUI.showWaiting("正在下载...");
												//		alert(res.path_app)
												downWgt_wgt(uri);
											}
										}, 'div')
										//} else if(mui.os.ios) {
										//ios 需要跳转到AppStore更新
										// 应用在appstore的地址
										//plus.runtime.openURL(url);
										//}
									}
								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									alert(type + "-----------" + errorThrown + "----ajaxerrorfun" + xhr + "----------------");
								}
							});
						}
					});

					function downWgt_wgt(url) {
						var wgtWaiting = plus.nativeUI.showWaiting("下载文件...");
						var dtask = plus.downloader.createDownload(url, {
							method: "GET"
						}, function(d, status) {
							//console.log(status);
							if(status == 200) {
								installWgt(d.filename);
							} else {
								mui.alert("下载失败: " + status);
							}
							wgtWaiting.close();
						});
						dtask.addEventListener('statechanged', function(d, status) {
							//console.log("statechanged: "+d.state);
							switch(d.state) {
								case 2:
									wgtWaiting.setTitle("正在下载");
									break;
								case 3:
									setTimeout(function() {
										var percent = d.downloadedSize / download.totalSize * 100;
										wgtWaiting.setTitle("已下载 " + parseInt(percent) + "%");
									}, 0);
									break;
								case 4:
									wgtWaiting.setTitle("下载完成");
									break;
							}

						});
						dtask.start();
					}

					// 更新应用资源
					function installWgt(path) {
						plus.nativeUI.showWaiting("安装wgt文件...");
						plus.runtime.install(path, {}, function() {
							plus.nativeUI.closeWaiting();
							console.log("安装wgt文件成功！");
							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);
						});
					}

				})

			}
		</script>
	</head>

	<body>
		<div class="pageloader"></div>
		<header class="mui-bar mui-bar-nav">
			<a href="login.html" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav" style="text-align: right;"></span>返回
			</a>
			<h1 class="mui-title">智慧付油</h1>
		</header>
		<div class="mui-content" style="padding-bottom: 0px;">

			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="Themes/images/slider/01.png">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="Themes/images/slider/01.png">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="Themes/images/slider/01.png">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="Themes/images/slider/01.png">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="Themes/images/slider/01.png">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div id="begin">
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a "mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-active" href="uploadtest.html">
				<span class="mui-icon mui-icon-location"></span>
				<span class="mui-tab-label">测试</span>
			</a>
			<a class="mui-active" href="admin.html">
				<span class="mui-icon mui-icon-location"></span>
				<span class="mui-tab-label">个人</span>
			</a>
			<a class="mui-active" href="#">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">待定</span>
			</a>
		</nav>
	</body>
	<script>
	</script>

</html>

后

package cn.sn.exInterface.common;

import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.sn.dadao.modules.znyk.entity.ba.BaAppVersion;
import cn.sn.dadao.modules.znyk.service.ba.BaAppVersionService;

/**
 * 获取版本信息Controller
 * 
 * @author zxn
 * @version 2018-10-04
 */
@Controller
public class VesionController {
	@Autowired
	private BaAppVersionService baAppVersionService;

	/**
	 * 根据自助终端标识获取入库须知
	 * 
	 * @param
	 * 
	 */
	@RequestMapping(value = "${frontPath}/getVersionByNo")
	@ResponseBody
	public String getIntoExplain(@RequestParam(required = false) String app_no) {
		String returnStr = "";
		if (app_no == null || app_no.length() == 0) {
			returnStr = Constant.returnFail("app编号为空！");
		} else {
			BaAppVersion appVersion = baAppVersionService.getVersionByNo(app_no);
			if (appVersion == null) {
				returnStr = Constant.returnFail("app编号未在系统中注册！");
			} else {
				JSONObject jsonObject = new JSONObject();
				jsonObject.put("app_name", appVersion.getAppName());
				jsonObject.put("app_version", appVersion.getAppVersion());
				jsonObject.put("app_update_date ", appVersion.getAppUpdateDate());
				jsonObject.put("app_download_url", appVersion.getAppDownlondUrl());
				jsonObject.put("remarks", appVersion.getRemarks());
				returnStr = Constant.returnSuccess(jsonObject.toString());
			}
		}
		return returnStr;
	}
}