我们的手机软件每天都要经营，经常需要更新，比如程序的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自动更新代码就大功告成了，留作备用。
如对本文有疑问， 点击进行留言回复！！
解决vue 项目使用webpack打包后，直接打开dist文件夹下的页面空白的问题
vscode写vue代码时常用格式化设置，解决格式化函数名后空格消失问题等...
网友评论