Webapp打包就是在一台机器上打包一个文件包或者程序包。在服务器端,应用软件与服务器端程序是分开的。在前端,应用软件通过浏览器安装到移动设备上。因此,移动应用程序应该与网站组件分开。我们常说:网站封装app、应用APP、手机网站、微信公众号等。但是如果想让所有的网页在同一台机器上运行,就需要用到网站封装的技术,这里就介绍一下。
1.包的定义
网站包装是对网页进行包装的一种。但是在移动设备上,由于浏览器的限制,需要将各种站点整合起来,让用户方便的访问。为了让各个站点的用户使用同一个APP进行购物、消费、娱乐等活动,需要对各个站点的程序进行封装。将部分网站内容与应用程序分离,可以大大降低网站建设成本和维护成本。
2.具体工作流程
从图中可以看出,封装程序是按照业务需求划分的。用户需要的功能模块对应网页中的内容,如果没有这些模块,则封装程序中不会提供。对于不同类型的产品,在打包的时候也需要注意不同业务需求之间的关联性,比如页面与用户需求之间的关联性。
一般来说,在封装客户端应用功能模块时,不需要关注这些关联。对于页面服务或者产品功能模块,需要注意。例如,在封装前端应用时,需要注意用户界面与页面服务的关联,保证交互体验的流畅性,降低用户访问成本。
三、常见的封装方式及应用场景
应用场景:在网站中,我们可以看到很多不同的模块,比如:首页、主界面等,这是因为这些模块之间存在耦合关系,所以需要通过封装来实现。比如在浏览器中搜索某个网站时,会自动跳出这个页面。但是这个页面在浏览器上会被限制,无法通过移动设备访问。因此需要对其进行封装,将这些模块与其他组件关联起来,实现交互功能。
封装效果图
特征
1、无需配置Android开发环境和下载Android SDK、JAVA环境等。
2.打包的本地静态HTML项目可以脱离服务器运行
3.支持自定义图标、自定义APP名称、自定义包名、全屏、横屏、退出提示、常亮等选项
4.支持的浏览器特性,支持KRPano全景工程、WebGL工程、游戏工程等。
5.支持打包网站
软件截图
包装过程
1.填写要打包的网址或选择本地文件
1)打包网站
在“网址或本地HTML路径”文本框中输入以http开头的网址,例如输入
2)打包本地HTML项目
点击右侧打开文件按钮,选择打开HTML文件
2.可以修改APP名称和APP包名(可选)
图4
暗示:
APP名称为应用安装时在手机桌面显示的名称
APP包名对应APK的ID,用于区分不同的APP。具有相同 ID 的 APK 文件将在安装过程中被覆盖
3.点击修改图标修改APK在手机上显示的图标。
图5
4.可以设置开机密码。设置开启密码后,手机端打开APP时,必须输入密码才能正常进入APP。
图6
5.所有设置完成后,点击Pack APK生成APK。打包完成后,安装到手机即可浏览
APK解决误报病毒问题(1.5.9版本新增)
由于打包后的APK未在国内APP市场上市,1.5.9版本之前使用的是共享签名证书。因此,在部分手机系统上,1.5.9版本之前打包的APK偶尔会出现误报。
为了解决这个问题,打包软件1.5.9版本后,提供了内置独立签名证书的功能,支持用户随时重置签名证书。
如果内置独立签名证书被误报为有毒,可以使用以下方法重置内置独立签名证书:
打开软件等待加载完成,点击重置证书按钮,会提示重置成功:
图7
配置说明
图8
1.“显示标题栏”配置
勾选“Show title”后,即可配置APK的标题栏,显示标题栏的应用如下图所示
图9
2.“调试信息”选项
打开“调试信息”选项后,APP运行过程中会显示一些调试信息,在一些支持的网页中会显示一个调试面板,打开可以查看网站的调试信息,可以用于解决网页中的问题
3.全屏选项
勾选全屏选项后,状态栏不会出现,全屏显示当前网页
4.横向选项
勾选后打开APP,默认是横屏
5.退出提示选项
勾选后,当用户按回车键退出程序时,会出现提示对话框,如下图
图10
6.进度条选项
勾选进度条选项后,当用户打开网页时,顶部会显示加载进度条
7.浏览按钮
勾选后APP底部会增加一列导航按钮,支持前进、后退、刷新、返回首页
图11
8.启动图像
勾选后,可以选择一张本地图片作为启动图片,推荐尺寸为720*1280。
开机画面会根据系统分辨率进行裁剪,所以建议将开机画面的内容放在画面中央,以免被裁剪。
9.禁用缓存
经检查,APK将不再使用缓存,每次打开都会加载的网页。如果打包的网站经常更新,建议勾选这个选项
10.浏览器打开外部链接
勾选后,外部链接会调用安卓浏览器打开。
11.API支持
勾选后,可以通过js调用以下的API
退出APP: HTMLAPKPackerHelper.quitApp()
刷新当前页面: HTMLAPKPackerHelper.refreshPage()
12. 支持左右滑动
勾选后,可以通过左右滑动返回上一页,或者前进到下一页。(如果你的网页里有手写等功能,不建议开启此功能,否则会导致手写过程中网页返回或者前进到下一页)
13. 定位权限
开启后,可以在网页中通过js获取定位信息,如果网页里没有该功能,可以不开启
14.相机权限
开启后,可以在网页中使用相机拍照上传,如果网页里没有该功能,可以不开启
15.存储权限
开启后,可以在网页里下载文件,如果网页里没有该功能,可以不开启
16.使用新内核
开启后,将使用新的打包内核进行打包,支持的系统和更多的功能,推荐使用该选择,后续版本老内核将会不再使用
17.下拉刷新
勾选后,