我们的手机软件每天都要经营,经常需要更新,比如程序的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自动更新代码就大功告成了,留作备用。

Web APP自动更新的更多相关文章

  1. web app升级—带进度条的App自动更新

    带进度条的App自动更新,效果如下图所示:   技术:vue.vant-ui.5+ 封装独立组件AppProgress.vue: <template> <div> <va ...

  2. Android学习系列(3)--App自动更新之自定义进度视图和内部存储

    友好的视觉感知和稳定的不出错表现,来自于我们追求美感和考虑的全面性,博客园从技术的角度,一直我都很欣赏.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 这 ...

  3. H5+app -- 自动更新

    一.最近做了一个app自动更新功能,用的基本都是网上找得到的. 1.h5+ 规范 :  http://www.html5plus.org/doc/zh_cn/maps.html 2.环形进度条插件:h ...

  4. 解决“iOS 7 app自动更新,无法在app中向用户展示更新内容”问题

    转自cocoachina iOS 7能在后台自动app,这对开发者来说和用户都很方便,但是还是有一些缺点.用户不会知道app本次更新的内容,除非他们上到app的App Store页面去查看.开发者也会 ...

  5. App自动更新(DownloadManager下载器)

    一.开门见山 代码: object AppUpdateManager { const val APP_UPDATE_APK = "update.apk" private var b ...

  6. Android 云服务器的搭建和友盟APP自动更新功能的实现

    setContentView(R.layout.activity_splash); //Bmob SDK初始化--只需要这一段代码即可完成初始化 //请到Bmob官网(http://www.bmob. ...

  7. 安卓---app自动更新

    主要参考:http://blog.csdn.net/jdsjlzx/article/details/46356013/ 效果如下: 大致思路:[原文] 首先,我们要有一个可以被手机访问的后台. 这里有 ...

  8. Android App自动更新解决方案(DownloadManager)

    一开始,我们先向服务器请求数据获取版本 public ObservableField<VersionBean> appVersion = new ObservableField<&g ...

  9. App自动更新之通知栏下载

    见证过博客园的多次升级,你也希望你的软件通过更新发布新特性通知用户吧,是的.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.设计思路,使用Versio ...

随机推荐

  1. flutter_boot android和flutter源码阅读记录

    版本号0.1.54 看源码之前,我先去看下官方文档,对于其源码的设计说明,文中所说的原生都是指android 看完官方文档的说明,我有以下几个疑问 第一个:容器是怎么设计的? 第二个:native和f ...

  2. oop面向对象【接口、多态】

    今日内容 1.接口 2.三大特征——多态 3.引用类型转换 教学目标 1.写出定义接口的格式 2.写出实现接口的格式 3.说出接口中成员的特点 4.能够说出使用多态的前提条件 5.理解多态的向上转型 ...

  3. mysql-5.7.27安装

    1,下载5.7.27安装包   百度网盘   (注:5.7.27要安装net faframework4.5.2) 2,创建my.ini及data文件 下载5.7.27后解压,在创建my.ini文件及d ...

  4. Spring基础——配置文件pom.xml,web.xml,ApplicationContext.xml

    Spring配置文件——复制粘贴即用 为了以后兼容SSM框架,直接创建Maven Project,包结构如下图. pom.xml <project xmlns="http://mave ...

  5. koa2使用es7 的装饰器decorator

    本文主要讲述我在做项目中使用装饰器(decorator)来动态加载koa-router的路由的一个基础架构. 目前JavaScript 对decorator 是不支持,但是可以用babel 来编译 既 ...

  6. arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  7. Flutter 即学即用系列博客总结篇

    前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...

  8. simple go web application & 二维码生成 & 打包部署

    go语言简易web应用 & 二维码生成及解码 & 打包部署 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...

  9. 分享一个酷炫动态登录页面html

    话不多说,如下图: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H ...

  10. jmeter相关知识学习记录

    基于Jmeter5.2.1 断言之响应断言 响应断言:对服务器的响应接口进行断言校验,来判断接口测试得到的接口返回值是否正确. 测试字段就是指要断言的内容的匹配处. 响应文本:就是响应的body部分: ...