H5+app -- 自動更新

時間 2019-11-16

標籤 h5+app 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安裝包？

相關標籤/搜索

每日一句

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