来张新疆天山的美景图，然后我们借着美景来了解我们今天要说的东西，我知道新疆在大家的眼中是特别的乱特别的穷，我想说的是，其实不是你们想的那样，不有首歌是这么唱的吗？新疆是个好地方，的确新疆有美丽的大草原、还有大家喜欢吃的干果和哈密瓜等，以及人人向往的天山，旁边是美丽的大青海有着美丽的传说-青海湖。建议大家可以去那边看看，不扯了我们来说如何将WEB项目打包成apk，由于最近忙着毕业设计和论文的书写，让我遇到了奇葩的老师，既让我做个Web项目又要是个安卓app，没办法啊。心痛，本来想着在淘宝上买一个算了，反正不会写，突然灵感来了，就想到了能不能将一个WEB项目打包成app，于是各种方式的百度，哇还真有，就用HBuilder可以，也不是很难，接下来开始真正地表演了，别闭眼，不然错过了。
将我们的web项目打包成一个apk文件并不难，首先准备好软件HBuilder还有你的项目，注意这里只献给那些不是真正的安卓开发却想把web打包成apk文件的老铁们看，接下来我们一步步看：
打开HBuilder之后鼠标右键文件-新建-移动app然后会跳到这个页面，从图中我们可以看到需要我们填写几个地方，应用名称这里填你自己想写的名字，只要你喜欢即可，接下里我们要进行启动页面模板的选择，默认是第一个，其它的一样，这里我们就来看第一个吧，如图所示：
这里我的应用名称是你懂得，然后点击完成，就是如图所示的一个项目结构，其真正的核心配置文件是manifest.json这个文件，我们来看看这个它：
这是manifest.json文件的界面，这里我们需要挨个配置，配置之前我们先来了解下各自的作用。
了解什么是manifest.json
在HBuilder中manifest.json实质是H5+app的一个配置文件，一般用来显示我们的应用名称、图标以及该应用的入口文件和其它的一些权限信息，上图manifest.json的可视化 界面，Manifest.json文件根据w3c的webapp规范制定，plus节点下内容为
HTML5Plus扩展规范，其下包括iOS和Android子节点，内容来源分别为iOS和
Android原生打包所要求的参数，用于对5+移动App打包为ipa或apk安装包进行配
置,我们来看看它的代码视图：
代码视图：
{
"@platforms": ["android", "iPhone", "iPad"],
"id": "H5030C660",/*应用的标识，创建应用时自动生成，勿手动修改*/
"name": "你懂得",/*应用名称，程序桌面图标名称*/
"version": {
"name": "1.0",/*应用版本名称*/
"code": ""
},
"description": "",/*应用描述信息*/
"icons": {
"72": "icon.png"
},
"launch_path": "index.html",/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
"developer": {
"name": "",/*开发者名称*/
"email": "",/*开发者邮箱地址*/
"url": ""/*开发者个人主页地址*/
},
"permissions": {
"Accelerometer": {
"description": "访问加速度感应器"
},
"Audio": {
"description": "访问麦克风"
},
"Messaging":{
"description": "短彩邮件插件"
},
"Cache": {
"description": "管理应用缓存"
},
"Camera": {
"description": "访问摄像头"
},
"Console": {
"description": "跟踪调试输出日志"
},
"Contacts": {
"description": "访问系统联系人信息"
},
"Device": {
"description": "访问设备信息"
},
"Downloader": {
"description": "文件下载管理"
},
"Events": {
"description": "应用扩展事件"
},
"File": {
"description": "访问本地文件系统"
},
"Gallery": {
"description": "访问系统相册"
},
"Geolocation": {
"description": "访问位置信息"
},
"Invocation": {
"description": "使用Native.js能力"
},
"Orientation": {
"description": "访问方向感应器"
},
"Proximity": {
"description": "访问距离感应器"
},
"Storage": {
"description": "管理应用本地数据"
},
"Uploader": {
"description": "管理文件上传任务"
},
"Runtime": {
"description": "访问运行期环境"
},
"XMLHttpRequest": {
"description": "跨域网络访问"
},
"Zip": {
"description": "文件压缩与解压缩"
},
"Barcode": {
"description": "管理二维码扫描插件"
},
"Maps": {
"description": "管理地图插件"
},
"Speech": {
"description": "管理语音识别插件"
},
"Webview":{
"description": "窗口管理"
},
"NativeUI":{
"description": "原生UI控件"
},
"Navigator":{
"description": "浏览器信息"
},
"NativeObj":{
"description": "原生对象"
}
},
"plus": {
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": true/*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/
},
"popGesture": "close",/*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/
"runmode": "normal",/*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
"signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选，保留给应用签名，暂不使用*/
"distribute": {
"apple": {
"appid": "",/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
"mobileprovision": "",/*iOS应用打包配置文件*/
"password": "",/*iOS应用打包个人证书导入密码*/
"p12": "",/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
"devices": "universal",/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
"frameworks":[
]/*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/
},
"google": {
"packagename": "",/*Android应用包名，如io.dcloud.HelloH5*/
"keystore": "",/*Android应用打包使用的密钥库文件*/
"password": "",/*Android应用打包使用密钥库中证书的密码*/
"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
"permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]
/*使用Native.js调用原生安卓API需要使用到的系统权限*/
},
"orientation": [
"portrait-primary"
],/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
"icons": {
"ios": {
"prerendered": true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/
"auto": "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/
"iphone": {
"normal": "", /*iPhone3/3GS程序图标，分辨率：57x57*/
"retina": "", /*iPhone4程序图标，分辨率：114x114*/
"retina7": "", /*iPhone4S/5/6程序图标，分辨率：120x120*/
"retina8": "", /*iPhone6 Plus程序图标，分辨率：180x180*/
"spotlight-normal": "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/
"spotlight-retina": "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/
"spotlight-retina7": "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "", /*iPhone4设置页面程序图标，分辨率：29x29*/
"settings-retina": "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/
"settings-retina8": "" /*iPhone6Plus设置页面程序图标，分辨率：87x87*/
},
"ipad": {
"normal": "", /*iPad普通屏幕程序图标，分辨率：72x72*/
"retina": "", /*iPad高分屏程序图标，分辨率：144x144*/
"normal7": "", /*iPad iOS7程序图标，分辨率：76x76*/
"retina7": "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/
"spotlight-normal": "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/
"spotlight-retina": "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/
"spotlight-normal7": "",/*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/
"spotlight-retina7": "",/*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "",/*iPad设置页面程序图标，分辨率：29x29*/
"settings-retina": "" /*iPad高分屏设置页面程序图标，分辨率：58x58*/
}
},
"android": {
"mdpi": "", /*普通屏程序图标，分辨率：48x48*/
"ldpi": "", /*大屏程序图标，分辨率：48x48*/
"hdpi": "", /*高分屏程序图标，分辨率：72x72*/
"xhdpi": "",/*720P高分屏程序图标，分辨率：96x96*/
"xxhdpi": ""/*1080P 高分屏程序图标，分辨率：144x144*/
}
},
"splashscreen": {
"ios": {
"iphone": {
"default": "", /*iPhone3启动图片选，分辨率：320x480*/
"retina35": "",/*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/
"retina40": "",/*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/
"retina47": "",/*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/
"retina55": "",/*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/
"retina55l": ""/*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/
},
"ipad": {
"portrait": "", /*iPad竖屏启动图片，分辨率：768x1004*/
"portrait-retina": "",/*iPad高分屏竖屏图片，分辨率：1536x2008*/
"landscape": "", /*iPad横屏启动图片，分辨率：1024x748*/
"landscape-retina": "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/
"portrait7": "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/
"portrait-retina7": "",/*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/
"landscape7": "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/
"landscape-retina7": ""/*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/
}
},
"android": {
"mdpi": "", /*普通屏启动图片，分辨率：240x282*/
"ldpi": "", /*大屏启动图片，分辨率：320x442*/
"hdpi": "", /*高分屏启动图片，分辨率：480x762*/
"xhdpi": "", /*720P高分屏启动图片，分辨率：720x1242*/
"xxhdpi": ""/*1080P高分屏启动图片，分辨率：1080x1882*/
}
}
}
}
}
这里是manifest.json的全部配置代码信息，我们也可以手动的去配置我们想要的，接下来我们将我们需要的权限挨个配置，首先我们来看应用信息：
应用信息
应用信息下包括了基本信息有：应用的名称、appid、版本号和页面入口等。如图所示：
这里是它的可视化界面，我们这里的应用名称、以及appid、版本号、页面入口如图所示，注意一点，APPID是通过云端自动获取，版本号自己填，页面入口是index.html 页面。
代码视图
重力感应的配置
所谓重力感应无非是手机的应用显示的方向比如竖屏、横屏以及旋转等，我们老看看它的可视化图的界面：
上图是我们应用方向的可视化图，这里我们选择了所有的显示方向，我们来看看它的代码视图：
代码可视化
上图是我们该应用显示方向的代码配置，其中：
portrait-primary：竖屏正方向；
portrait-secondary：竖屏反方向；
landscape-primary：横屏正方向；
landscape-secondary：横屏反方向；
这些要生效我们必须要在云端将它打包成app才能看到效果，接下来就是设备的选择，由于我毕设是安卓的，所以我这里来说说安卓设备的配置，照猫画虎，IOS差不多。
设备选择
HBuilder给我们提供了安卓和iOS设备当然也包括iOS平板等设备，选择不同的设备会有不同的不同的启动界面以及相应的配置，选择好了平台之后我们来进行相应的配置：
图标配置
首次配置时就如图所示，这里我们需要添加自己喜欢的图标，要求是正方形的格式为png的图片默认大小是180*180，添加之后是这个样子的，如图所示：
对，没错就是这样的，之后将我们设备的图标替换成我们自己的，默认是HBuilder的logo，如图所示：
这就是我们app的图标了，配置玩图标的可视化图我们来看看它的代码是如何配置的。如图所示：
代码中我们可以看到，图标的大小跟我们视图的大小一致，总共有4中选择，你可以选择你喜欢的作为app的图标，接下来我们看app启动界面的配置
启动界面的配置
上图是安卓的启动界面的截图，首先点击图中箭头的按钮回跳到这个页面，选择你要的设备进行配置，如不配置，默认是HBuilder的logo，这里有5中分辨率的类型，是根据你手机的分辨率来进行对应的匹配，这里我们选择自己想要的图片点击图中的选择按钮，将图片加载进来，建议你5中分辨率全都将图片加载一下即可，之后选择按钮变为更换。
这是代码视图，跟我们可视化图中的分辨率是一致的，当打包之后安装时会根据你手机分辨率的大小进行选择，这里我们不需要我们去设置，接下来进行SDK的配置，简单的说就是第三方的插件。
SDK配置
图中为第三方插件的配置，我们需要各自的接口，由于我的要求比较简单没有设置第三方的配置，不过后来我试了百度地图的SDK接口，可以的，这里不说了，下次说。
模块权限的配置
模块权限的配置使我们的应用能用到的，比如第三方的插件，这里会联动帮我们自动配置，所以这里不多说了。我们的应用配置差不多这里了，接下来是奇迹的时刻了，要想将你的项目能在app中显示，在我们的入口显示页面中加入如图所示的代码：
在index.html页面中加入如图的代码即可，接下来近视打包的时刻了，如图所示：
如图所示，点击发行-发行为原生安装包之后到了这个页面，选择自己的平台，我这里是安卓平台，如果你有自己的证书可以使用自己的，没有的话就使用公用证书，然后打包，跳到这个页面如图所示：
到了这个界面，别担心稍等几分钟就可以了，然后就是一个apk安装包，可以手动下载安装到手机上就可以了，没错就是这么简单，不信动手试试哦！
