一、最近做了一個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安裝包?