H5+app -- 自動更新

  1、最近作了一個app自動更新功能,用的基本都是網上找獲得的。javascript

    一、h5+ 規範 :  http://www.html5plus.org/doc/zh_cn/maps.htmlcss

    二、環形進度條插件:http://www.jq22.com/jquery-info4495(不知道什麼緣由,下載的時候,沒有顯示任何提示,因此人爲加個下載的提示)html

  2、原本用的mui框架也有進度條提示,可是好單調,又不顯眼。html5

    一、效果以下,雖說超方便的。mui 樣式:http://dev.dcloud.net.cn/mui/ui/#progressbar,html這裏就不整理了,連接裏有。java

    二、右邊爲 ‘環形進度條插件’的效果jquery

    

 

  3、下面很少說,po上代碼android

    一、html代碼ajax

     <!-- lyj 圓形插件 -->
        <link href="css/progressbar-css/base.css" rel="stylesheet" type="text/css" />
        <link href="css/progressbar-css/project_base.css" rel="stylesheet" type="text/css" />
        <link href="css/progressbar-css/radialindicator.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .htmleaf-icon {
                color: #fff;
            }
            .showOrHidden {
                display: none;   /*未進行下載更新前隱藏*/
            }
        </style>
        <!-- 圓形進度條插件 -->
     
    
     <!-- html -->      <h3 id="download-title" class="showOrHidden" style="float: left; position: absolute; top: 55%; left: 33%; color: green;">App下載中...</h3> <div class="prg-cont rad-prg showOrHidden" id="indicatorContainer" style="float: left; position: absolute; top: 66%; left: 33%;"></div> 

  <!-- html -->
     <script src="js/mui.js"></script>
        <script src="js/jquery.min.js"></script>
        <!-- lyj 圓形插件 -->
        <script type="text/javascript" src="js/progressbar/base.js"></script>
        <script type="text/javascript" src="js/progressbar/project_base.js"></script>
        <script>
            SyntaxHighlighter.defaults['toolbar'] = false;
            SyntaxHighlighter.all();
        </script>
        <script src="js/progressbar/radialindicator.js"></script>

    2.一、環形進度條 js數據庫

       var appTotalSize; //將要下載的app的大小
            $('#indicatorContainer').radialIndicator({
                        barColor: '#FFA500',  //顏色,16進制
                        barWidth: 10,      //寬度
                        initValue: 0,         //初始值
                        roundCorner: true,
                        percentage: true
                    });
       //動態set值
var radialObj = $('#indicatorContainer').data('radialIndicator');

    2.二、自動更新 jsjson

      function updateApp() {

                plus.runtime.getProperty(plus.runtime.appid, function(inf) {
                    //獲取app的版本信息
                    var ver = inf.version;
                    //接口地址
                    var url = $config.IP + '【你請求接口的地址】';
                    var ua = navigator.userAgent.toLowerCase(); //判斷瀏覽器類型
                    if(/iphone|ipad|ipod/.test(ua)) { //蘋果(暫無)            
                        $.ajax({
                            type: "get",
                            dataType: 'json',
                            url: "https://itunes.apple.com/lookup?id=111030274", //獲取當前上架APPStore版本信息
                            data: {
                                id: 111030274 //APP惟一標識ID
                            },
                            contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                            success: function(data) {
                                console.log("jsjsjsjs" + json2string(data));
                                $.each(data, function(i, norms) {
                                    $.each(norms, function(key, value) {
                                        $.each(value, function(j, normItem) {
                                            if(j == "version") {
                                                if(normItem > ver) {
                                                    alert("發現新版本:V" + normItem);
                                                    document.location.href = 'https://itunes.apple.com/cn/app/san-gu-hui/id111030274?mt=8'; //上新APPStore下載地址
                                                }
                                            }
                                        });
                                    });
                                });
                                return;
                            }
                        });
                    } else if(/android/.test(ua)) {
                        //獲取遠程數據庫中上新andriod版本號
                        mui.ajax(url, {
                            data: {
                                apkVersion: ver,
                            },
                            dataType: 'json',
                            type: 'GET',
                            timeout: 6000,
                            success: function(data) {
                                //比較版本信息
                                if(data.map.appVersion != ver) {
                                    var btnArray = ['暫不更新', '當即更新'];
                                    mui.confirm("發現新版本:V" + data.map.appVersion + ",是否當即更新安裝?", '發現新版本', btnArray, function(e) {
                                        if(e.index == 1) {
                                            //顯示環形進度條
                                            $('#indicatorContainer').removeClass('showOrHidden');
                                            $('#download-title').removeClass('showOrHidden');
                                            //返回的app總大小
                                            appTotalSize = data.map.totalSize;
                                            mui.toast('版本更新中...');
                                            //建立更新
                                            var dtask = plus.downloader.createDownload(【下載app的地址的目錄】, {
                                                method: "POST",
                                                data: data.map.fileName,  //要下載的apk文件名
                                            }, function(d, status) {
                                                if(status == 200) {
                                                    sleep(300);
                                                    var path = d.filename; //下載apk
//                                                    console.log(path);
                                                    plus.runtime.install(path); // 自動安裝apk文件
                                                } else {
                                                    alert('版本更新失敗:' + status);
                                                }
                                            });
                                            //爲下載添加監聽事件
                                            dtask.addEventListener("statechanged", onStateChanged, true);
                                            //爲下載添加請求頭
                                            dtask.setRequestHeader('Content-Type', 'application/json'); // 設置POST請求提交的數據類型爲JSON字符串
                                            dtask.start();
                                        }
                                    });
                                } else {
                                    console.log('當前版本號已經是最新');
                                    return;
                                }
                            },
                            error: function(xhr, type, errerThrown) {
                                //mui.toast('網絡異常,請稍候再試');
                            }
                        });
                    }
                });

                function onStateChanged(download, status) {
                    var i = download.downloadedSize;
                    //換算成百分比
                    i *= 100 / appTotalSize;  
                    radialObj.animate(i);    //顯示部分的不足,就是網速差的狀況會出現進度條的數值與實際有差異,網速差,怪我咯。
                    if(download.state == 4 && status == 200) {
                        // 下載完成 
                        $('#indicatorContainer').addClass('showOrHidden');
                        $('#download-title').addClass('showOrHidden');
                    }
                }

            }

   4、若是想作簡單點的,能夠採用mui框架的進度條

    一、將html部分改成

<div id="progressbar" class="mui-progressbar showOrHidden" >
    <span></span>
</div>

    二、js的 onStateChanged 方法修改  

$('#progressbar').removeClass('showOrHidden');
function onStateChanged(download, status) { var i = download.downloadedSize; //換算成百分比
                    i *= 100 / appTotalSize; mui('body').progressbar({ progress: i }).show(); radialObj.animate(i); if(download.state == 4 && status == 200) { // 下載完成 
                      $('#progressbar').addClass('showOrHidden'); } }

  5、最後,我不知道怎麼處理安裝後的apk安裝包,有沒有大神告知,如何處理安裝完後的apk安裝包?

相關文章
相關標籤/搜索