H5+ app自动更新思路

第一种是一次自动更新

1.在服务器需要一个json或html文件，json最好

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

2.自动更新函数

t是你当前正在运行的app的版本号

//检查自动更新
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.调用方法：在每次系统打开运行的时候执行上面的函数就行了

svn(版本号);

转载自http://www.bcty365.com/content-146-5156-1.html

第二种是增量更新

对于移动app，尤其是webapp，如何更新一直是比较重要的话题。以前的大部分APP都是从应用商店进行版本更新，但是对于webapp来说，使用增量更新可以节省流量；更重要的是，它免去了新版本在应用商店的审核，使上架时间可以更加提前。

一、前提

　　1.环境：使用H5+作为webview与手机平台交互的中间件；关于H5+，请自行参考http://www.html5plus.org/#home

　　2.需求：点击“检查更新”，app在线检查版本是否有更新，如果有，下载并更新：

　　3.更新包后缀名为：.wgt，制作方式：使用zip打包所有项目根目录下的html/js/css/images/manifest.json；其中：manifest.json不能有注释，否则在ios下将会更新失败；

二、实现

　　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

时间： 2024-10-07 06:00:04

H5+ app自动更新思路的相关文章

高逼格，超简单，实现App自动更新，一个方法搞定

前言 前段时间写了一个篇APP自动更新下载的文章自动更新,一个方法搞定,使用系统的DownloadManager 方法超简洁的实现了apk的下载,不过有好多网友反映有一些机型上面这个方法无法实现下载,经过小编的实验在部分机型上确实会有这个问题,所以其中下载的部分只能通过其它方法搞定了.正好看到网上好多关于使用Retrofit实现下载并且监听进度的文章,并且我一直在看Retrofit的东西但是一直没有机会用到,所以我正好拿这个练练手,最终我使用Retrofit + OkHttp + RxBus +

简单实现安卓app自动更新功能

一般的安卓app都有自动更新功能,实现app的更新,以让用户体验新版本的功能,这里也是项目中用到的,今天就来总结一下,代码应该有点多,还请耐心点哈. 安卓应用实现自动更新比较简单,这里跟大家介绍下: 第一步 服务器端: 服务端提供一个借口,或者网址,我这里就用的服务器是tomcat,这里提供一个网址如下: //也就是一个json数据接口 public static final String UPDATE_URL = "http://192.168.1.103:8080/update.json&q

Android 云服务器的搭建和友盟APP自动更新功能的实现

setContentView(R.layout.activity_splash); //Bmob SDK初始化--只需要这一段代码即可完成初始化 //请到Bmob官网(http://www.bmob.cn/)申请ApplicationId,具体地址:http://docs.bmob.cn/android/faststart/index.html?menukey=fast_start&key=start_android Bmob.initialize(this, Constant.BMOB_APP

Retrofit2实现App自动更新

原理 Retrofit2和okhttp实现了apk的下载 自定义类实现Retrofit2的Callback类在里面通过IO流写入文件并且使用RxBus订阅下载进度 自定义类实现okhttp3的ResponseBody类并且在里面使用RxBus发布下载进度信息 在Service中使用Retrofit在后台下载文件 发送Notifaction到通知栏前台界面展示进度情况 实现步骤 1.创建UpdateManger管理类 这个类主要写了两个管理更新和弹框的方法. /** - 检测软件更新 */ pub

Android实现APP自动更新功能

现在一般的android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.该小程序实现的就是这个功能. 该小程序的特点是,当有更新时,会弹出一个提示框,点击确定,则在通知来创建一个进度条进行下载,点击取消,则取消更新. 以下是详细代码: 1.创建布局文件notification_item.xml,用于在通知栏生成一个进度条和下载图标. <?xml version="1.0" encoding="utf-8"?>

产品自动连接服务器端更新思路

产品自动更新思路 1.  (用户)用户启动RAW 2.  (系统)连接服务器端,发送当前版本号 3.  (服务器端)检测数据,为最新版则返回1,反之则进行如下处理: 服务器端版本是以以下格式存储的(举个例子): ID Version Date Con 1 1.0 2015-1-1 2 1.1 2015-1-5 Index.php 3 1.2 2015-2-5 Index.php|O/inc.php 比如当前的最新版本是1.2,用户传来的版本是1.0 处理: 获取1.0对应的ID号 获取最新版本的

[经验分享]如何让你的网站每天自动更新

相信很多刚刚做网站的站长朋友都有这样的感慨,每天更新网站真的是太累人了.想要提高自己网站的权重就得做到网站每天有更新,又不能一下子就把好几天的文章都给更新了,因为这在搜索引擎看来还是当天发布的,对网站的权重没有任何的作用,有没有什么办法可以让网站做到自动更新呢? 大家知道经常更新对于网站的重要性,搜索引擎喜欢新鲜的内容,如果你的站长期不更新,轻则排名下降,重则被k.好了,闲话少说,下面介绍下网站自动更新思路. 一,老站 这里说的老站不仅是指建站时间长的网站,这样的站不仅有了一定权重,网站也有一定

【Android】Android程序自动更新

App自动更新的步骤可分为三步: 检查更新(如果有更新进行第2步,否则返回) 下载新版的APK安装包 安装APK 下面对这三步进行解释,其中会穿插相应代码,App自动更新的这三步全部被封装到了一个单独的Updater类中,可以直接拿来使用,我会在文章最后贴出源码github地址. Updater 使用示例 通过单一的类Updater可以方便的实现自动检查更新.下载安装包和自动安装,可以监听下载进度,可以自定义更新提示等.保存路径可以自由书写,如果路径中某个目录不存在会自动创建,流式API接口易于

【原创】我所理解的自动更新-APP发布与后台发布

发布后台 创建渠道:添加新的渠道,设置渠道名称,自动生成渠道id.    查看渠道:查看渠道基本信息,渠道app版本号,资源版本号,是否开启更新.    创建/更新APP:选择打包ios,android版本,设置渠道所属,设置版本日志,发送消息到APP Publish并等待反馈.    创建/更新资源:设置渠道所属,设置版本日志,发送消息到ResPackageTool并等待反馈. APP打包发布 从VersionServer里获取相应渠道的代码,保存到目录[channel-渠道号-版本号].