-
2019-09-11 17:19:56
背景说明
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/9e237cd62129h5+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”
更多相关内容 -
网站打包APP,android原生APP封装网页,app封装.zip
2020-01-03 17:51:31老版本:将网站封装为安卓APP,修复新版本安卓只能使用https的情况,修复返回键退出APP情况,支持自定义错误页。 开发工具:android studio 注意:部分网站可能不兼容自行百度修改 当前版本:在原有基础上处理了... -
网站web打包app教程.docx
2019-12-18 12:26:24网站web打包app教程,网站web打包app教程,详细的打包教程,让你轻轻松松打包, -
MUI打包成APP详解.doc
2020-11-08 12:02:07移动H5前端框架MUI-最接近原生APP体验的高性能前端框架--打包APP详解MUI. MUI是一套非常优秀的移动APP框架,而且是国产的。非常方便与高效,推荐!! -
HBuilder打包App方法
2021-03-22 22:06:46该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。...HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。
HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。
1,下载HBuilder,注册并登陆。首先打开“文件”-“新建”-“移动APP”,输入“应用名称”,“位置”可以根据需要自己选择即可,“选择模板”建议选择空模板;
2,新建完成后, 在项目管理器会显示新建的项目目录,其中css,img,js和index.html这几个文件可删可改可替换。
unpackage文件夹是放置app图标和启动界面的图片。
manifest.json文件是移动App的配置文件,用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息。
3,如果删除了css,img,js文件夹和index.html文件,就把其他自己的项目文件对应复制到文件夹中,注意html文件中的引用路径需要保持正确。
如下图自己拷贝的项目:
4, 文件复制完成后,刷新更新下,双击打开manifest.json文件来配置App。
appid:点击云端获取。版本号:根据需要来编辑。页面入口:默认是index.html,根据自己项目需要,更改APP的启动页面。应用描述:自己随便填。应用是否全屏显示:勾上就全屏显示。
5,图标配置:点击页面下方的图标配置,配置APP显示图标。
1)点击"+"号的正方形方框,选择图标素材的路径找到图标素材,再点击" 自动生成所有图标并替换"按钮,完成图标生成和替换。
2),生成的图标自动在unpackage文件夹下
6,启动图片(splash)配置,点击切换到启动图片配置
1),启动选项:默认
2),启动图片设置,根据自己需要是Android还是iOS平台,再根据不同设备对应做出启动图片
3),在unpackage→res文件下新建个文件命名"splash",把做好的启动图片放到这个文件里面。
4),在启动图片设置里点击"选择",找到刚放进来的启动图片
7,SDK配置:有需要就配置,没有就默认就行。
8,模块权限配置:有需要就配置,没有就默认就行。
9,页面引用关系:
首先点击“扫描代码”,再点击左边index.html文件
该功能是什么意思:点击左侧html文件,右侧会显示不同的文件,图片等。可以表示左侧html文件加载时所需要的资源。
10,代码视图:在代码视图里查看设置是否正确,确定后ctrl+s保存好。
11,设置好配置选项,正式进入打包阶段
HBuilder里点:"发行"-"发行为原生安装包"开始打包
这里介绍一下iOS打包
1),这里如果选择越狱包就不需要苹果证书,一路默认设置就可以打包成功,但是打包的App只能安装在越狱过的手机,没越狱安装不了。
2),如果使用苹果证书,这里推荐一个申请iOS证书的工具 Appuploader。免苹果付费开发者账号,直接使用普通苹果id,就能使用Appuploader申请ios测试证书,打包ipa安装到非越狱设备。
工具的安装网址:http://www.applicationloader.net/blog/zh/72.html
免开发者账号申请iOS证书教程:http://www.applicationloader.net/blog/zh/1073.html
12,提交成功后点击确定,就可以查看App打包状态
等打包成功,就可以点手动下载,通过第三方工具 苹果助手安装到ipad上了。
13,调试和安装模拟器
如果你需要在电脑本机进行调试那就需要安装模拟器,请参考http://ask.dcloud.net.cn/article/151如何安装配置手机模拟器,或者在HBuilder里→→运行→→手机运行→→如何安装配置手机模拟器进入查看。
如果需要安装到手机进行真机调试,把手机用数据线连接到电脑,然后重新启动HBuilder→→运行→→手机运行→→连接上真机。
-
十分钟教你学会打包APP
2021-05-02 14:08:06我们打包APP需要用到HBuilder,所以先讲解如何安装使用 HBuilder的下载与安装 HBuilder的官网下载地址:https://www.dcloud.io/ 点击DOWNLOAD后会弹出如上显示的两种版本下载 Windows版 和 MacOS版 根据我们电脑...我们打包APP需要用到HBuilder,所以先讲解如何安装使用
HBuilder的下载与安装
HBuilder的官网下载地址:https://www.dcloud.io/
点击DOWNLOAD后会弹出如上显示的两种版本下载
Windows版 和 MacOS版 根据我们电脑版本下载即可,我们一定要下载标准版哦(正式版中的)我这里是Windows系统,所以我选择的是window版
下载完是一个压缩包
右击压缩一下即可
打开文件夹后找到如下HBuilderX.exe文件
双击即可运行 为了方便我们可以右击发送到桌面快捷方式HBuilder的使用
打开后就是这样了,可以点击右下角登录哦
使用
创建项目
点击创建即可
结构
如果想创建更多文件可以右击
其他的就不过多讲解了,说一下如何打包APP打包APP
我们选择5+App(A) 类型
名称随意填写了
模板默认即可
安卓包内设置样式
苹果包设置样式
注意:苹果包必须有证书才可以
这里我就做这些选择了
继续打包即可
等到百分百即可上传开始打包APP
开始进行打包
返回下载地址就代表成功了
点击下载地址即可下载
然后发送到手机上即可安装 -
HBuilderX网站打包APP
2022-03-22 16:17:14https://ask.dcloud.net.cn/account/setting/profile/ 登录HBuilderX的官网,进行打包校验下载HBuilderX安装包官网地址:https://www.dcloud.io/
选择HBuilderX极客开发工具
点击DOWNLOAD
点击历史版本,这里为什么不下载最新的版本,是因为我一开始下载的最新版本,打包一直提示cannot find module babel-core
将HBuilderX官网提供的历史版本百度网盘资源保存至自己的百度网盘
我下载的HBuilderX.2.9.8.20201110.full.zip
HBuilderX压缩包解压到本地,双击HBuilderX.exe运行
打开HBuilderX软件界面,点击左上角文件->新建->项目
HBuilderX弹出新建项目窗口,选中Wap2App,填写项目名称如myapp,填写网站地址如https://www.2dd.cc/,项目所存储地址可以使用默认地址,最后点击下方创建按钮,即可新建项目。
myapp项目创建成功,选中左侧的manifest.json,选中模块配置,可以看到打包模块配置中的权限申请,这里我去除了通讯录权限。
点击图标配置可以配置App的展示图标,然后自动生成所有图标并替换
点击发行,然后选中原生App-云打包,弹出的打包界面,我只需要Android(apk包),选择公共测试证书,去除所有广告,点击打包按钮进行打包。
弹出的打包校验弹框,不用理会,选择继续打包
提示已成功提交云端服务器,正在排队打包
HBuilderX下方控制台会显示打包状态
接下来就可以等待云端打包完成了,最终打包完成会返回apk包下载链接,这就是完整的打包流程。
TIPS
如果HBuilderX提示需要打包校验,则登录HBuilderX的官网,进行打包校验
https://ask.dcloud.net.cn/account/setting/profile/
-
啦啦外卖APP打包视频教程APP框架文件
2021-12-06 14:16:14啦啦外卖APP打包视频教程APP框架文件 -
啦啦外卖最新版app打包教程
2021-05-30 11:07:09详细描述了打包的全过程 -
HBuilder打包App教程
2021-01-15 01:27:16HBuilder打包App教程 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。 HBuilder提供的打包有云端打包和本地打包两种,... -
HbuilderX打包app,Hbuilder怎么打包app,H5打包成app,H5怎么打包成app
2019-03-21 16:48:562.在这里选则你需要新建的项目类型,本人打包的是h5app,选的5+app 3.选择好项目本地存放的地址,编写项目名,之后点击创建 4.打开刚刚创建的那个项目,点击打开manifest.json,就是下图这样子 5.填写你的h5项目... -
HbuilderX打包app,HbuilderX怎么打包app
2020-03-23 15:04:19HbuilderX打包app,HbuilderX怎么打包app 首先准备工作,我的电脑找到设备管理器,VID后的四位编码就记一下,后边会用到 打开C盘找到.android/adb_usb.ini,如果没有这个文本,新建一个,这里是默认的信息,把你的... -
uniapp打包app教程
2021-02-04 01:34:46uniapp打包app教程 ⚠️:安卓app运行的时候的ip地址不能填localhost或127.0.0.1,要用本机的ipv4地址 代码需要像下面这样改 模拟器运行调试 1、制作运行基座:https://ask.dcloud.net.cn/article/35115 选择... -
干货,快速的教你如何打包app
2021-05-26 15:11:32所需工具:HbuilderX hbuilderX下载地址,下载符合自己电脑的就行。 1.新建项目 步骤:文件 → 新建 → 项目 2.选择5+app,输入项目名称,选择项目存放目录 3.和我们正常的项目一样,只不过多...5.打包app 步骤:发行 -
在线打包app平台
2018-03-16 11:59:12转载原文博客地址 一篇关于百度联盟赚钱的文章 移动互联网时代,我们需要为自己的业务、博客、产品或服务制作一款移动应用程序。但时常会面临人力、时间、金钱成本诸多障碍。...优秀的APP在线制作生产平台:... -
uniapp打包app 踩坑记录
2021-06-21 10:12:25uniapp 打包成app 部分踩坑记录 -
Uni-app打包步骤.docx
2020-07-23 17:55:13uniapp 安卓打包教程 超级详细简单 具体打包内容在文档里有详细的步骤 按照步骤即可打包完成 如有疑问 联系我 -
Flutter 打包APP (Android & IOS)
2021-07-19 19:40:07打包Android apk 参考 ...Flutter项目打包成安卓apk详解来了(解决安装没网络问题) ...修改app名字 修改包名 配置权限(解决apk安装后无网络) 注意,main 和 profile 目录下的Manifest文件都要检查 main -
萝卜源码前后端源码+打包APP的教程
2021-09-12 15:59:01今天分享一个萝卜源码前后端源码+打包APP的教程 我相信很多人都有源码但是不会配置复杂的AS工具导致一直没有打包好属于自己的APP 所以,今天我来了 萝卜前端APPJava源码 先把源码发出来,前端是蓝色的,后端是... -
mac中用python的py2app模块打包app
2022-03-07 17:41:08创建一个单独的文件夹,放入要打包的xxx.py,然后运行如下命令 py2applet --make-setup xxx.py 安装完py2app之后就会有py2applet,py2applet一般在/Users/admin/Library/Python/3.8/bin下,不同的环境可能不太一样 ... -
2022使用uniapp本地打包APP安卓,已排坑
2022-03-08 10:11:421. 生成本地打包资源 2. 下载Android Studio和App离线SDK 导航路径:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android 下载的Android 离线SDK与本地开发工具版本对应 解压得到的目录如下 使用... -
h5打包app点击手机返回键直接退出app的解决方法
2021-11-09 16:33:13h5打包的app,在android手机上,点击手机自带的物理返回键,直接退出了app。由于onbackPress在app上不生效,于是用js的方式去做了拦截,实现了点击物理返回键返回上一页,而不是退出app。(提示:代码放在main.js文件... -
uniapp 打包APP遇到的问题
2021-07-26 16:02:39IOS打包失败: 一、证书不一致,安装失败 查看下图制作相对于的证书,如果只是要打自定义基座,可以选择Development、并且添加设备的uuid生成profile文件。 打包成功,控制台输出报错: 一、安卓真机... -
Android 打包APP默认名称(app-release.apk)修改
2022-03-01 00:59:36android{ …… …… buildTypes { release { //是否开启zip优化 zipAlignEnabled true //混淆所用文件 安全时候可以启用 proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard.cfg' ... -
将网址快速打包app(Hbulider-X)
2020-12-28 21:20:471.打开hbulider官网 ... 下载hbuliderx极客开发工具 2.下载完成后,新建一个app项目,选择...5.打包成app 选择第一个 原始app-云打包 注意: 安卓打包测试可以用公用测试证书,如果是线上运行请使用自己的证... -
iOS打包 App Thinning 选项
2021-03-01 11:07:43打包的时候,为了使我们打出的包可以安装在所有的设备山,我们需要选择 App Thinning None 如图 -
react-native 打包app发布android / ios详细教程
2021-10-26 10:25:18发布Android教程 第一步:从项目根目录进入到android 目录 第二步:使用命令 gradlew clean (mac电脑 ./gradlew clean)...第三步:使用打包命令 gradlew assembleRelease (mac电脑 ./gradlew assembleRelease)。... -
uni-app 云打包app,本地图片不显示问题
2021-04-30 12:04:10如果图片的标签用的是img标签,改成image标签就可以了,亲测有效 -
HBuilderx打包APP解决支付问题
2020-08-17 11:26:59最近有个小的支付项目想要做成APP,由于很简单所以我研究了下H5打包成App,我使用的是Hbuilderx这个IDE进行的打包其中让我费劲的主要是支付这块。下面详细说下步骤及一些问题和解决方法。 1.打开HBuilderx新建...