一、最近做了一個app自動更新功能，用的基本都是網上找得到的。

　　　　1、h5+ 規範 ：  http://www.html5plus.org/doc/zh_cn/maps.html

　　　　2、環形進度條外掛：http://www.jq22.com/jquery-info4495（不知道什麼原因，下載的時候，沒有顯示任何提示，所以人為加個下載的提示）

　　二、本來用的mui框架也有進度條提示，但是好單調，又不顯眼。

　　　　1、效果如下，雖然說超方便的。mui 樣式：http://dev.dcloud.net.cn/mui/ui/#progressbar，html這裡就不整理了，連結裡有。

　　　　2、右邊為 ‘環形進度條外掛’的效果

　　三、下面不多說，po上程式碼

　　　　1、html程式碼

　　　　　<!-- 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.1、環形進度條 js

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

　　　　2.2、自動更新 js

　　　　　　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');
                    }
                }

            }

 　　四、如果想做簡單點的，可以採用mui框架的進度條

　　　　1、將html部分改為

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

　　　　2、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')；
                    }
                }

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