写这个博文的意义在于,做了一个使用纯h5网页的东西,然后想用hbuilder在外面包一层,这样就能android和ios都能同时使用,hbuilder打包发布的工具,自认为还是做得比较完善的.后面成功的发布了一个android版本之后,有一个问题就是不能每次我修改了一点文字,就要重新发布app或者发邮件给客户吧,这样当然是不现实的,好在Hbuilder提供了"制作移动App资源升级包"功能,如下:
以下是详细过程:
1.前端部分的代码:重点来了,这个更新的包,需要放在后台服务里面,然后从旧的版本号和保存在服务器上最新的版本号进行对比,如果不一致或者比较大小,就需要从服务端后台下载最新的wgt更新包到android手机端,使用hbuilder官方提供的代码进行比较和更新,我修改了一下代码,主要是获取最新更新包的文件访问路径,代码如下:
<script>
UI.start();
var wgtVer=null;
function plusReady(){
// ......
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid,function(inf){
wgtVer=inf.version;
console.log("当前应用版本："+wgtVer);
//从服务器获取最新版本
checkUpdate();
});
}
if(window.plus){
console.log("浏览器无法执行这段代码");
plusReady();
}else{
console .log("浏览器无法执行这段代码111");
document.addEventListener('plusready',plusReady,false);
}
// 检测更新
var checkUrl="http://192.168.40.55:8080/OPT_M/userAdmin/getVersion";
function checkUpdate(){
plus.nativeUI.showWaiting("检测更新...");
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
plus.nativeUI.closeWaiting();
if(xhr.status==200){
console.log("检测更新成功,获取到的版本号为:"+xhr.responseText);
var newVer=xhr.responseText;
if(wgtVer&&newVer&&(wgtVer!=newVer)){
console.log("获取资源文件路径");
getdownPath();
}else{
plus.nativeUI.alert("无新版本可更新！");
}
}else{
console.log("检测更新失败！");
plus.nativeUI.alert("检测更新失败！");
}
break;
default:
break;
}
}
xhr.timeout=5000;//超过5秒连接不上则断掉
xhr.open('POST',checkUrl);
xhr.send();
}
//获取资源文件路径,其实就是将wgt文件放在tomcat的download文件夹下面,将这个绝对路径返回给前端,这样让前端直接进行下载,就ok了.
var new_version="";
var wgtUrlPath="http://192.168.40.55:8080/OPT_M/userAdmin/downloadPath";
function getdownPath(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
//plus.nativeUI.closeWaiting();
if(xhr.status==200){
console.log("获取下载路径成功");
new_version=xhr.responseText;
downWgt(new_version); // 下载升级包
}else{
console.log("下载失败！");
plus.nativeUI.alert("下载失败！");
}
break;
default:
break;
}
}
xhr.open('GET',wgtUrlPath);
xhr.send();
}
//var wgtUrl="http://192.168.40.55:8080/OPT_M/userAdmin/downloadEntity";
// 下载wgt文件
function downWgt(newVersion){
// 弹出对话框,询问是否更新最新版本,2018年10月22日11:21:25
plus.nativeUI.confirm("应用有新版本，是否立即下载更新？", function(event) {
if(event.index == 1) {
plus.nativeUI.showWaiting("下载最新文件中,请稍候...");
plus.downloader.createDownload( newVersion, {filename:"_doc/update/"}, function(d,status){
if ( status == 200 ) {
plus.nativeUI.closeWaiting();
console.log("下载wgt成功："+d.filename);
//alert("下载成功,文件名为:"+d.filename);
installWgt(d.filename); // 安装wgt包
} else {
console.log("下载wgt失败！");
plus.nativeUI.alert("下载wgt失败！");
}
}).start();
}
}, '提示', ['取消', '确认']);
}
// 更新应用资源
function installWgt(path){
plus.nativeUI.showWaiting("安装wgt文件...");
plus.runtime.install(path,{force: true},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> 特别注意:很多人都在官网评论这个获取最新的更新wgt包的,后台代码怎么写,其实就是将更新包放在前端能直接访问的地方就行,我使用的方式就是String returnFileExcelPath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + request.getContextPath() + "/" + "download/new.wgt";:
获取资源文件路径,其实就是将wgt文件放在tomcat的download文件夹下面,将这个绝对路径返回给前端,这样让前端直接进行下载,就ok了.我后台服务的tomcat截图:
2.后台获取最新版本和返回更新的wgt包的部分代码如下:
@RequestMapping(value = "userAdmin/getVersion", method = RequestMethod.POST)
@ResponseBody
@SystemLog(apiPath = "userAdmin/getVersion")
@ApiOperation(value = "获取版本号", httpMethod = "POST", notes = "获取版本号")
public String getVersion(HttpServletRequest request,HttpSession session) {
String url="";
try {
url = PropertiesUtil.GetValueByKey(Constants.SYSTEM_PROPERTIES, Constants.VERSION);
} catch (IOException e) {
e.printStackTrace();
}
return url;
}
//返回tomcat下的download文件夹里面的要更新的文件路径
@RequestMapping(value="userAdmin/downloadPath", method = RequestMethod.GET)
@ResponseBody
@SystemLog(apiPath = "userAdmin/downloadPath")
@ApiOperation(value = "下载文件", httpMethod = "GET", notes = "下载文件")
public String downloadPath(HttpServletRequest request) throws Exception{
String returnFileExcelPath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + request.getContextPath() + "/" + "download/new.wgt";
return returnFileExcelPath;
}以上就是前端和后端的代码,已经试验过,可以进行更新,我走过一个弯路就是,以前从后台服务下载wgt,是要返回byte再在前端转成wgt,其实只需要返回服务端后台的这个wgt的文件路径,让前端能够访问到就可以了
.注意你打更新包wgt的时候,一定不要忘了mainfest.json,将版本号修改成最新的,我就是被这个坑了,忘记修改了.
放福利了:后台的在线更新springmvc完整工程,已经提供下载,链接如下:springmvc后台在线更新android的完整工程代码
//***************************分割线**************************
之后测试发现一个问题,虽然从服务端拉取了最新的增量更新包,却发现更新之后获取到的手机版本号还是老的,导致每次进去都会更新.
解决方案: 被自己蠢哭了,原来是打升级包的时候,版本号没有修改成最新的:
记住:你打升级包,记得改一下manifest.json文件里面的版本号为最新的,否则更新时,还是显示1.0的版本
你可以解压自己的升级包wgt,看看里面的版本号是不是和服务端的最新的一致,如果不一致,修改一下:
*********************************分割线,2018年10月22日11:28:00************************************
之前的代码没有考虑连接后台更新服务,如果没网的时候,要设置一个超时连接,增加xhr.timeout=5000,5秒之后连接不上,则将窗口隐藏.而且还有一种情况,连接上,获取到最新的版本,需要下载最新的new.wgt的时候,如果客户的手机网络很慢很慢的时候,就会一直卡在下载的界面上,这是无法忍受,后来增加了是否更新的窗口,让用户在网络好的时候,再决定更新:
// 下载wgt文件
function downWgt(newVersion){
// 弹出对话框,询问是否更新最新版本,2018年10月22日11:21:25
plus.nativeUI.confirm("应用有新版本，是否立即下载更新？", function(event) {
if(event.index == 1) {
plus.nativeUI.showWaiting("下载最新文件中,请稍候...");
plus.downloader.createDownload( newVersion, {filename:"_doc/update/"}, function(d,status){
if ( status == 200 ) {
plus.nativeUI.closeWaiting();
console.log("下载wgt成功："+d.filename);
//alert("下载成功,文件名为:"+d.filename);
installWgt(d.filename); // 安装wgt包
} else {
console.log("下载wgt失败！");
plus.nativeUI.alert("下载wgt失败！");
}
}).start();
}
}, '提示', ['取消', '确认']);
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
