H5+ app自動更新思路

時間 2019-11-09

標籤 h5 app 自動更新思路简体版

原文原文鏈接

第一種是一次自動更新css

1.在服務器須要一個json或html文件，json最好html

1 {
2     "state":"yes",//是否自動更新
3     "mark":"1.0.6",//版本號
4     "url":"http:\/\/xx\/appproject\/mm.apk"//更新的應用下載地址
5 }

2.自動更新函數html5

t是你當前正在運行的app的版本號ios

//檢查自動更新
function svn（t）{
    var xhr=new plus.net.XMLHttpRequest();
    xhr.onreadystatechange=function(){
         if(xhr.readyState==4)   {
            if(xhr.status==200){
                var res=JSON.parse(xhr.responseText);
                if(res.state=='yes'){
                    if(res.mark!=t){
                        var upr;
                        plus.nativeUI.confirm('有新版本發佈了，是否更新？',function(e){
                            upr=(e.index==0)?'Y':'N';
                            if(upr=='Y'){
                                var wt=plus.nativeUI.showWaiting('下載更新中，請勿關閉');
                                var url=res.url;//下載地址
                                var dtask=plus.downloader.createDownload(url,{},function(d,status){
                                     if(status==200){
                                         var path=d.filename;
                                         plus.runtime.install(path);
                                     }else{//下載失敗
                                         alert('Download failed:'+status);
                                     }
                                 });
                                 dtask.start();
                            }else {}
                        },'xx系統',['確認','取消']);
                    }else {
                        console.log('最新');
                    }
                }
            }else {
                plus.nativeUI.toast('網絡鏈接錯誤!');
            }
        }
    }      
    xhr.open('GET','http://xx/appproject/imes/update.json');//這裏的地址是上面的json地址
    xhr.send();
}

3.調用方法：在每次系統打開運行的時候執行上面的函數就好了web

svn(版本號);

轉載自http://www.bcty365.com/content-146-5156-1.htmljson

第二種是增量更新api

對於移動app，尤爲是webapp，如何更新一直是比較重要的話題。之前的大部分APP都是從應用商店進行版本更新，可是對於webapp來講，使用增量更新能夠節省流量；更重要的是，它免去了新版本在應用商店的審覈，使上架時間能夠更加提早。服務器

1、前提網絡

　　1.環境：使用H5+做爲webview與手機平臺交互的中間件；關於H5+，請自行參考http://www.html5plus.org/#homeapp

　　2.需求：點擊「檢查更新」，app在線檢查版本是否有更新，若是有，下載並更新：

　　3.更新包後綴名爲：.wgt，製做方式：使用zip打包全部項目根目錄下的html/js/css/images/manifest.json；其中：manifest.json不能有註釋，不然在ios下將會更新失敗；

2、實現

　　1.檢查更新按鈕：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" onclick="CheckUpdate(false);">檢查更新</a>
        <button class="mui-btn mui-btn-link mui-btn-block" id=Progress_burron" style="display:none;"></button>
    </li>
</ul>

　　2.update.js:

