2021-01-27 分类: 网站建设
我们的手机软件每天都要经营,经常需要更新,比如程序的Bug,好的功能,好的洁面... ... 这就需要我们的用户打开web app时候自动更新客户端程序,而不是再去应用程序商店从新下载。今天的笔记就是完成这项工作。
一、服务器端
服务器很简单,只存放一个json文档,这个文档你可以用服务器端语言生成,也可以直接建立一个.json文件就可了,数据格式如下。[{"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; } }
(一)获取服务端数据。
通过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://www.baidu.com: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自动更新代码就大功告成了,留作备用。
本文标题:web app自动更新客户端程序实例
新闻来源:/news7/97707.html
成都网站建设公司_创新互联,为您提供网站收录、App设计、App开发、星空体育app最新版本(2024已更新)、搜索引擎优化、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容