web打包app(h5+app)版本自动更新的实现教程

ivye • • 网建应用 • 526 阅读

web打包的app(也称为h5+app),是指将基于html5等移动端web技术，开发的web应用打包成的app。区别于原生app，5+app相当于给web应用加上了一层本地程序(ios、android等)的壳子。其原理是，使用了原生程序的webview组件，即在原生程序内部调用内置浏览器，实现应用的核心功能。h5+app打包app使用的hbuiderx打包的，打包相关的方法可以参考，本人文章:
将H5站点打包成app完美攻略

原生app自动更新实现
原生app主要是基于ios和android的原生平台app,其打包原理，主要源于平台分发管理的不同和行业通用做法。ios是闭源的独立平台，apple store只有一个平台;android碎片化比较严重，世面上有上万家app store。各平台审核机制又不一样。这些方面都决定了ios和android的app，更新策略有所不同。
行业经验
Android 和 iOS 应用的更新都可以不用做，可以让第三方应用商店来帮你做，你只需更改应用的版本就行了。目前 Android 的通用做法是，在应用内检查版本号，通过跟服务器的版本号来对比，版本号不同就更新，具体的做法是可以在应用内写个下载程序，也可以在弹出浏览器来下载。iOS 应用如果要上传到 app store，是不允许在应用内检查更新的，否则不让上架，iOS 的更新更简单，让苹果 app store 来做就行了，你在 build 的时候，改变版本号就行，希望对你有帮助。

以下ios和android app自动更新的实现，都是基于行业最佳实践。

android自动更新实现
在服务器需要一个json或xml文件，如:check.json。

#check.json
[
{
"version":1,
"name":1.0,
"miniVersion":1,
"description":"asdfas/n",
"forceUpdate":false,
"size":3065,
"uri":"h5app-1.0.apk"
},
{
"version":2,
"name":1.1,
"miniVersion":1,
"description":"bbb/n",
"forceUpdate":"true",
"size":3065,
"uri":"h5app-1.1.apk"
},
{
"version":3,
"name":1.1,
"miniVersion":1,
"description":"bbb/n",
"forceUpdate":"false",
"size":3065,
"uri":"h5app-1.1.apk"
}
]

以上文件维护平台app的发布版本，基于些版本，提供apk自动更新。

“version”:1, #int 类型版本号，版本是递增的
“name”:1.0,
“miniVersion”:1, #平台支持最小的版本号，小于些的版本都会强制更新
“description”:“asdfas/n”, #版本说明
“forceUpdate”:false, #版本是否强制更新
“size”:3065, #app大小，单位kb
“uri”:“h5app-1.0.apk” #app下载路径

程序文件结构如下:

version:发布apk包目录。
check.json:apk版本配置文件。

相关接口如下

/**
* h5app 版本检查[android]：方法只提供android版本的app，版本检查，对于ios，依赖apple store的版本管理，进行版本检查和更新。目前，苹果store app上架审核不允许程序进行自动版本更新。
* @return AppVersionBean
* version 更新版本，始终为平台最新版本app
* uri为app下载的url
*/
@RequestMapping("h5app/check")
@ResponseBody
public AppVersionBean h5appCheck(String currentVersion) {
AppVersionBean result = new AppVersionBean();
return result;
}

/**
* h5app下载
* @return
*/
@RequestMapping("h5app")
@ResponseBody
public Object h5app(HttpRequest request) {
//request 请求设备类型，ios 、android做不同的返回
return null;
}

/**
* h5app 应用版本更新下载[android]:
* @param uri 文件名
* @return
*/

/**
* uri为程序下载文件名
*/
@RequestMapping("h5app/{uri}")
public void getH5app(@PathVariable String uri) {
//下载实现

}

/**
* app版本信息实体类
*/
@Data
class AppVersionBean {

Integer version;
String name;
Integer miniVersion;
String description;
//是否强制更新
boolean forceUpdate;
Long size;
String uri;
//是否有更新
boolean isUpdate;
}

如上接口，app检查更新接口传入currentVersion。服务端根据currentVersion和服务端版本管理配置(miniVersion,forceUpdate等)确定app是否更新和是否强制更新。
app启动或者提供检查更新按钮，调用后台检查更新接口。

 

客户端保存currentVersion和忽略版本列表，用于来检查更新，忽略的版本不再提示更新。立即更新，调用下载apk接口下载程序，完成更新。具体本地android代码，不在此提供，网上有很多。

ios自动更新实现
ios apk自动更新，基于apple store来实现。基于现在的上架审核策略，不允许使用检查更新，让苹果 app store 来做就行了，你在 build 的时候，改变版本号就行。

当然如果审核能通过，可以加入检查更新的逻辑，主要思路如下:
1.版本自动更新一般采用API对应的方式 获取当前App Store上版本号 于本地存储的版本号对比。
2.由服务端返回版本控制升级(容易审核不通过)
参考地址(很详细)
https://blog.csdn.net/lcg910978041/article/details/51426084
问题:
https://www.jianshu.com/p/9e237cd62129

