文章目錄

• 背景說明
• 原生app自動更新實現
• • android自動更新實現
  • ios自動更新實現
• h5+app的特點說明
• h5+app自動更新實現

背景說明

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")@ResponseBodypublic AppVersionBean h5appCheck(String currentVersion) {AppVersionBean result = new AppVersionBean();return result;}/*** h5app下載* @return*/@RequestMapping("h5app")@ResponseBodypublic 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版本信息實體類*/@Dataclass 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&currentVersion=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”

總結

以上是生活随笔為你收集整理的web打包app(h5+app)版本自动更新的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。