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结构甚至是完全脱线的单机应用。

以某个小项目举例:

引入目录文件

1.png

右键生成移动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文件后默认显示“可视化视图”,可配置应用的基本信息:

3.png

应用名称:App打包后在手机上桌面的快捷方式名称;

appid:HBuilder appid(应用标识),在创建时分配的、以后不可改的标识。如用户手动修改ID打包时会提示参数错误;

版本号:应用的版本号,用户可通过plus API(plus.runtime.version)获取应用的版本号,需提交App云端打包后才能生效;

入口页面:应用启动后自动打开的第一个HTML页面,可填写本地html文件地址(相对于应用根目录)或网络地址(以http://或https://开头)。

注意:所有图片格式必须是png,且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败!

配置完成后可以连接手机运行试看:

点击运行——手机查看——在xxx手机查看。

如果手机已经通过usb连接上,但是在查看那里找不到设备,先看一下线连好没有~

可以尝试重启设备,或者安装一个手机助手。

更多解决方案:http://ask.dcloud.net.cn/article/97

查看运行没问题,就可以打包了。

注意:

1.文件路径。如果涉及到绝对路径相对路径,请确认在项目改名的情况下正确。

2.文件不可包含中文名。

打包

HBuilder提供的打包有云打包和本地打包两种。此处仅对云打包进行说明。

HBuilder并不会向开发者收取任何有关打包的费用,也不限制开发者使用本地打包。

云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。

以安卓的举例:可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书中开发者和企业信息不同。

6.png

这里使用公有证书。

想要使用自有证书可以戳教程:http://ask.dcloud.net.cn/article/89

点击打包按钮,会弹出提示:

7.png

确认需要的权限都添加完毕后执行打包。

接下来就可以等了。

如果“制作状态”栏显示“打包成功,下载完成”则表示云端打包完成,可点击“打开下载目录”查看下载的安装包。

已经打好的安装包,允许开发者在2天内继续下载。2天后服务器端会清除文件。