h5+app的特点说明
h5+app的特点是本地app只是壳子，应用整体在web服务上。app更新比较少，但是也可能涉及打包更新，更新需要在h5的web服务实现。

h5+app自动更新实现

如上为打包配置(配置实现版本更新):
var H5_SERVER = “http://www.h5net.com/m/?origin=app¤tVersion=1”;
origin:标志h5，是app访问，配置使web服务能兼容手机web和app使用。
currentVersion:app当前发布版本号。
打包参考:将H5站点打包成app完美攻略

更新的核心逻辑原理跟原生app一致，核心实现检查更新代码，可以参考如下:

//app热更新下载
//假定字符串的每节数都在5位以下
function toNum(a) {
//也可以这样写 var c=a.split(/\./);
var c = a.split('.');
var num_place = ["", "0", "00", "000", "0000"],
r = num_place.reverse();
for(var i = 0; i < c.length; i++) {
var len = c[i].length;
c[i] = r[len] + c[i];
}
var res = c.join('');
return res;
}

var btn = ["确定升级", "取消"];
//获取app系统更新[是否手动点击获取更新]
function appUpdate(Index) {
console.log('appUpdate');
mui.plusReady(function() {
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
ver = inf.version + '';
console.log('ver:' + ver);
var client;
var ua = navigator.userAgent.toLowerCase();
if(/iphone|ipad|ipod/.test(ua)) { //苹果手机
mui.ajax({
type: "get",
dataType: 'json',
url: "https://itunes.apple.com/lookup?id=1462614850", //获取当前上架APPStore版本信息
data: {
id: 1462614850 //APP唯一标识ID
},
contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
success: function(data) {
console.log('data:' + JSON.stringify(data));
var resultCount = data.resultCount;
for(var i = 0; i < resultCount; i++) {
var normItem = data.results[i].version;
console.log('normItem:' + normItem)
if(normItem > ver) {
var _msg = "发现新版本:V" + normItem;
//plus.nativeUI.alert("发现新版本:V" + normItem);
mui.confirm(_msg, '升级确认', btn, function(e) {
if(e.index == 0) { //执行升级操作
document.location.href = 'https://itunes.apple.com/cn/app/%E5%AD%A9%E5%84%BF%E6%AC%A2/id1462614850?mt=8'; //上新APPStore下载地址
}
});
return;
}
}
if(ismanual) {
mui.toast('当前版本号已是最新');
}
return;
}
});
} else if(/android/.test(ua)) {
mui.ajax(ip + "APIVApp/SelectVApp", {
data: {
apkVersion: ver,
},
dataType: 'json',
type: 'get',
timeout: 10000,
success: function(data) {
console.log('data:' + JSON.stringify(data))
console.log(toNum(ver))
if(toNum(data[0]._vname) > toNum(ver)) {
var _msg = "发现新版本:V" + data[0]._vname;
mui.confirm(_msg, '升级确认', btn, function(e) {
if(e.index == 0) { //执行升级操作
downWgt();
}
});
} else {
console.log(Index);
if(Index) {
mui.toast('当前版本号已是最新');
}
return;
}
},
error: function(xhr, type, errerThrown) {
mui.toast('网络异常,请稍候再试');
}
});
}
});
});
}

// 下载wgt文件
function downWgt() {
var wgtUrl = ip + "app/H5750CDB5.wgt";
plus.nativeUI.showWaiting("下载更新文件...");
plus.downloader.createDownload(wgtUrl, {
filename: "_doc/update/"
}, function(d, status) {
if(status == 200) {
console.log("下载更新文件成功：" + d.filename);
installWgt(d.filename); //安装wgt包

} else {
console.log("下载失败！");
plus.nativeUI.alert("下载失败！");
}
plus.nativeUI.closeWaiting();
}).start();
}

function installWgt(path) {
plus.nativeUI.showWaiting("安装更新文件...");
plus.runtime.install(path, {}, 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);
if(e.code == 10) {
alert('请清除临时目录');
}
});
}

本文是实践的一些总结，希望对你有所帮助。有什么问题可以留言讨论，有更好的实践方法也欢迎斧正指导。

参考:
h5打包app实现版本自动更新
https://www.cnblogs.com/lijia-kapok/p/6553823.html
https://blog.csdn.net/weixin_41472521/article/details/90274142
android:
https://www.cnblogs.com/zhujiabin/p/7384902.html
ios:
https://www.jianshu.com/p/9e237cd62129

臭味相投的朋友们，我在这里:
猿in小站:http://www.yuanin.net
csdn博客:https://blog.csdn.net/jiabeis
简书:https://www.jianshu.com/u/4cb7d664ec4b
微信免费订阅号“猿in”

————————————————
版权声明：本文为CSDN博主「usun.he」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jiabeis/article/details/100742555

文章版权归原作者所有或来自互联网，未经允许请勿转载。如有侵权请联系我删除，谢谢！
THE END
分享
二维码
打赏
< <上一篇
下一篇>>