阿里前端工程師——細談WEB APP自動更新,網友兩個字:優秀!

我們的手機軟件每天都要經營,經常需要更新,比如程序的Bug,好的功能,好的潔面... ... 這就需要我們的用戶打開web app時候自動更新客戶端程序,而不是再去應用程序商店從新下載。今天的筆記就是完成這項工作。

阿里前端工程師——細談WEB APP自動更新,網友兩個字:優秀!

一、服務器端

服務器很簡單,只存放一個json文檔,這個文檔你可以用服務器端語言生成,也可以直接建立一個.json文件就可了,數據格式如下。[{"VisonID":"1.0.0","downURI":"http://yuanziyu.com/down/yzsc.apk"}]

VisonID表示web APP版本號,downURI表示安裝文件url

阿里前端工程師——細談WEB APP自動更新,網友兩個字:優秀!

二、客戶端

為了提高用戶使用感受,首先提示進行更新檢查。

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,我們用到的主要對象和方法基本介紹完了,本來想給你們看一下完整代碼但是貌似有點長,如果需要

源碼學習的話可以先關注然後私信回覆“前端”即可領取

阿里前端工程師——細談WEB APP自動更新,網友兩個字:優秀!

私信不要多字,不要少字,不要錯字,私信方法:點擊我頭像,進入主頁面,右上角有私信功能,在關注的上方位置。

如果對您有幫助請記得給小編先來個“評論+轉發


分享到:


相關文章: