我们的手机软件每天都要经营, 经常需要更新, 比如程序的 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 自动更新代码就大功告成了, 留作备用.
来源: https://www.cnblogs.com/agoodlife/p/10806327.html