HBuilder开发App之在线更新app功能

用HBuilder开发的app更新新版本，一般分为两种：

• 原生安装包
• 资源升级包

第一种需要重新安装，第二种可以实现静默安装，也就是可以后台下载，下载之后后台更新，更新之后只需要重启一次app就可以使用新版本app了。

第一种适合版本改动比较大的时候，比如修改了manifest.json配置文件里面的参数，这个文件被修改之后想要配置生效，是一定要重新安装的。

第二种适合app内容改动不大的时候，而且用户体验比较好。比如修改了app内的页面，布局，内容等等，就可以打包成移动App资源升级包。

第一种重新安装这个就比较简单了，可以提示有新版本让用户手动下载，还可以自动下载之后让用户选择是否安装，至于怎么自动下载，看完第二种安装方式之后就会了。所以主要讲第二种：资源升级包的方式在线静默升级。

好了进入正题，先简单说一下主要流程：

1. mui ajax访问服务器获取服务器上的App的最新版本
2. 获取本地App版本，并比较两个版本的大小。
3. 如果服务器版本大于本地版本，则进行更新，否则结束更新
4. 如果进行更新，从最新app发布地址下载资源升级包（后缀.wgt格式）保存到本地
5. 下载完成后进行安装升级包
6. 安装成功之后提示重启App

下面走一下代码：

//为了看起来更简洁，我去掉了一些headers等app校验信息
mui.ajax({
			url:'http://'+ip_port+'/getVersion/',//从服务器接口获取最新版本
			type:'GET',//get方式
			dataType:'json',//返回数据类型为json
			data:{},
			success:function(resp){
				switch (resp.StatusCode){//StatusCode为我服务器封装的状态码，用来判断是否获取成功。
					case 200: //说明获取成功
							//从本地获取当前的app版本号
							var appId = plus.runtime.appid；
							plus.runtime.getProperty(appId ,function(info){//传入appid，可获取app的版本信息等参数，function里面的info是回调参数，包含了返回的一些参数。详细用法可查阅官方文档
								//alert('本地当前版本号：'+info.version+'服务器版本号：'+resp.version);
								//比较版本大小，进行更新，下面需要先转换一下格式，例如转换之前是：1.0.8，转换之后是108
								var serverVersion = parseInt(resp.version.replace(/\./g,''));//把所有点替换成空字符,并转成整数
								var currentVersion = parseInt(info.version.replace(/\./g,''));
								if(serverVersion > currentVersion){//如果服务器版本大于本地版本，则进行更新，否则结束更新
									mui.confirm(//弹出一个可选择的弹窗，
										'新版本优化了启动速度',//弹窗内容
										'发现有新版本更新:'+resp.version,//标题
										['立即更新','下次再说'],//选项
										function(obj){//返回用户选的是哪个选项,0是第一个，123以此类推
											if(obj.index == 0){
												//开始更新
												mui.toast('开始更新');
												downloadWgt(resp.href);//调用下载升级包函数开始下载升级包，resp.href是服务器返回的最新资源包发布地址，可以由服务器自由更改发布地址，如果写死在app里如果更改发布地址则需要更新app。
											}
										}
									);
								}else{
									alert('当前已是最新版本');
								}
							});
						break;
					case 302: //获取参数出现错误
					//.....
					default:
						mui.toast(resp.msg);
						break;
				}
			},
			error:function(error){
				mui.toast('获取版本信息失败！')
			}
		});

下面是下载升级包函数：

//下载更新资源包
var	downloadWgt = function(url){
		plus.nativeUI.showWaiting('正在下载更新文件...');//为了用户体验友好，打开一个菊花等待框，告诉用户正在下载文件
		//新建一个下载任务，注意此时只是新建，并没有启动
		var task = plus.downloader.createDownload(url, {
				filename:'_doc/update/'//具体用法可查阅官方文档，filename为本地保存路径，为相对于app安装位置的相对路径
			}, function(d,status){//d为回调参数，包含了保存的文件位置等信息，status为状态码，如果为200则是下载成功
				if(status == 200){
					mui.toast('下载成功');
					plus.nativeUI.closeWaiting();//下载完毕之后关闭菊花等待框
					//开始安装更新包
					installWgt(d.filename)；//调用安装资源升级包函数
				}else{
					alert('下载失败');
				}
			});
		task.start();//启动上面的下载任务
	}

下面是安装资源升级包函数

//安装更新包
var	installWgt = function(filePath){
	plus.nativeUI.showWaiting('正在安装更新文件');//惯例，菊花等待框，用户友好体验
	//开始安装
	plus.runtime.install(filePath,{},function(){//安装成功的话
		plus.nativeUI.closeWaiting();//关闭菊花等待框
		plus.nativeUI.alert('应用资源更新完成!',function(){
			//安装成功后重启app
			plus.runtime.restart();
		});
	},function(e){//安装失败的话
			plus.nativeUI.closeWaiting();//关闭菊花等待框
			plus.nativeUI.alert('安装失败！',e.message);
	});
}

到此在线更新app的功能就算是写完了，再捋一下思路，首先获取服务器最新版本和本地当前版本并比较大小，如果有新版本则提示用户是否更新，用户同意了则调用展示的第二段函数代码进行下载，下载完成后调用展示的第三段安装函数进行安装，下载和安装函数都是封装好的HTML5+，帮助我们用js的形式来调用Android原生的功能，比如获取app版本，打开或写入本地文件，调用摄像头、GPS，调用别的app（常见于你打开一个app启动页的时候，不小心点了一下广告，然后就打开了你本地的某宝某猫某多多等软件）等等，格式：plus.xxx.xxx()，具体下载和安装的用法可查看官方文档：http://www.html5plus.org/doc/zh_cn/downloader.html和http://www.html5plus.org/doc/zh_cn/runtime.html。所有的HTML5+文档见：http://www.html5plus.org/doc/h5p.html。
另外如果有兴趣一起进步学习，请搜索名称关注我的公众号：IT成长日记
或扫码关注：