我們的手機軟體每天都要經營,經常需要更新,比如程式的Bug,好的功能,好的潔面... ... 這就需要我們的使用者開啟web app時候自動更新客戶端程式,而不是再去應用程式商店從新下載。今天的筆記就是完成這項工作。
一、伺服器端
伺服器很簡單,只存放一個json文件,這個文件你可以用伺服器端語言生成,也可以直接建立一個.json檔案就可了,資料格式如下。[{"VisonID":"1.0.0","downURI":"http://yuanziyu.com/down/yzsc.apk"}]
VisonID表示web APP版本號,downURI表示安裝檔案url
二、客戶端
為了提高使用者使用感受,首先提示進行更新檢查。
var showLoading = plus.nativeUI.showWaiting("檢查更新...");
獲取當前web APP版本號:plus.runtime.getProperty(plus.runtime.appid, function(inf) {inf.version}。其中inf.version表示web APP版本號。
版本版本筆記如果,伺服器端版本號高於客戶端版本號,對web APP 進行更新,版本號等於或小於不進行更新。
//版本比較o表示客戶端版本號,n表示伺服器端版本號。 function checkvison(o, n) { var tempo = o.split('.'); var tempn = n.split('.'); if ((tempo[0] * 100 + tempo[1] * 10 + tempo[2] * 1) < (tempn[0] * 100 + tempn[1] * 10 + tempn[2] * 1)) { return true; } else { return false; } }
(一)獲取服務端資料。
通過mui.ajax獲取伺服器端JSON檔案。其中引數 Date.parse( new Date())是獲取時間戳,防止伺服器端快取,目地主要是為了除錯用,如果正式釋出可以刪除,因為我們跟新速度沒有那麼快。mui.ajax方法介紹:
mui.ajax(url,{//url表示服務地址 data:{},表示向伺服器提交的資料 dataType:'json',//伺服器返回json格式資料 type:'post',//HTTP請求型別 async: false,//表示是否非同步 timeout:10000,//超時時間設定為10秒; success:function(json){ }, error:function(xhr,type,errorThrown){ //異常處理; mui.alert('網路延時,請重新載入!', '系統提示'); } });
(二)下載網路檔案。
我們更新檔案或者是APP我們必須先從網路下載檔案,然後更新APP軟體。下載網路檔案我們主要用到的是這個方法html5+中Downloader物件。Downloader物件是模組管理檔案下載,用於從網路下載各種檔案,可支援跨域訪問操作。我們主要用到以下幾個方法
1.createDownload方法,表示新建下載任務。
Download plus.downloader.createDownload( url, option, completedCB );
說明:表示請求下載管理建立新的下載任務,建立成功則返回Download物件,用於管理下載任務的各種狀態。
引數:url (DOMString) 可選 要下載檔案的url地址,僅支援網路資源地址。必須是http或https協議;option (DownloadOption) 可選 可通過此引數設定自定義任務屬性,自定義屬性值僅支援字串型別;completedCB (DownloadCompletedCallback) 可選 下載任務完成後的回撥。
2.start 表示開始下載任務
void download.start();
說明:
開始下載任務,如果任務已經處於開始狀態則無任何響應。 通常在建立任務或暫停任務後重新開始。
3.Downloader中的DownloadStateChangedCallback回撥,表示下載任務完成時的回撥
vaoid onCompleted( Download download, Number status ) {
// Download file complete code
}
說明:下載任務完成時的回撥函式,在下載任務完成時呼叫。 下載任務失敗也將觸發此回撥。
引數:download (Download) 可選 下載任務物件,這裡面我們經常用到的一個屬性filename,DOMString,只讀屬性,下載任務在本地儲存的檔案路徑,在DownloadCompleteCallback事件和DownloadStateChangedCallback事件觸發時更新。還有很多其它屬性我就不記錄了,用到的時候在翻手冊吧。status (Number) 可選 Http傳輸協議狀態碼,如果未獲取傳輸狀態則其值則為0,如下載成功其值通常為200
4.Downloader中的DownloadStateChangedCallback回撥,表示下載任務狀態變化回撥,我們主要用於顯示下載進度。
void onStateChanged( Download download, status ) {
// Download state changed code.
}
說明:下載任務狀態變化回撥。
引數:同DownloadStateChangedCallback。
Ok,我們用到的主要物件和方法基本介紹完了,然後我們看一下完整程式碼:
function UpdateVison() { var showLoading = plus.nativeUI.showWaiting("檢查更新..."); // 獲取本地應用資源版本號 plus.runtime.getProperty(plus.runtime.appid, function(inf) { mui.ajax('http://123.58.4.202:8010/vison.json?r='+ Date.parse( new Date()), { data: {}, //dataType:'json',//伺服器返回json格式資料 type: 'get', //HTTP請求型別 timeout: 10000, //超時時間設定為10秒; headers: { 'Content-Type': 'application/json' }, success: function(jsondata) { var data2 = JSON.parse(jsondata); if (checkvison(inf.version, data2[0].VisonID)) { wgtUrl = data2[0].downURI; var downToaknew = plus.downloader.createDownload(wgtUrl, { filename: "_doc/update/" }, function(d, status) { //alert(d) if (status == 200) { installApp(d.filename); } else { showLoading.setTitle("下載失敗") } }); downToaknew.start(); // 開啟下載的任務 var prg = 0; downToaknew.addEventListener("statechanged", function(task, status) { //給下載任務設定一個監聽 並根據狀態 做操作 switch (task.state) { case 1: showLoading.setTitle("正在下載"); break; case 2: showLoading.setTitle("已連線到伺服器"); break; case 3: prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) * 100); if (prg % 1 == 0) { // 讓百分比 10% 增長,如果這裡不這麼處理 出現 堆疊記憶體溢位的問題,有知道原因的大神指導一下哈 showLoading.setTitle("已下載" + prg + "%"); } } }); } else{ plus.nativeUI.closeWaiting(); } }, error: function(xhr, type, errorThrown) { //異常處理; console.log(type); } }); }); } function checkvison(o, n) { var tempo = o.split('.'); var tempn = n.split('.'); if ((tempo[0] * 100 + tempo[1] * 10 + tempo[2] * 1) < (tempn[0] * 100 + tempn[1] * 10 + tempn[2] * 1)) { return true; } else { return false; } } function installApp(path) { plus.nativeUI.showWaiting("安裝檔案..."); plus.runtime.install(path, { force: false }, function() { plus.nativeUI.closeWaiting(); console.log("安裝檔案成功!"); plus.nativeUI.alert("應用資源更新完成!", function() { plus.runtime.restart(); }); }, function(e) { plus.nativeUI.closeWaiting(); console.log("安裝檔案失敗[" + e.code + "]:" + e.message); plus.nativeUI.alert("安裝檔案失敗[" + e.code + "]:" + e.message); }); }
好了,我們的Web APP自動更新程式碼就大功告成了,留作備用。