一、參考資料
二、代碼
1. HTML代碼
<div class="mui-content"> <div class="mui-scroll"> <div class="login-img"> <img src="images/icon.png" width="20%" /> <p id="version">當前應用版本:</p> </div> </div> <ul class="mui-table-view check" id="check"> <li class="mui-table-view-cell"> <div class="updateProDiv">更新進度: <progress value="" max="" id="proDownFile"></progress> <span class="persent"></span> </div> <a href="#" id="update" class="mui-navigate-right">檢查更新</a> </li> </ul> </div>
2. CSS代碼
#version{margin-top:20px;font-size: 18px;} .check{margin-top: 58%;} .check li{padding: 16px 11px;} .check a{font-size: 20px;} .check p{font-size: 18px;margin-top: 5px;} progress {border-radius: 2px;border-left: 1px #ccc solid;border-right: 1px #ccc solid;border-top: 1px #aaa solid;background-color: #eee;} progress::-webkit-progress-bar {background-color: #d7d7d7;} progress::-webkit-progress-value {background-color: #aadd6a;} .updateProDiv {display: none;}3. JS代碼
<script src="js/jquery-1.8.3.min.js"></script> <script> var wgtVer=null; function plusReady(){ // 獲取本地應用資源版本號 plus.runtime.getProperty(plus.runtime.appid,function(inf){ wgtVer=inf.version; version.innerHTML = '當前應用版本：'+wgtVer; }); } if(window.plus){ plusReady(); }else{ document.addEventListener('plusready',plusReady,false); } var ver; //休眠方法 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } mui('.mui-table-view-cell').on('click', '#update', function() { plus.runtime.getProperty(plus.runtime.appid, function(inf) { ver = inf.version; console.log("當前應用版本：" + ver); var url= app.baseurl+'index.php/api/other/version'; var client; if(mui.os.ios) {client='ios';} else{client='android';} mui.ajax(url,{ data:{ version: ver, client:client }, dataType:'json', type:'POST', timeout:10000, success:function(data){ if(data.status==1){ var btnArray = ['是', '否']; mui.confirm('最新version是：' + data.version+',是否更新', '發現最新版本', btnArray, function(z) { if (z.index == 0) { console.log('確定'); $('.updateProDiv').css('display', 'block'); $('#update').css('display', 'none'); var dtask = plus.downloader.createDownload(data.url, {}, function(d, status) { if (status == 200) { clearInterval(i); $('.persent').html("100%"); plus.nativeUI.toast("正在准備環境，請稍后！"); sleep(1000); var path = d.filename;//_downloads yijietong.apk console.log(d.filename); $('#update').css('display', 'block'); $('.updateProDiv').css('display', 'none'); plus.runtime.install(path); // 安裝下載的apk文件 } else { alert('Download failed:' + status); } }); dtask.start(); var i = setInterval(function() { var totalSize = dtask.totalSize; var downloadedSize = dtask.downloadedSize; $('#proDownFile').attr('value', downloadedSize); $('#proDownFile').attr('max', totalSize); console.log(dtask.downloadedSize); console.log(dtask.totalSize); }, 100); //1000為1秒鍾 } else { console.log('不確定'); return; } }); } else{ alert(data.message); } }, error: function(xhr, type, errerThrown) { mui.toast('網絡異常,請稍候再試'); } }); }); }); </script>3. 接口代碼
public function version(){ $data = $_POST; $m_version=M('versions'); $ret=$m_version->find(); if($ret['version']==$data['version']){ $this->ajaxReturn(array('status'=>0,'message'=>'當前版本已經是最新版！')); } else { $ret_data['status']=1; $ret_data['version']=$ret['version']; if($data['client']=='android'){ $ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true); } else{ $ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true);} $this->ajaxReturn($ret_data); } }