function CheckUpdate(auto){
    //API的get請求
    var checkUrl="http://app.com?appkey="+appkey+"&clientversion="+plus.runtime.version;
    var RequestResponse=new Object();
    RequestResponse.Success=function(Result){
        Unloading();
        var ResulteObject=JSON.parse(Result);
        if(ResultObject.apicode==0){//當api返回code爲0表示成功
            if(ResultObject.needUpdate){
                //MessageBox("須要更新",function(){
                    //MessageBox("下載包地址："+ResultObject.url,function(){
                        ConfirmBox("有新版本，是否更新？",function(){
                            document.getElementById("Progress_Button").style.cssText="display:block;";
                            UpdateKey=ResultObject.updatekey;
                            DownloadFile(ResultObject.url);
                            DownloadFile(serverHost+"/app/update.wgt");
                        },function(){
                            return;
                        });
                    //});
                //});
            }else {
                if(!auto){
                    MessageBox("不須要更新",function(){});
                }
            }
        }else {
            if(!auto){
                showError();
            }
        }
    }
    RequestResponse.Error=function(Result){
        Unloading();
        showError();
    }
    console.log(CheckUrl);
    //發送請求
    SendData(Checkrl,RequestResponse);//發送Post
}
//完成更新
function FinishUpdate(){
    //API的get請求地址
    var UpdateUrl="http://app.zimayan.com/Rest/finishUpdate?updatekey="+UpdateKey;
    UpdateUrl+="&model="+encodeURIComponent(GetDeviceInfo().Model);
    UpdateUrl+="&vendor="+encodeURIComponent(GetDeviceInfor().Vendor);
    Update+="&uuid=" + encodeURIComponent(GetDeviceInfo().UUID);
    UpdateUrl+="&screen=" + encodeURIComponent(GetDeviceInfo().Screen);
    UpdateUrl+="&dpi=" + encodeURIComponent(GetDeviceInfo().DPI);
    UpdateUrl+="&networkinfo=" + encodeURIComponent(GetDeviceInfo().NetworkInfo);
    UpdateUr+="&oslanguage=" + encodeURIComponent(GetDeviceInfo().OS.Language);
    UpdateUrl+="&osversion=" + encodeURIComponent(GetDeviceInfo().OS.Version);
    UpdateUrl+="&osname=" + encodeURIComponent(GetDeviceInfo().OS.Name);
    UpdateUrl+="&osvendor=" + encodeURIComponent(GetDeviceInfo().OS.Vendor);
    var RequestResponse=new Object();
    RequestResponse.Success=function(Result){
        var ResultObject=JSON.parse(Result);
        if(ResultObject.apicode==0){//當api返回code爲0表示成功
        }else {
            //showError();
        }
    }
    RequestResponse.Error=function(Result){}
        //發送請求
    SendDate(UpdateUrl,RequestResponse);//發送Post
}
//下載
function DownloadFile(url){
    var d = plus.downloader.createDownload(url, {}, function(f, s) {
    document.getElementById("Progress_Button").style.cssText = "display: none;";
    ConfirmBox("下載完成，是否當即更新", function() {
//        console.log(f.filename)
        /*
         * unzip the folder..
         */
//        plus.zip.decompress( f.filename, "_doc/", function(){alert("decompress success!")}, function(err){
//                alert(JSON.stringify(err));
//        });
        plus.runtime.install(f.filename, {force:true}, function() {
        //完成更新向服務器進行通知
        alert("更新完畢，將重啓應用！");
        FinishUpdate();
        plus.runtime.restart();
        },function(err){
        alert(JSON.stringify(err));
        mui.toast("安裝升級失敗");
        });
    }, function() {
        return;
    });
    }, function() {
    MessageBox("下載失敗", function() {});
    });
    d.addEventListener('statechanged', function(download, status) {
//    console.log(JSON.stringify(download));
    if (download.state == 3 && status == 200) {
        var percent = Math.round((download.downloadedSize / download.totalSize) * 100);
        document.getElementById("Progress_Button").innerHTML = (percent + "%");
    } else if (download.state == 4) {}
    }, false);
    d.start();
}
//確認消息
function ConfirmBox(MSG, OKFN, CancelFN) {
    plus.nativeUI.confirm(MSG, function(e) {
        if (e.index == 0) {
            OKFN();
        } else {
            CancelFN();
        }
    }, "提示", ["肯定", "取消"]);
}
//發送數據
function SendData(URL, ResponseObject) {
    var MyXMLHttpRequest = new plus.net.XMLHttpRequest();
    MyXMLHttpRequest.onreadystatechange = function() {
        switch (MyXMLHttpRequest.readyState) {
            case 0:
                break;
            case 1:
                break;
            case 2:
                break;
            case 3:
                break;
            case 4:
                if (MyXMLHttpRequest.status == 200) {
                    ResponseObject.Success(MyXMLHttpRequest.responseText);
                } else {
                    plus.nativeUI.toast("檢查更新出錯");
                }
                break;
        }
    }

    MyXMLHttpRequest.open("GET", URL);
    MyXMLHttpRequest.send();
}

//得到系統信息
function GetDeviceInfo() {
    var device = {
        IMEI: plus.device.imei,
        IMSI: "",
        Model: plus.device.model,
        Vendor: plus.device.vendor,
        UUID: plus.device.uuid,
        Screen: plus.screen.resolutionWidth * plus.screen.scale + " x " + plus.screen.resolutionHeight * plus.screen.scale + "",
        DPI: plus.screen.dpiX + " x " + plus.screen.dpiY,
        OS: new Object()
    };
    for (var i = 0; i < plus.device.imsi.length; i++) {
        device.IMSI += plus.device.imsi[i];
    }
    var types = {};
    types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
    types[plus.networkinfo.CONNECTION_NONE] = "未鏈接網絡";
    types[plus.networkinfo.CONNECTION_ETHERNET] = "有線網絡";
    types[plus.networkinfo.CONNECTION_WIFI] = "WiFi網絡";
    types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窩網絡";
    types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窩網絡";
    types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窩網絡";
    device.NetworkInfo = types[plus.networkinfo.getCurrentType()];
    device.OS = {
        Language: plus.os.language,
        Version: plus.os.version,
        Name: plus.os.name,
        Vendor: plus.os.vendor
    };
    return device;
}

其中，

plus.runtime.install(f.filename,{force:true},function(){}

這一行，{force:true}這個參數必不可少。這是因爲在安卓下目前還有一些bug，必須加上。

實現效果：當用戶點擊檢查更新，先檢查是否更新；若是須要更新，則下載自拍格式的.wgt文件，調用plus.runtime.install進行安裝，安裝成功後彈出成功，而後自動重啓應用。

轉載自：https://my.oschina.net/u/1866224/blog/382736

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。