HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。
使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上,而移动App的文件存放在手机本地,编写移动App的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。
用个更形象的列子,web app仍然是b/s结构,而移动App是c/s结构甚至是完全脱线的单机应用。
以某个小项目举例:
引入目录文件
右键生成移动APP后都会在工程下生成manifest.json文件,在“项目管理器”中双击即可打开。
Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。
Manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。
HBuilder打开manifest.json文件后默认显示“可视化视图”,可配置应用的基本信息:
- 应用名称:App打包后在手机上桌面的快捷方式名称;
- appid:HBuilder appid(应用标识),在创建时分配的、以后不可改的标识。如用户手动修改ID打包时会提示参数错误;
- 版本号:应用的版本号,用户可通过plus API(plus.runtime.version)获取应用的版本号,需提交App云端打包后才能生效;
- 入口页面:应用启动后自动打开的第一个HTML页面,可填写本地html文件地址(相对于应用根目录)或网络地址(以http://或https://开头)。
关于Manifest.json文档说明详细的戳官方:http://ask.dcloud.net.cn/article/94
注意:所有图片格式必须是png,且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败!
配置完成后可以连接手机运行试看:
点击运行——手机查看——在xxx手机查看。
如果手机已经通过usb连接上,但是在查看那里找不到设备,先看一下线连好没有~
可以尝试重启设备,或者安装一个手机助手。
更多解决方案:http://ask.dcloud.net.cn/article/97
查看运行没问题,就可以打包了。
注意:
1.文件路径。如果涉及到绝对路径相对路径,请确认在项目改名的情况下正确。
2.文件不可包含中文名。
HBuilder提供的打包有云打包和本地打包两种。此处仅对云打包进行说明。
HBuilder并不会向开发者收取任何有关打包的费用,也不限制开发者使用本地打包。
云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。
以安卓的举例:可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书中开发者和企业信息不同。
这里使用公有证书。
想要使用自有证书可以戳教程:http://ask.dcloud.net.cn/article/89
点击打包按钮,会弹出提示:
确认需要的权限都添加完毕后执行打包。
接下来就可以等了。
如果“制作状态”栏显示“打包成功,下载完成”则表示云端打包完成,可点击“打开下载目录”查看下载的安装包。
已经打好的安装包,允许开发者在2天内继续下载。2天后服务器端会清除文件。