文档章节

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

s
 sharmine2
发布于 2015/03/05 00:28
字数 1001
阅读 6127
收藏 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小例子,分享一下,让小弟也学习一下?
移动开发1 HTML5移动开发介绍

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

奋斗的小芋头
2016/11/22
88
0
【直播】DCloud CTO崔红保:如何玩转H5网站快速转换成App?

将H5网站转换成App,不是简单套个WebView壳完事,关键是达到原生版的功能和体验。wap2app是一款将H5网站转换成App的前端开发框架,底层基于HTML5PLUS引擎,可以调用几十万原生API,实现更强大...

51CTO编辑部
2017/11/03
0
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
React Native 在卖菜公司的落地之路

摘要 本次分享介绍了RN应用从开发到上线以及最后维护的整个过程,其中涉及到了组件化、热更新、打包、线上监控等方方面面。 Why RN 之所以要选择RN,一方面是因为效率问题,另一方面则是历史...

06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring-boot | 日志

引言 好久不见,都还好吗? 大家都知道,我一般都是带来实用的东西,这次也一样,我们来试试项目开发中的日志处理。 理论知识 1、为什么要用日志?你是否因为项目出现问题,查找日志文件定位...

成都_小冯同学
19分钟前
0
0
dubbo下的补偿实现(一)

背景 由于前面几篇文章涉及的问题 分布式事务的思考 在我们微服务的场景下 各种本地事务都没有办法控制的很好。 A服务调用B服务 当B服务成功提交之后 A发生了异常 这种情况下要如何处理呢??...

Mr_Qi
28分钟前
2
0
HTML显示json字符串并且进行格式化

通过pre标签进行格式化展示,使用JSON.stringify()方法转换。 代码如下:   <html> <head> <title>HTML显示json字符串并且进行格式化</title> </head> <body> <p id="show_p">{ "name": "B......

writeademo
49分钟前
0
0
LNMP——php-fpm

php-fpm的pool •vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加include并删除我们之前www池子 • include = etc/php-fpm.d/*.conf • mkdir /usr/local/php/etc/php-fpm.d/ • ......

chencheng-linux
52分钟前
0
0
TensorFlow layers slim 模块搭建cnn对mnist分类,比较bn效果

shape变化 (?, 784)(?, 28, 28, 1)(?, 14, 14, 8)(?, 7, 7, 8)(?, 1, 1, 8)(?, 8)(?, 10) 结果对比,基本上还是有点用的 0.91725457 0.9232 0.9548 0.95530.9177273 0.9234 0....

阿豪boy
55分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部