文档章节

基于html5plus平台 实现app增量更新功能

s
 sharmine2
发布于 2015/03/05 00:28
字数 1001
阅读 6200
收藏 25

对于移动app,尤其是webapp,如何更新一直是比较重要的话题。以前的大部分app都是从应用商店进行版本更新,但是对于webapp来说,使用增量更新可以节省流量;更重要的是,它免去了新版本在应用商店的审核流程,使上架时间可以更加提前了。

一、前提

  1. 环境:使用html5plus作为webview与手机平台交互的中间件;关于html5plus,请自行参考 http://www.html5plus.org/#home

  2. 需求:点击“检查更新”,app在线检查版本是否有更新,如果有,下载并更新;

  3. 更新包后缀名为.wgt,制作方式:使用zip打包所有项目根目录下的html/js/css/images/manifest.json;其中:manifest.json不能有注释,否则在ios下将会更新失败;


二、 实现:

    1.  检查更新按钮:

<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" onclick="CheckUpdate(false);">
检查更新
</a>
<button class="mui-btn mui-btn-link mui-btn-block" id="Progress_Button" style="display:none;"></button>
</li>
</ul>

    2. update.js:

function CheckUpdate(auto) {
	//API的GET请求地址
	var CheckUrl = "http://app.zimayun.com/REST/CheckUpdate?appkey=" + APPKey + "&clientversion=" 
			+ plus.runtime.version;

	var RequestResponse = new Object();

	RequestResponse.Success = function(Result) {
		UnLoading();

		var ResultObject = JSON.parse(Result);
		if (ResultObject.apicode == 0) { //当api返回code为0表示成功
			if (ResultObject.needupdate) {
				//					MessageBox("需要更新", function() {
				//						MessageBox("下载包地址:" + ResultObject.url, function() {
				ConfirmBox("有新版本,是否更新?", function() {
					document.getElementById("Progress_Button").style.cssText = "display: block;";
					console.log(document.getElementById("Progress_Button").style.cssText);
					UpdateKey = ResultObject.updatekey;
//					DownLoadFile(ResultObject.url);
					DownLoadFile(serverHost + "/app/update.wgt");
				}, function() {
					return;
				});
				//						});
				//					});
			} else {
				if (!auto) {
					MessageBox("不需要更新", function() {});
				}

			}
		} else {
			if (!auto) {
				ShowError();
			}
		}
	}

	RequestResponse.Error = function(Result) {
		UnLoading();
		ShowError();
	}

	console.log(CheckUrl);
	//发送请求
	SendData(CheckUrl, RequestResponse); //发送POST
}

//完成更新
function FinishUpdate() {

	//API的GET请求地址
	var UpdateUrl = "http://app.zimayun.com/REST/FinishUpdate?updatekey=" + UpdateKey;
	UpdateUrl = UpdateUrl + "&model=" + encodeURIComponent(GetDeviceInfo().Model);
	UpdateUrl = UpdateUrl + "&vendor=" + encodeURIComponent(GetDeviceInfo().Vendor);
	UpdateUrl = UpdateUrl + "&uuid=" + encodeURIComponent(GetDeviceInfo().UUID);
	UpdateUrl = UpdateUrl + "&screen=" + encodeURIComponent(GetDeviceInfo().Screen);
	UpdateUrl = UpdateUrl + "&dpi=" + encodeURIComponent(GetDeviceInfo().DPI);
	UpdateUrl = UpdateUrl + "&networkinfo=" + encodeURIComponent(GetDeviceInfo().NetworkInfo);
	UpdateUrl = UpdateUrl + "&oslanguage=" + encodeURIComponent(GetDeviceInfo().OS.Language);
	UpdateUrl = UpdateUrl + "&osversion=" + encodeURIComponent(GetDeviceInfo().OS.Version);
	UpdateUrl = UpdateUrl + "&osname=" + encodeURIComponent(GetDeviceInfo().OS.Name);
	UpdateUrl = UpdateUrl + "&osvendor=" + encodeURIComponent(GetDeviceInfo().OS.Vendor);

	var RequestResponse = new Object();

	RequestResponse.Success = function(Result) {
		var ResultObject = JSON.parse(Result);
		if (ResultObject.apicode == 0) { //当api返回code为0表示成功
		} else {
			//ShowError();
		}
	}

	RequestResponse.Error = function(Result) {}

	//发送请求
	SendData(UpdateUrl, RequestResponse); //发送POST
}

//下载
function DownLoadFile(url) {
	var d = plus.downloader.createDownload(url, {}, function(f, s) {
		document.getElementById("Progress_Button").style.cssText = "display: none;";
		ConfirmBox("下载完成,是否立即更新", function() {
//			console.log(f.filename)
			/*
			 * unzip the folder..
			 */
//			plus.zip.decompress( f.filename, "_doc/", function(){alert("decompress success!")}, function(err){
//				alert(JSON.stringify(err));
//			});
			plus.runtime.install(f.filename, {force:true}, function() {
				//完成更新向服务器进行通知
				alert("更新完毕,将重启应用!");
				FinishUpdate();
				plus.runtime.restart();
			},function(err){
				alert(JSON.stringify(err));
				mui.toast("安装升级失败");
			});
		}, function() {
			return;
		});
	}, function() {
		MessageBox("下载失败", function() {});
	});

	d.addEventListener('statechanged', function(download, status) {

//		console.log(JSON.stringify(download));
		if (download.state == 3 && status == 200) {
			var percent = Math.round((download.downloadedSize / download.totalSize) * 100);
			document.getElementById("Progress_Button").innerHTML = (percent + "%");
		} else if (download.state == 4) {}
	}, false);
	d.start();
}


//确认消息
function ConfirmBox(MSG, OKFN, CancelFN) {
	plus.nativeUI.confirm(MSG, function(e) {
		if (e.index == 0) {
			OKFN();
		} else {
			CancelFN();
		}
	}, "提示", ["确定", "取消"]);
}
//发送数据
function SendData(URL, ResponseObject) {
	var MyXMLHttpRequest = new plus.net.XMLHttpRequest();
	MyXMLHttpRequest.onreadystatechange = function() {
		switch (MyXMLHttpRequest.readyState) {
			case 0:
				break;
			case 1:
				break;
			case 2:
				break;
			case 3:
				break;
			case 4:
				if (MyXMLHttpRequest.status == 200) {
					ResponseObject.Success(MyXMLHttpRequest.responseText);
				} else {
					plus.nativeUI.toast("检查更新出错");
				}
				break;
		}
	}

	MyXMLHttpRequest.open("GET", URL);
	MyXMLHttpRequest.send();
}

//获得系统信息
function GetDeviceInfo() {
	var device = {
		IMEI: plus.device.imei,
		IMSI: "",
		Model: plus.device.model,
		Vendor: plus.device.vendor,
		UUID: plus.device.uuid,
		Screen: plus.screen.resolutionWidth * plus.screen.scale + " x " + plus.screen.resolutionHeight * plus.screen.scale + "",
		DPI: plus.screen.dpiX + " x " + plus.screen.dpiY,
		OS: new Object()
	};
	for (var i = 0; i < plus.device.imsi.length; i++) {
		device.IMSI += plus.device.imsi[i];
	}
	var types = {};
	types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
	types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
	types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
	types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
	types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
	device.NetworkInfo = types[plus.networkinfo.getCurrentType()];
	device.OS = {
		Language: plus.os.language,
		Version: plus.os.version,
		Name: plus.os.name,
		Vendor: plus.os.vendor
	};
	return device;
}

其中,

plus.runtime.install(f.filename, {force:true}, function() {

这一行,{force:true} 这个参数必不可少。这是由于在安卓下目前还有一些bug,必须要加上。

实现效果:当用户点击检查更新,先检查是否更新;如果需要更新,则下载zip格式的.wgt文件,调用plus.runtime.install进行安装,安装成功后弹出成功,然后自动重启应用。


© 著作权归作者所有

共有 人打赏支持
s
粉丝 0
博文 2
码字总数 1028
作品 0
闸北
加载中

评论(5)

大师兄前端的大师兄
大师兄前端的大师兄
这个jquery的怎么写呢?原生的ajax看的费劲呢
s
sharmine2

引用来自“屈超”的评论

同求案例,现在一抹黑...完全不知道怎么下手...前几天尝试了下mui结果各种问题- -还找不到解决方案...就放弃了1
为何要放弃?我最近一年一直在关注webapp的中间件,目前看来最好用的就是html5plus了。所以选择这个了
s
sharmine2

引用来自“心有灵犀”的评论

哈哈,LZ也在用html5plus啊,有没有具体的app小例子,分享一下,让小弟也学习一下?
目前可发布的版本还没有,正在开发中;其实学习的话,官方的demo完全够用了。
屈超
屈超
同求案例,现在一抹黑...完全不知道怎么下手...前几天尝试了下mui结果各种问题- -还找不到解决方案...就放弃了1
心有灵犀
心有灵犀
哈哈,LZ也在用html5plus啊,有没有具体的app小例子,分享一下,让小弟也学习一下?
基于Html5 Plus + Vue + Mui 移动App 开发(二)

基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1、下拉刷新、上拉获取更多功能; 2、使用Vue 进行数据绑定; 3、...

衡斅
09/04
0
0
移动开发1 HTML5移动开发介绍

Native APP:是一种基于智能手机本地操作系统如 ios 、Android 、WB Web APP :使用面向web的开发技术(html5+css3+javascript)完成手机APP的制作 web APP核心思想 :打包(第三方平台,将HTM...

奋斗的小芋头
2016/11/22
88
0
WeX5 快速开发平台 V3.6 正式版发布

WeX5 V3.6 正式版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/10/14
5.1K
4
WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/09/04
4.6K
10
基于html5 plus + Mui 移动App开发(一)

使用Html5 plus + Mui 进行移动App开发,有一段时间了,这几日得空,做个资讯App分享给大家。 今天主要分享主页实现,首先看下效果: 此界面主要分为:标题、内容分类列表、搜索及设置按钮。...

衡斅
09/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

首个智能运维项目开源!腾讯织云Metis,用算法替代人为指定规则

10月20日,腾讯织云Metis 智能运维学件平台在OSCAR开源先锋日上宣布,正式对外开源。Metis 是AIOps(Algorithmic IT Operations),即智能运维领域的首个开源产品。智能运维主张通过算法从海...

腾讯开源
13分钟前
1
0
Java面试170题

1、面向对象的特征有哪些方面? 2、访问修饰符public,private,protected,以及不写(默认)时的区别? 3、String 是最基本的数据类型吗? 4、float f=3.4;是否正确? 5、short s1 = 1; s1 = ...

lanyu96
14分钟前
0
0
利用Ant脚本生成war包

使用ant脚本前的准备 1、下载一个ant安装包。如:apache-ant-1.8.4-bin.zip。解压到E盘。 2、配置环境变量。新增ANT_HOME:E:\apache-ant-1.8.4;PATH增加:E:\apache-ant-1.8.4\bin。 3、检...

狼王黄师傅
16分钟前
1
0
优雅的写出类

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。 一、例子 例子为一个轻提示组件T...

peakedness丶
18分钟前
1
0
Python基础案例教程

一、超市买薯片 # 用户输入薯片的单价danjia = float(input("薯片的单价"))# 用户输入购买袋数daishu = int(input("购买的袋数"))# 计算总价zongjia = danjia * daishu# 输出结果...

linuxprobe16
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部