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

一、服務器端

服務器很簡單，只存放一個json文檔，這個文檔你可以用服務器端語言生成，也可以直接建立一個.json文件就可了，數(shù)據(jù)格式如下。[{"VisonID":"1.0.0","downURI":"http://www.baidu.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;
}
}

（一）獲取服務端數(shù)據(jù)。

通過mui.ajax獲取服務器端JSON文件。其中參數(shù) Date.parse( new Date())是獲取時間戳，防止服務器端緩存，目地主要是為了調試用，如果正式發(fā)布可以刪除，因為我們跟新速度沒有那么快。mui.ajax方法介紹：

mui.ajax(url,{//url表示服務地址
 data:{},表示向服務器提交的數(shù)據(jù)
 dataType:'json',//服務器返回json格式數(shù)據(jù)
 type:'post',//HTTP請求類型
 async: false,//表示是否異步
 timeout:10000,//超時時間設置為10秒；
 success:function(json){
 },
 error:function(xhr,type,errorThrown){
 //異常處理；
 mui.alert('網(wǎng)絡延時,請重新加載!', '系統(tǒng)提示');
 }
});

（二）下載網(wǎng)絡文件。

我們更新文件或者是APP我們必須先從網(wǎng)絡下載文件，然后更新APP軟件。下載網(wǎng)絡文件我們主要用到的是這個方法html5+中Downloader對象。Downloader對象是模塊管理文件下載，用于從網(wǎng)絡下載各種文件，可支持跨域訪問操作。我們主要用到以下幾個方法

1.createDownload方法，表示新建下載任務。

Download plus.downloader.createDownload( url, option, completedCB );

說明：表示請求下載管理創(chuàng)建新的下載任務，創(chuàng)建成功則返回Download對象，用于管理下載任務的各種狀態(tài)。

參數(shù)：url (DOMString) 可選 要下載文件的url地址，僅支持網(wǎng)絡資源地址。必須是http或https協(xié)議；option (DownloadOption) 可選 可通過此參數(shù)設置自定義任務屬性，自定義屬性值僅支持字符串類型；completedCB (DownloadCompletedCallback) 可選 下載任務完成后的回調。

2.start 表示開始下載任務

void download.start();

說明：

開始下載任務，如果任務已經(jīng)處于開始狀態(tài)則無任何響應。 通常在創(chuàng)建任務或暫停任務后重新開始。

3.Downloader中的DownloadStateChangedCallback回調，表示下載任務完成時的回調

vaoid onCompleted( Download download, Number status ) {

// Download file complete code

}

說明：下載任務完成時的回調函數(shù)，在下載任務完成時調用。 下載任務失敗也將觸發(fā)此回調。

參數(shù)：download (Download) 可選 下載任務對象，這里面我們經(jīng)常用到的一個屬性filename，DOMString，只讀屬性，下載任務在本地保存的文件路徑，在DownloadCompleteCallback事件和DownloadStateChangedCallback事件觸發(fā)時更新。還有很多其它屬性我就不記錄了，用到的時候在翻手冊吧。status (Number) 可選 Http傳輸協(xié)議狀態(tài)碼，如果未獲取傳輸狀態(tài)則其值則為0，如下載成功其值通常為200

4.Downloader中的DownloadStateChangedCallback回調，表示下載任務狀態(tài)變化回調，我們主要用于顯示下載進度。

void onStateChanged( Download download, status ) {

// Download state changed code.

}

說明：下載任務狀態(tài)變化回調。

參數(shù)：同DownloadStateChangedCallback。

Ok，我們用到的主要對象和方法基本介紹完了，然后我們看一下完整代碼：

function UpdateVison() {
var showLoading = plus.nativeUI.showWaiting("檢查更新...");
// 獲取本地應用資源版本號
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
mui.ajax('http://www.baidu.com:8010/vison.json?r='+ Date.parse( new Date()), {
data: {},
//dataType:'json',//服務器返回json格式數(shù)據(jù)
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) {
//給下載任務設置一個監(jiān)聽 并根據(jù)狀態(tài) 做操作
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% 增長，如果這里不這么處理 出現(xiàn) 堆棧內存溢出的問題，有知道原因的大神指導一下哈
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自動更新代碼就大功告成了，留作備用。

本文名稱：web app自動更新客戶端程序實例
標題鏈接：http://www.rwnh.cn/news/97707.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網(wǎng)站建設、搜索引擎優(yōu)化、網(wǎng)站建設、網(wǎng)站制作、移動網(wǎng)站建設、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)