寫這個博文的意義在於,做了一個使用純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.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){
plus.nativeUI.showWaiting("下載wgt文件...");
plus.downloader.createDownload( newVersion, {filename:"_doc/update/"}, function(d,status){
if ( status == 200 ) {
console.log("下載wgt成功："+d.filename);
plus.nativeUI.closeWaiting();
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,看看裏面的版本號是不是和服務端的最新的一致,如果不一致,修改一下:
